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.audioLo***ate}');
    },
    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-东慕雨

上一篇:企业实践用户邮箱导入/导出(第1部分)


下一篇:【MySQL】MySQL 8.0统计连续登录天数