AnyRTC --- Flutter 实现视频通话

前言

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

anyRTC开发者中心

简介

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

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

GitHub地址

GitHub：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/

作者：anyRTC-东慕雨