AnyRTC --- Flutter 实现视频通话

落日映苍穹つ 2022-12-26 02:22 7阅读 0赞

## 前言 ##

> anyRTC的音视频通讯，所有的技术：Android、IOS、Web、uniapp、小程序、Windows SDK，然后前几天又封装了Flutter SDK，今天就可以讲述一下Flutter SDK的用法。

[anyRTC开发者中心][anyRTC]

## 简介 ##

继广大客户的要求，也封装了Flutter SDK，SDK会越来越完善，大家可以先来踩点。完全继承了Flutter的优点，使用起来更方便：

*  性能强大，流畅
 *  路由设计优秀
 *  单例模式
 *  UI跨平台稳定
 *  可选静态的语言，语言特性优秀
 *  跨多种平台，减少开发成本；支持插件，可以访问原生系统的调用

## GitHub地址 ##

GitHub：[https://github.com/anyRTC/Flutter-SDK][https_github.com_anyRTC_Flutter-SDK]

## Flutter SDK ##

下面介绍 使用Flutter SDK 来实现视频通讯。

**1.创建Engine的实例**

//* AppID * anyRTC 为 App 开发者签发的 App ID。每个项目都应该有一个独一无二的 App ID。如果你的开发包里没有 App ID，请从anyRTC官网(https://www.anyrtc.io)申请一个新的 App ID
        engine = await RtcEngine.create("Your APPID");

**2.设置RTC回调**

engine.setEventHandler(RtcEngineEventHandler(
        //用户刚加入频道
        joinChannelSuccess: (String channel, String uid, int elapsed) { 
            print('joinChannelSuccess ${channel} ${uid}');
            setState(() { 
               _joined = true;
            });
        }, 
        userJoined: (String uid, int elapsed) { 
          print('userJoined ${uid}');
          setState(() { 
            _remoteUid = uid;
          });
        },
        userOffline: (String uid, UserOfflineReason reason) { 
          print('userOffline ${uid}');
          setState(() { 
            _remoteUid = null;
          });
        },
        remoteAudioStateChanged: (String uid,AudioRemoteState state, AudioRemoteStateReason reason, int elapsed){ 
          print('remoteAudioStateChanged zhao ${uid} -${state} - ${reason} -${elapsed}');
        },
        remoteVideoStateChanged: (String uid,VideoRemoteState state, VideoRemoteStateReason reason, int elapsed){ 
          print('remoteVideoStateChanged zhao ${uid} -${state} - ${reason} -${elapsed}');
        },
        localAudioStateChanged: (AudioLocalState state, AudioLocalError error){ 
          print('localAudioStateChanged zhao ${state} - ${error} ');
        },
        localVideoStateChanged: (LocalVideoStreamState localVideoState, LocalVideoStreamError error){ 
          print('localVideoStateChanged zhao ${localVideoState} - ${error} ');
        },
        remoteAudioStats: (RemoteAudioStats stats){ 
          print('RemoteAudioStats zhao ${stats.audioLossRate}');
        },
        remoteVideoStats: (RemoteVideoStats stats){ 
          print('RemoteVideoStats zhao ${stats.decoderOutputFrameRate} ==${stats.rendererOutputFrameRate}');
        },
        rtcStats:(RtcStats stats) { 
          print('RtcStats zhao ${stats.totalDuration} ==${stats.rxBytes}');
        },
        networkTypeChanged: (NetworkType type){ 
          print('networktype zhao ${NetworkType.WIFI} ');
        }));

上面是RTC的回调，列出来比较常用的，自己可以根据的需求来自己添加所需要的回调，在里面进行逻辑处理。

**3.开启视频**

await engine.enableVideo();

**4.开启外放（扬声器）**

await engine.setEnableSpeakerphone(true);

可以根据自己的需求，可有可无。

**5.加入房间**  
在这个里我把用户UID设置成了随机6位数。

**注：用户UID不能为0，并且加入同一个放假的两个用户UID不能相同，否则无法通信。**

_randomBit(int len) {   //用户UID 随机数
        String scopeF = '123456789'; //首位
        String scopeC = '0123456789'; //中间
        String result = '';
        for (int i = 0; i < len; i++) { 
          if (i == 0) { 
            result = scopeF[Random().nextInt(scopeF.length)];
          } else { 
            result = result + scopeC[Random().nextInt(scopeC.length)];
          }
        }  return result;
      }

加入房间：

var userId = _randomBit(6);
    await engine.joinChannel(null, 'ChannelID', userId);

*  Token：null
 *  ChannelID：自己设定
 *  userId：随机数

**到这里就可以实现基本的语音通话了，需要两个设备和进入同一个房间**

**在 build 方法里实现渲染视频**

@override
      Widget build(BuildContext context) { 
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Plugin example app'),
            ),
            body: Stack(
              children: [
                Center(
                  child: _switch ? _renderRemoteVideo() : _renderLocalPreview(),
                ),
                Align(
                  alignment: Alignment.topLeft,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.blue,
                    child: GestureDetector(
                      onTap: () { 
                        setState(() { 
                          _switch = !_switch;
                        });
                      },
                      child: Center(
                        child:
                        _switch ? _renderLocalPreview() : _renderRemoteVideo(),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }

**远程和本地预览框切换**

Widget _renderLocalPreview() { 
        if (_joined) { 
          return RtcLocalView.TextureView();
        } else { 
          return Text(
            'Please join channel first',
            textAlign: TextAlign.center,
          );
        }
      }
    
      Widget _renderRemoteVideo() { 
        if (_remoteUid != "") { 
          return RtcRemoteView.TextureView(uid: _remoteUid);
        } else { 
          return Text(
            'Please wait remote user join',
            textAlign: TextAlign.center,
          );
        }
      }

## 总结 ##

到此已经可以进行视频通话了，上面Github有这个demo，感兴趣的小伙伴，可以耍一哈，Flutter SDK可能还需要改进的地方，欢迎大家前来踩点，你们的支持就是我们最大的动力！

anyRTC官网：[https://www.anyrtc.io/][https_www.anyrtc.io]

作者：anyRTC-东慕雨

[anyRTC]: https://docs.anyrtc.io/
[https_github.com_anyRTC_Flutter-SDK]: https://github.com/anyRTC/Flutter-SDK
[https_www.anyrtc.io]: https://www.anyrtc.io/