基于声网 Flutter SDK 实现多人视频通话

• Flutter 天然支持手机端和 PC 端的跨平台能力，并拥有不错的性能表现

• 声网的 Flutter RTC SDK 同样支持 Android、iOS、MacOS 和 Windows 等平台，同时也是难得针对 Flutter 进行了全平台支持和优化的音视频 SDK

在开始之前，有必要提前简单介绍一下声网的 RTC SDK 相关实现，这也是我选择声网的原因。

声网的  RTC SDK  的逻辑实现都来自于封装好的 C/C++ 等 native 代码，而这些代码会被打包为对应平台的动态链接库，例如.dll、.so 、.dylib  ，最后通过 Dart 的 FFI(ffigen) 进行封装调用。

• Dart 可以和 native SDK 直接通信，减少了 Flutter 和原生平台交互时在 Channel 上的性能开销；

• C/C++ 相关实现在获得更好性能支持的同时，也不需要过度依赖原生平台的 API ，可以得到更灵活和安全的 API 支持。

如果说这样做有什么坏处，那大概就是 SDK 的底层开发和维护成本会剧增，不过从用户角度来看，这无异是一个绝佳的选择。

可在这个地址注册声网开发者账号：sso2.agora.io/cn/v4/signup/with-sms

如果对后续配置“门清”，可以忽略跳过。

根据法规，创建项目需要实名认证，这个必不可少；另外使用场景不必太过纠结，项目创建之后也是可以根据需要自己修改。

App ID 也算是敏感信息之一，所以尽量妥善保存，避免泄密。

为提高项目的安全性，声网推荐了使用Token对加入频道的用户进行鉴权，在生产环境中，一般为保障安全，是需要用户通过自己的服务器去签发 Token，而如果是测试需要，可以在项目详情页面的“临时 token 生成器”获取临时 Token：

在频道名输出一个临时频道，比如 Test2 ，然后点击生成临时 token 按键，即可获取一个临时 Token，有效期为 24 小时。

更多服务端签发 Token 可见 token server 文档 ：

https://docs.agora.io/cn/video-legacy/token_server?platform=Android

首先在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
 

 

  

   

   

   

   

  
  
  <key>NSCameraUsageDescription</key>  <string>*****</string>  <key>NSMicrophoneUsageDescription</key>  <string>*****</string>
 
 

  
 

在正式调用声网 SDK 的 API 之前，首先我们需要申请权限，如下代码所示，可以使用 permission_handler 的 request 提前获取所需的麦克风和摄像头权限。

 

  

   

   

   

   

   

   

   

   

   

   

  
  
@overridevoid initState() {  super.initState();
  _requestPermissionIfNeed();}
Future<void> _requestPermissionIfNeed() async {  await [Permission.microphone, Permission.camera].request();}
 
 

  
 

接下来开始配置 RTC 引擎，如下代码所示，通过 import 对应的 dart 文件之后，就可以通过 SDK 自带的 createAgoraRtcEngine 方法快速创建引擎，然后通过 initialize 方法就可以初始化 RTC 引擎了，可以看到这里会用到前面创建项目时得到的 App ID 进行初始化。

注意这里需要在请求完权限之后再初始化引擎，并更新初始化成功状态 initStatus，因为没成功初始化之前不能使用 RtcEngine 。

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  
import 'package:agora_rtc_engine/agora_rtc_engine.dart';
late final RtcEngine _engine;
///初始化状态late final Future<bool?> initStatus;
@overridevoid initState() {  super.initState();  ///请求完成权限后，初始化引擎，更新初始化成功状态  initStatus = _requestPermissionIfNeed().then((value) async {    await _initEngine();    return true;  }).whenComplete(() => setState(() {}));}

Future<void> _initEngine() async {  //创建 RtcEngine  _engine = createAgoraRtcEngine();  // 初始化 RtcEngine  await _engine.initialize(RtcEngineContext(    appId: appId,  ));  ···}

 
 

  
 

• onError ：判断错误类型和错误信息
• onJoinChannelSuccess：加入频道成功
• onUserJoined：有用户加入了频道
• onUserOffline：有用户离开了频道
• onLeaveChannel：离开频道

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  

///是否加入聊天bool isJoined = false;/// 记录加入的用户idSet<int> remoteUid = {};
Future<void> _initEngine() async {   ···   _engine.registerEventHandler(RtcEngineEventHandler(      // 遇到错误      onError: (ErrorCodeType err, String msg) {        print('[onError] err: $err, msg: $msg');      },      onJoinChannelSuccess: (RtcConnection connection, int elapsed) {        // 加入频道成功        setState(() {          isJoined = true;        });      },      onUserJoined: (RtcConnection connection, int rUid, int elapsed) {        // 有用户加入        setState(() {          remoteUid.add(rUid);        });      },      onUserOffline:          (RtcConnection connection, int rUid, UserOfflineReasonType reason) {        // 有用户离线        setState(() {          remoteUid.removeWhere((element) => element == rUid);        });      },      onLeaveChannel: (RtcConnection connection, RtcStats stats) {        // 离开频道        setState(() {          isJoined = false;          remoteUid.clear();        });      },    ));}

 
 

  
 

用户可以根据上面的回调来判断 UI 状态，比如当前用户处于频道内时显示对方的头像和数据，其他用户加入和离开频道时更新当前 UI 等。

• dimensions：配置视频的分辨率尺寸，默认是 640x360
• frameRate：配置视频的帧率，默认是 15 fps

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  

  Future<void> _initEngine() async {
    ···    // 打开视频模块支持    await _engine.enableVideo();    // 配置视频编码器，编码视频的尺寸（像素），帧率    await _engine.setVideoEncoderConfiguration(      const VideoEncoderConfiguration(        dimensions: VideoDimensions(width: 640, height: 360),        frameRate: 15,      ),    );
    await _engine.startPreview();  }
 
 

  
 

接下来就是渲染画面，如下代码所示，在 UI 上加入 AgoraVideoView 控件，并把上面初始化成功_engine，通过VideoViewController配置到 AgoraVideoView ，就可以完成本地视图的预览。

根据前面的initStatus状态，在_engine初始化成功后才加载 AgoraVideoView 。

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  
Scaffold(  appBar: AppBar(),  body: FutureBuilder<bool?>(      future: initStatus,      builder: (context, snap) {        if (snap.data != true) {          return Center(            child: new Text(              "初始化ing",              style: TextStyle(fontSize: 30),            ),          );        }        return AgoraVideoView(          controller: VideoViewController(            rtcEngine: _engine,            canvas: const VideoCanvas(uid: 0),          ),        );      }),);
 
 

  
 

这里还有另外一个参数 VideoCanvas ，其中的 uid 是用来标志用户id的，这里因为是本地用户，这里暂时用 0 表示 。

• token 就是前面临时生成的 Token

• channelId 就是前面的渠道名

• uid 和上面一样逻辑

• channelProfile 选择 channelProfileLiveBroadcasting ，因为我们需要的是多人通话。

• clientRoleType 选择 clientRoleBroadcaster，因为我们需要多人通话，所以我们需要进来的用户可以交流发送内容。

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  
Scaffold(  appBar: AppBar(),  body: FutureBuilder<bool?>(      future: initStatus,      builder: (context, snap) {        if (snap.data != true) {          return Center(            child: new Text(              "初始化ing",              style: TextStyle(fontSize: 30),            ),          );        }        return AgoraVideoView(          controller: VideoViewController(            rtcEngine: _engine,            canvas: const VideoCanvas(uid: 0),          ),        );      }),);
 
 

  
 

同样的道理，通过前面的 RtcEngineEventHandler ，我们可以获取到加入频道用户的 uid(rUid) ，所以还是AgoraVideoView，但是我们使用 VideoViewController.remote根据 uid 和频道id去创建 controller ，配合 SingleChildScrollView 在顶部显示一排可以左右滑动的用户小窗效果。

用 Stack 嵌套层级。

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  
Scaffold(  appBar: AppBar(),  body: Stack(    children: [      AgoraVideoView(      ·····      ),      Align(        alignment: Alignment.topLeft,        child: SingleChildScrollView(          scrollDirection: Axis.horizontal,          child: Row(            children: List.of(remoteUid.map(                  (e) =>                  SizedBox(                    width: 120,                    height: 120,                    child: AgoraVideoView(                      controller: VideoViewController.remote(                        rtcEngine: _engine,                        canvas: VideoCanvas(uid: e),                        connection: RtcConnection(channelId: channel),                      ),                    ),                  ),            )),          ),        ),      )    ],  ),);
 
 

  
 

这里的 remoteUid 就是一个保存加入到 channel 的 uid 的 Set 对象。

红色是我自己加上的打码。

在使用该例子测试了 12 人同时在线通话效果，基本和微信视频会议没有差别，以下是完整代码：

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  

class VideoChatPage extends StatefulWidget {  const VideoChatPage({Key? key}) : super(key: key);
  @override  State<VideoChatPage> createState() => _VideoChatPageState();}
class _VideoChatPageState extends State<VideoChatPage> {  late final RtcEngine _engine;
  ///初始化状态  late final Future<bool?> initStatus;
  ///是否加入聊天  bool isJoined = false;
  /// 记录加入的用户id  Set<int> remoteUid = {};
  @override  void initState() {    super.initState();    initStatus = _requestPermissionIfNeed().then((value) async {      await _initEngine();      return true;    }).whenComplete(() => setState(() {}));  }
  Future<void> _requestPermissionIfNeed() async {    await [Permission.microphone, Permission.camera].request();  }
  Future<void> _initEngine() async {    //创建 RtcEngine    _engine = createAgoraRtcEngine();    // 初始化 RtcEngine    await _engine.initialize(RtcEngineContext(      appId: appId,    ));
    _engine.registerEventHandler(RtcEngineEventHandler(      // 遇到错误      onError: (ErrorCodeType err, String msg) {        print('[onError] err: $err, msg: $msg');      },      onJoinChannelSuccess: (RtcConnection connection, int elapsed) {        // 加入频道成功        setState(() {          isJoined = true;        });      },      onUserJoined: (RtcConnection connection, int rUid, int elapsed) {        // 有用户加入        setState(() {          remoteUid.add(rUid);        });      },      onUserOffline:          (RtcConnection connection, int rUid, UserOfflineReasonType reason) {        // 有用户离线        setState(() {          remoteUid.removeWhere((element) => element == rUid);        });      },      onLeaveChannel: (RtcConnection connection, RtcStats stats) {        // 离开频道        setState(() {          isJoined = false;          remoteUid.clear();        });      },    ));
    // 打开视频模块支持    await _engine.enableVideo();    // 配置视频编码器，编码视频的尺寸（像素），帧率    await _engine.setVideoEncoderConfiguration(      const VideoEncoderConfiguration(        dimensions: VideoDimensions(width: 640, height: 360),        frameRate: 15,      ),    );
    await _engine.startPreview();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(),      body: Stack(        children: [          FutureBuilder<bool?>(              future: initStatus,              builder: (context, snap) {                if (snap.data != true) {                  return Center(                    child: new Text(                      "初始化ing",                      style: TextStyle(fontSize: 30),                    ),                  );                }                return AgoraVideoView(                  controller: VideoViewController(                    rtcEngine: _engine,                    canvas: const VideoCanvas(uid: 0),                  ),                );              }),          Align(            alignment: Alignment.topLeft,            child: SingleChildScrollView(              scrollDirection: Axis.horizontal,              child: Row(                children: List.of(remoteUid.map(                      (e) => SizedBox(                    width: 120,                    height: 120,                    child: AgoraVideoView(                      controller: VideoViewController.remote(                        rtcEngine: _engine,                        canvas: VideoCanvas(uid: e),                        connection: RtcConnection(channelId: channel),                      ),                    ),                  ),                )),              ),            ),          )        ],      ),      floatingActionButton: FloatingActionButton(        onPressed: () async {          // 加入频道          _engine.joinChannel(            token: token,            channelId: channel,            uid: 0,            options: ChannelMediaOptions(              channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,              clientRoleType: ClientRoleType.clientRoleBroadcaster,            ),          );        },      ),    );  }

 

最后我们再来个进阶调整，前面 remoteUid 保存的只是远程用户 id ，如果我们将 remoteUid 修改为 remoteControllers 用于保存 VideoViewController ，那么就可以简单实现画面切换，比如「点击用户画面实现大小切换」这样的需求。

• remoteUid 从保存远程用户 id 变成了 remoteControllers 的 Map<int,VideoViewController>

• 新增了currentController用于保存当前大画面下的 VideoViewController ，默认是用户自己

• registerEventHandler 里将 uid 保存更改为 VideoViewController 的创建和保存

• 在小窗处增加 InkWell 点击，在单击之后切换 VideoViewController 实现画面切换

 

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
  
class VideoChatPage extends StatefulWidget {  const VideoChatPage({Key? key}) : super(key: key);
  @override  State<VideoChatPage> createState() => _VideoChatPageState();}
class _VideoChatPageState extends State<VideoChatPage> {  late final RtcEngine _engine;
  ///初始化状态  late final Future<bool?> initStatus;
  ///当前 controller  late VideoViewController currentController;
  ///是否加入聊天  bool isJoined = false;
  /// 记录加入的用户id  Map<int, VideoViewController> remoteControllers = {};
  @override  void initState() {    super.initState();    initStatus = _requestPermissionIfNeed().then((value) async {      await _initEngine();      ///构建当前用户 currentController      currentController = VideoViewController(        rtcEngine: _engine,        canvas: const VideoCanvas(uid: 0),      );      return true;    }).whenComplete(() => setState(() {}));  }
  Future<void> _requestPermissionIfNeed() async {    await [Permission.microphone, Permission.camera].request();  }
  Future<void> _initEngine() async {    //创建 RtcEngine    _engine = createAgoraRtcEngine();    // 初始化 RtcEngine    await _engine.initialize(RtcEngineContext(      appId: appId,    ));
    _engine.registerEventHandler(RtcEngineEventHandler(      // 遇到错误      onError: (ErrorCodeType err, String msg) {        print('[onError] err: $err, msg: $msg');      },      onJoinChannelSuccess: (RtcConnection connection, int elapsed) {        // 加入频道成功        setState(() {          isJoined = true;        });      },      onUserJoined: (RtcConnection connection, int rUid, int elapsed) {        // 有用户加入        setState(() {          remoteControllers[rUid] = VideoViewController.remote(            rtcEngine: _engine,            canvas: VideoCanvas(uid: rUid),            connection: RtcConnection(channelId: channel),          );        });      },      onUserOffline:          (RtcConnection connection, int rUid, UserOfflineReasonType reason) {        // 有用户离线        setState(() {          remoteControllers.remove(rUid);        });      },      onLeaveChannel: (RtcConnection connection, RtcStats stats) {        // 离开频道        setState(() {          isJoined = false;          remoteControllers.clear();        });      },    ));
    // 打开视频模块支持    await _engine.enableVideo();    // 配置视频编码器，编码视频的尺寸（像素），帧率    await _engine.setVideoEncoderConfiguration(      const VideoEncoderConfiguration(        dimensions: VideoDimensions(width: 640, height: 360),        frameRate: 15,      ),    );
    await _engine.startPreview();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(),      body: Stack(        children: [          FutureBuilder<bool?>(              future: initStatus,              builder: (context, snap) {                if (snap.data != true) {                  return Center(                    child: new Text(                      "初始化ing",                      style: TextStyle(fontSize: 30),                    ),                  );                }                return AgoraVideoView(                  controller: currentController,                );              }),          Align(            alignment: Alignment.topLeft,            child: SingleChildScrollView(              scrollDirection: Axis.horizontal,              child: Row(                ///增加点击切换                children: List.of(remoteControllers.entries.map(                  (e) => InkWell(                    onTap: () {                      setState(() {                        remoteControllers[e.key] = currentController;                        currentController = e.value;                      });                    },                    child: SizedBox(                      width: 120,                      height: 120,                      child: AgoraVideoView(                        controller: e.value,                      ),                    ),                  ),                )),              ),            ),          )        ],      ),      floatingActionButton: FloatingActionButton(        onPressed: () async {          // 加入频道          _engine.joinChannel(            token: token,            channelId: channel,            uid: 0,            options: ChannelMediaOptions(              channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,              clientRoleType: ClientRoleType.clientRoleBroadcaster,            ),          );        },      ),    );  }}
 
 

  
 

另外如果你想切换前后摄像头，可以通过 _engine.switchCamera(); 等 API 简单实现。

• 申请麦克风和摄像头权限

• 创建和通过 App ID 初始化引擎

• 注册 RtcEngineEventHandler 回调用于判断状态

• 打开和配置视频编码支持，并且启动预览 startPreview

• 调用 joinChannel 加入对应频道

• 通过 AgoraVideoView 和 VideoViewController 配置显示本地和远程用户画面

如果使用过 Flutter 开发过视频类相关项目的应该知道，Flutter 里可以使用外界纹理和PlatfromView两种方式实现画面接入，而由此对应的是 AgoraVideoView 在使用 VideoViewController 时，是有 useFlutterTexture 和 useAndroidSurfaceView 两个可选参数。

这里我们不讨论它们之间的优劣和差异，只是让大家可以更直观理解声网 SDK 在不同平台渲染时的差异，作为拓展知识点补充。

• 在 macOS 和 windows 版本中，声网 SDK 默认只支持 Texture 这种外界纹理的实现，这主要是因为 PC 端的一些 API 限制导致。

• Android 上并不支持配置为 Texture ，只支持 PlatfromView 模式，这里应该是基于性能考虑。

• 只有 iOS 支持 Texture 模式或者 PlatfromView 的渲染模式可选择，所以  useFlutterTexture 更多是针对 iOS 生效。