基于声网 Flutter SDK 实现互动直播
前言互动直播是实现很多热门场景的基础，例如直播带货、秀场直播，还有类似抖音的直播 PK等。本文是由声网社区的开发者“小猿”撰写的Flutter基础教程系列中的第二篇，他将带着大家用一个小时，利用声网 Flutter SDK 实现视频直播、发评论、送礼物等基础功能。
开发一个跨平台的的直播的功能需要多久？如果直播还需要支持各种互动效果呢？
我给出的答案是不到一个小时，在 Flutter + 声网 SDK 的加持下，你可以在一个小时之内就完成一个互动直播的雏形。
声网作为最早支持 Flutter 平台的 SDK 厂商之一， 其 RTC SDK 实现主要来自于封装好的 C/C++ 等 native 代码，而这些代码会被打包为对应平台的动态链接库，最后通过 Dart 的 FFI(ffigen) 进行封装调用，减少了 Flutter 和原生平台交互时在 Channel 上的性能开销。
开始之前
接下来让我们进入正题，既然选择了 Flutter + 声网的实现路线，那么在开始之前肯定有一些需要准备的前置条件，首先是为了满足声网 RTC SDK 的使用条件，开发环境必须为：
[*]Flutter 2.0 或更高版本
[*]Dart 2.14.0 或更高版本
从目前 Flutter 和 Dart 版本来看，上面这个要求并不算高，然后就是你需要注册一个声网开发者账号 ，从而获取后续配置所需的 App ID 和 Token 等配置参数。
如果对于配置“门清”，可以忽略跳过这部分直接看下一章节。
创建项目
首先可以在声网控制台的项目管理页面上点击创建项目，然后在弹出框选输入项目名称，之后选择「互动直播」场景和「安全模式(APP ID + Token)」 即可完成项目创建。
https://oscimg.oschina.net/oscnet/up-30eda6c6648cb64c626c92361cb4a6dafeb.png
根据法规，创建项目需要实名认证，这个必不可少，另外使用场景不必太过纠结，项目创建之后也是可以根据需要自己修改。
获取 App ID
在项目列表点击创建好的项目配置，进入项目详情页面之后，会看到基本信息栏目有个 App ID 的字段，点击如下图所示图标，即可获取项目的 App ID。
https://oscimg.oschina.net/oscnet/up-04854de1b3395f65b19940b11770dc7b717.png
App ID 也算是敏感信息之一，所以尽量妥善保存，避免泄密。
获取 Token
为提高项目的安全性，声网推荐了使用 Token 对加入频道的用户进行鉴权，在生产环境中，一般为保障安全，是需要用户通过自己的服务器去签发 Token，而如果是测试需要，可以在项目详情页面的「临时 token 生成器」获取临时 Token：
在频道名输入一个临时频道，比如 Test2 ，然后点击生成临时 token 按键，即可获取一个临时 Token，有效期为 24 小时。
https://oscimg.oschina.net/oscnet/up-58651185f9fab2ec33a0f0c9d71a3959a53.png
这里得到的 Token 和频道名就可以直接用于后续的测试，如果是用在生产环境上，建议还是在服务端签发 Token ，签发 Token 除了 App ID 还会用到 App 证书，获取 App 证书同样可以在项目详情的应用配置上获取。
https://oscimg.oschina.net/oscnet/up-1d34e76e17217c76d8cfe0aa1f5021bd988.png
更多服务端签发 Token 可见 token server 文档 。
开始开发
通过前面的配置，我们现在拥有了 App ID、 频道名和一个有效的临时 Token ，接下里就是在 Flutter 项目里引入声网的 RTC SDK ：agora_rtc_engine 。
项目配置
首先在 Flutter 项目的 pubspec.yaml文件中添加以下依赖，其中 agora_rtc_engine 这里引入的是**6.1.0 **版本 。
其实 permission_handler 并不是必须的，只是因为视频通话项目必不可少需要申请到麦克风和相机权限，所以这里推荐使用 permission_handler来完成权限的动态申请。
dependencies:
flutter:
sdk: flutter
agora_rtc_engine: ^6.1.0
permission_handler: ^10.2.0这里需要注意的是， Android 平台不需要特意在主工程的 AndroidManifest.xml文件上添加uses-permission ，因为 SDK 的 AndroidManifest.xml 已经添加过所需的权限。
iOS和macOS可以直接在Info.plist文件添加NSCameraUsageDescription和NSCameraUsageDescription的权限声明，或者在 Xcode 的 Info 栏目添加Privacy - Microphone Usage Description和Privacy - Camera Usage Description。
<key>NSCameraUsageDescription</key>
<string>*****</string>
<key>NSMicrophoneUsageDescription</key>
<string>*****</string>https://oscimg.oschina.net/oscnet/up-9a20035144c5469e8964c75de9524898c80.png
使用声网 SDK
获取权限
在正式调用声网 SDK 的 API 之前，首先我们需要申请权限，如下代码所示，可以使用permission_handler的request提前获取所需的麦克风和摄像头权限。
@override
void initState() {
super.initState();
_requestPermissionIfNeed();
}
Future<void> _requestPermissionIfNeed() async {
await .request();
}因为是测试项目，默认我们可以在应用首页就申请获得。
初始化引擎
接下来开始配置 RTC 引擎，如下代码所示，通过 import 对应的 dart 文件之后，就可以通过 SDK 自带的 createAgoraRtcEngine 方法快速创建引擎，然后通过 initialize方法就可以初始化 RTC 引擎了，可以看到这里会用到前面创建项目时得到的 App ID 进行初始化。
注意这里需要在请求完权限之后再初始化引擎。
import 'package:agora_rtc_engine/agora_rtc_engine.dart';
late final RtcEngine _engine;
Future<void> _initEngine() async {
_engine = createAgoraRtcEngine();
await _engine.initialize(const RtcEngineContext(
appId: appId,
));
···
}接着我们需要通过 registerEventHandler注册一系列回调方法，在 RtcEngineEventHandler 里有很多回调通知，而一般情况下我们比如常用到的会是下面这几个：
[*]onError ：判断错误类型和错误信息
[*]onJoinChannelSuccess：加入频道成功
[*]onUserJoined：有用户加入了频道
[*]onUserOffline：有用户离开了频道
[*]onLeaveChannel：离开频道
[*]onStreamMessage: 用于接受远端用户发送的消息
Future<void> _initEngine() async {
···
_engine.registerEventHandler(RtcEngineEventHandler(
onError: (ErrorCodeType err, String msg) {},
onJoinChannelSuccess: (RtcConnection connection, int elapsed) {
setState(() {
isJoined = true;
});
},
onUserJoined: (RtcConnection connection, int rUid, int elapsed) {
remoteUid.add(rUid);
setState(() {});
},
onUserOffline:
(RtcConnection connection, int rUid, UserOfflineReasonType reason) {
setState(() {
remoteUid.removeWhere((element) => element == rUid);
});
},
onLeaveChannel: (RtcConnection connection, RtcStats stats) {
setState(() {
isJoined = false;
remoteUid.clear();
});
},
onStreamMessage: (RtcConnection connection, int remoteUid, int streamId,
Uint8List data, int length, int sentTs) {
}));用户可以根据上面的回调来判断 UI 状态，比如当前用户时候处于频道内显示对方的头像和数据，提示用户进入直播间，接收观众发送的消息等。
接下来因为我们的需求是「互动直播」，所以就会有观众和主播的概念，所以如下代码所示：
[*]首先需要调用enableVideo 打开视频模块支持，可以看到视频画面
[*]同时我们还可以对视频编码进行一些简单配置，比如通过
VideoEncoderConfiguration 配置分辨率是帧率
[*]根据进入用户的不同，我们假设type为"Create"是主播， "Join"是观众
[*]那么初始化时，主播需要通过通过startPreview开启预览
[*]观众需要通过enableLocalAudio(false); 和enableLocalVideo(false);关闭本地的音视频效果
Future<void> _initEngine() async {
···
_engine.enableVideo();
await _engine.setVideoEncoderConfiguration(
const VideoEncoderConfiguration(
dimensions: VideoDimensions(width: 640, height: 360),
frameRate: 15,
),
);
/// 自己直播才需要预览
if (widget.type == "Create") {
await _engine.startPreview();
}
if (widget.type != "Create") {
_engine.enableLocalAudio(false);
_engine.enableLocalVideo(false);
}关于 setVideoEncoderConfiguration 的更多参数配置支持如下所示：
https://oscimg.oschina.net/oscnet/up-c0a27d5cdc3b068240e9e0901185507065d.png
接下来需要初始化一个 VideoViewController，根据角色的不同：
[*]主播可以通过VideoViewController直接构建控制器，因为画面是通过主播本地发出的流
[*]观众需要通过VideoViewController.remote构建，因为观众需要获取的是主播的信息流，区别在于多了connection 参数需要写入channelId，同时VideoCanvas需要写入主播的uid 才能获取到画面
late VideoViewController rtcController;
Future<void> _initEngine() async {
···
rtcController = widget.type == "Create"
? VideoViewController(
rtcEngine: _engine,
canvas: const VideoCanvas(uid: 0),
)
: VideoViewController.remote(
rtcEngine: _engine,
connection: const RtcConnection(channelId: cid),
canvas: VideoCanvas(uid: widget.remoteUid),
);
setState(() {
_isReadyPreview = true;
});最后调用 joinChannel加入直播间就可以了，其中这些参数都是必须的：
[*]token 就是前面临时生成的Token
[*]channelId 就是前面的渠道名
[*]uid 就是当前用户的id ，这些id 都是我们自己定义的
[*]channelProfile根据角色我们可以选择不同的类别，比如主播因为是发起者，可以选择channelProfileLiveBroadcasting ；而观众选channelProfileCommunication
[*]clientRoleType选择clientRoleBroadcaster
Future<void> _initEngine() async {
···
await _joinChannel();
}
Future<void> _joinChannel() async {
await _engine.joinChannel(
token: token,
channelId: cid,
uid: widget.uid,
options: ChannelMediaOptions(
channelProfile: widget.type == "Create"
? ChannelProfileType.channelProfileLiveBroadcasting
: ChannelProfileType.channelProfileCommunication,
clientRoleType: ClientRoleType.clientRoleBroadcaster,
// clientRoleType: widget.type == "Create"
// ? ClientRoleType.clientRoleBroadcaster
// : ClientRoleType.clientRoleAudience,
),
);
之前我以为观众可以选择 clientRoleAudience 角色，但是后续发现如果用户是通过 clientRoleAudience 加入可以直播间，onUserJoined 等回调不会被触发，这会影响到我们后续的开发，所以最后还是选择了 clientRoleBroadcaster。
https://oscimg.oschina.net/oscnet/up-30b866cd0bd5dcd711ae99df0feb9d54485.png
https://oscimg.oschina.net/oscnet/up-8b23ae557f3ecfd38dda5f65126106c8bd5.png
渲染画面
接下来就是渲染画面，如下代码所示，在 UI 上加入 AgoraVideoView控件，并把上面初始化成功的RtcEngine和VideoViewController配置到 AgoraVideoView，就可以完成画面预览。
Stack(
children: [
AgoraVideoView(
controller: rtcController,
),
Align(
alignment: const Alignment(-.95, -.95),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.of(remoteUid.map(
(e) => Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.blueAccent),
alignment: Alignment.center,
child: Text(
e.toString(),
style: const TextStyle(
fontSize: 10, color: Colors.white),
),
),
)),
),
),
),这里还在页面顶部增加了一个 SingleChildScrollView ，把直播间里的观众 id 绘制出来，展示当前有多少观众在线。
接着我们只需要在做一些简单的配置，就可以完成一个简单直播 Demo 了，如下图所示，在主页我们提供 Create 和 Join 两种角色进行选择，并且模拟用户的 uid 来进入直播间：
[*]主播只需要输入自己的 uid 即可开播
[*]观众需要输入自己的 uid 的同时，也输入主播的 uid ，这样才能获取到主播的画面
https://oscimg.oschina.net/oscnet/up-eb1d50519a1c72cf3adb014e20463b6287c.png
https://oscimg.oschina.net/oscnet/up-de595d1ab37b905a9782be162e4613ee205.png
接着我们只需要通过 Navigator.push 打开页面，就可以看到主播（左）成功开播后，观众（右）进入直播间的画面效果了，这时候如果你看下方截图，可能会发现观众和主播的画面是镜像相反的。
https://oscimg.oschina.net/oscnet/up-f01e4699d80ceba98436fd3cb342129c174.png
https://oscimg.oschina.net/oscnet/up-2ac32ea6846ed5b44cf5f162506d2f89628.png
如果想要主播和观众看到的画面是一致的话，可以在前面初始化代码的 VideoEncoderConfiguration 里配置 mirrorMode 为 videoMirrorModeEnabled，就可以让主播画面和观众一致。
await _engine.setVideoEncoderConfiguration(
const VideoEncoderConfiguration(
dimensions: VideoDimensions(width: 640, height: 360),
frameRate: 15,
bitrate: 0,
mirrorMode: VideoMirrorModeType.videoMirrorModeEnabled,
),
);这里 mirrorMode 配置不需要区分角色，因为 mirrorMode 参数只会只影响远程用户看到的视频效果。
https://oscimg.oschina.net/oscnet/up-8e2b05e958b9a52eca5532ee03b3ab8f998.gif
https://oscimg.oschina.net/oscnet/up-2e7d000f97585dc81db7e4eb93bb69f9268.gif
上面动图左下角还有一个观众进入直播间时的提示效果，这是根据 onUserJoined 回调实现，在收到用户进入直播间后，将 id 写入数组，并通过PageView进行轮循展示后移除。
互动开发
前面我们已经完成了直播的简单 Demo 效果，接下来就是实现「互动」的思路了。
前面我们初始化时注册了一个 onStreamMessage 的回调，可以用于主播和观众之间的消息互动，那么接下来主要通过两个「互动」效果来展示如果利用声网 SDK 实现互动的能力。
首先是「消息互动」：
[*]我们需要通过 SDK 的createDataStream 方法得到一个streamId
[*]然后把要发送的文本内容转为Uint8List
[*]最后利用sendStreamMessage 就可以结合streamId 就可以将内容发送到直播间
streamId = await _engine.createDataStream(
const DataStreamConfig(syncWithAudio: false, ordered: false));
final data = Uint8List.fromList(
utf8.encode(messageController.text));
await _engine.sendStreamMessage(
streamId: streamId, data: data, length: data.length);在 onStreamMessage 里我们可以通过utf8.decode(data) 得到用户发送的文本内容，结合收到的用户 id ，根据内容，我们就可以得到如下图所示的互动消息列表。
onStreamMessage: (RtcConnection connection, int remoteUid, int streamId,
Uint8List data, int length, int sentTs) {
var message = utf8.decode(data);
doMessage(remoteUid, message);
}));前面显示的 id ，后面对应的是用户发送的文本内容
https://oscimg.oschina.net/oscnet/up-656a083d652feef38d68e5b3375221c1fc0.gif
https://oscimg.oschina.net/oscnet/up-e9d687e360361722455b05fb847712cf2eb.gif
那么我们再进阶一下，收到用户一些「特殊格式消息」之后，我们可以展示动画效果而不是文本内容，例如：
在收到 [ *** ] 格式的消息时弹出一个动画，类似粉丝送礼。
实现这个效果我们可以引入第三方 rive 动画库，这个库只要通过 RiveAnimation.network 就可以实现远程加载，这里我们直接引用一个社区开放的免费 riv 动画，并且在弹出后 3s 关闭动画。
showAnima() {
showDialog(
context: context,
builder: (context) {
return const Center(
child: SizedBox(
height: 300,
width: 300,
child: RiveAnimation.network(
'https://public.rive.app/community/runtime-files/4037-8438-first-animation.riv',
),
),
);
},
barrierColor: Colors.black12);
Future.delayed(const Duration(seconds: 3), () {
Navigator.of(context).pop();
});
}
最后，我们通过一个简单的正则判断，如果收到 [ *** ] 格式的消息就弹出动画，如果是其他就显示文本内容，最终效果如下图动图所示。
bool isSpecialMessage(message) {
RegExp reg = RegExp(r"[*]$");
return reg.hasMatch(message);
}
doMessage(int id, String message) {
if (isSpecialMessage(message) == true) {
showAnima();
} else {
normalMessage(id, message);
}
}https://oscimg.oschina.net/oscnet/up-6adc312fdd0c9c8914d5f24e81226484540.gif
虽然代码并不十分严谨，但是他展示了如果使用声网 SDK 实现 「互动」的效果，可以看到使用声网 SDK 只需要简单配置就能完成「直播」和 「互动」两个需求场景。
完整代码如下所示，这里面除了声网 SDK 还引入了另外两个第三方包：
[*]flutter_swiper_view 实现用户进入时的循环播放提示
[*]rive用于上面我们展示的动画效果
import 'dart:async';import 'dart:convert';import 'dart:typed_data';import 'package:agora_rtc_engine/agora_rtc_engine.dart';import 'package:flutter/material.dart';import 'package:flutter_swiper_view/flutter_swiper_view.dart';import 'package:rive/rive.dart';const token = "xxxxxx";const cid = "test";const appId = "xxxxxx";class LivePage extends StatefulWidget {final int uid;final int? remoteUid;final String type;const LivePage( {required this.uid, required this.type, this.remoteUid, Key? key}) : super(key: key);@overrideState createState() => _State();}class _State extends State {late final RtcEngine _engine;bool _isReadyPreview = false;bool isJoined = false;Set remoteUid = {};final List _joinTip = [];List messageList = [];final messageController = TextEditingController();final messageListController = ScrollController();late VideoViewController rtcController;late int streamId;final animaStream = StreamController();@overridevoid initState() { super.initState(); animaStream.stream.listen((event) { showAnima(); }); _initEngine();}@overridevoid dispose() { super.dispose(); animaStream.close(); _dispose();}Future _dispose() async { await _engine.leaveChannel(); await _engine.release();}Future _initEngine() async { _engine = createAgoraRtcEngine(); await _engine.initialize(const RtcEngineContext( appId: appId, )); _engine.registerEventHandler(RtcEngineEventHandler( onError: (ErrorCodeType err, String msg) {}, onJoinChannelSuccess: (RtcConnection connection, int elapsed) { setState(() { isJoined = true; }); }, onUserJoined: (RtcConnection connection, int rUid, int elapsed) { remoteUid.add(rUid); var tip = (widget.type == "Create") ? "$rUid 来了" : "${connection.localUid} 来了"; _joinTip.add(tip); Future.delayed(const Duration(milliseconds: 1500), () { _joinTip.remove(tip); setState(() {}); }); setState(() {}); }, onUserOffline: (RtcConnection connection, int rUid, UserOfflineReasonType reason) { setState(() { remoteUid.removeWhere((element) => element == rUid); }); }, onLeaveChannel: (RtcConnection connection, RtcStats stats) { setState(() { isJoined = false; remoteUid.clear(); }); }, onStreamMessage: (RtcConnection connection, int remoteUid, int streamId, Uint8List data, int length, int sentTs) { var message = utf8.decode(data); doMessage(remoteUid, message); })); _engine.enableVideo(); await _engine.setVideoEncoderConfiguration(
const VideoEncoderConfiguration(
dimensions: VideoDimensions(width: 640, height: 360),
frameRate: 15,
bitrate: 0,
mirrorMode: VideoMirrorModeType.videoMirrorModeEnabled,
),
); /// 自己直播才需要预览 if (widget.type == "Create") { await _engine.startPreview(); } await _joinChannel(); if (widget.type != "Create") { _engine.enableLocalAudio(false); _engine.enableLocalVideo(false); } rtcController = widget.type == "Create" ? VideoViewController( rtcEngine: _engine, canvas: const VideoCanvas(uid: 0), ) : VideoViewController.remote( rtcEngine: _engine, connection: const RtcConnection(channelId: cid), canvas: VideoCanvas(uid: widget.remoteUid), ); setState(() { _isReadyPreview = true; });}Future _joinChannel() async { await _engine.joinChannel( token: token, channelId: cid, uid: widget.uid, options: ChannelMediaOptions( channelProfile: widget.type == "Create" ? ChannelProfileType.channelProfileLiveBroadcasting : ChannelProfileType.channelProfileCommunication, clientRoleType: ClientRoleType.clientRoleBroadcaster, // clientRoleType: widget.type == "Create" // ? ClientRoleType.clientRoleBroadcaster // : ClientRoleType.clientRoleAudience, ), ); streamId = await _engine.createDataStream( const DataStreamConfig(syncWithAudio: false, ordered: false));}bool isSpecialMessage(message) { RegExp reg = RegExp(r"
[*]$"); return reg.hasMatch(message);}doMessage(int id, String message) { if (isSpecialMessage(message) == true) { animaStream.add(message); } else { normalMessage(id, message); }}normalMessage(int id, String message) { messageList.add({id: message}); setState(() {}); Future.delayed(const Duration(seconds: 1), () { messageListController .jumpTo(messageListController.position.maxScrollExtent + 2); });}showAnima() {
showDialog(
context: context,
builder: (context) {
return const Center(
child: SizedBox(
height: 300,
width: 300,
child: RiveAnimation.network(
'https://public.rive.app/community/runtime-files/4037-8438-first-animation.riv',
),
),
);
},
barrierColor: Colors.black12);
Future.delayed(const Duration(seconds: 3), () {
Navigator.of(context).pop();
});
}
@overrideWidget build(BuildContext context) { if (!_isReadyPreview) return Container(); return Scaffold( appBar: AppBar( title: const Text("LivePage"), ), body: Column( children: [ Expanded( child: Stack( children: [ AgoraVideoView( controller: rtcController, ), Align( alignment: const Alignment(-.95, -.95), child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: List.of(remoteUid.map( (e) => Container( width: 40, height: 40, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.blueAccent), alignment: Alignment.center, child: Text( e.toString(), style: const TextStyle( fontSize: 10, color: Colors.white), ), ), )), ), ), ), Align( alignment: Alignment.bottomLeft, child: Container( height: 200, width: 150, decoration: const BoxDecoration( borderRadius: BorderRadius.only(topRight: Radius.circular(8)), color: Colors.black12, ), padding: const EdgeInsets.only(left: 5, bottom: 5), child: Column( children: [ Expanded( child: ListView.builder( controller: messageListController, itemBuilder: (context, index) { var item = messageList; return Padding( padding: const EdgeInsets.symmetric( horizontal: 10, vertical: 10), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( item.keys.toList().toString(), style: const TextStyle( fontSize: 12, color: Colors.white), ), const SizedBox( width: 10, ), Expanded( child: Text( item.values.toList(), style: const TextStyle( fontSize: 12, color: Colors.white), ), ) ], ), ); }, itemCount: messageList.length, ), ), Container( height: 40, color: Colors.black54, padding: const EdgeInsets.only(left: 10), child: Swiper( itemBuilder: (context, index) { return Container( alignment: Alignment.centerLeft, child: Text( _joinTip, style: const TextStyle( color: Colors.white, fontSize: 14), ), ); }, autoplayDelay: 1000, physics: const NeverScrollableScrollPhysics(), itemCount: _joinTip.length, autoplay: true, scrollDirection: Axis.vertical, ), ), ], ), ), ) ], ), ), Container( height: 80, padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), child: Row( children: [ Expanded( child: TextField( decoration: const InputDecoration( border: OutlineInputBorder(), isDense: true, ), controller: messageController, keyboardType: TextInputType.number), ), TextButton( onPressed: () async { if (isSpecialMessage(messageController.text) != true) { messageList.add({widget.uid: messageController.text}); } final data = Uint8List.fromList( utf8.encode(messageController.text)); await _engine.sendStreamMessage( streamId: streamId, data: data, length: data.length); messageController.clear(); setState(() {}); // ignore: use_build_context_synchronously FocusScope.of(context).requestFocus(FocusNode()); }, child: const Text("Send")) ], ), ), ], ), );}}总结
从上面可以看到，其实跑完基础流程很简单，回顾一下前面的内容，总结下来就是：
[*]申请麦克风和摄像头权限
[*]创建和通过App ID初始化引擎
[*]注册RtcEngineEventHandler回调用于判断状态和接收互动能力
[*]根绝角色打开和配置视频编码支持
[*]调用joinChannel加入直播间
[*]通过AgoraVideoView和VideoViewController用户画面
[*]通过engine创建和发送stream消息
从申请账号到开发 Demo ，利用声网的 SDK 开发一个「互动直播」从需求到实现大概只过了一个小时，虽然上述实现的功能和效果还很粗糙，但是主体流程很快可以跑通了。
欢迎开发者们也尝试体验声网 SDK，实现实时音视频互动场景。现注册声网账号下载 SDK，可获得每月免费 10000 分钟使用额度。如在开发过程中遇到疑问，可在声网开发者社区与官方工程师交流。
同时在 Flutter 的加持下，代码可以在移动端和 PC 端得到复用，这对于有音视频需求的中小型团队来说无疑是最优组合之一。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]