AnyRTC --- Flutter 实现视频通话

关注
发布于: 2020 年 12 月 03 日
前言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-东慕雨
﻿
发布于: 2020 年 12 月 03 日阅读数: 20
anyRTC开发者

关注
实时交互，万物互联! 2020.08.10 加入
实时交互，万物互联，全球实时互动云服务商领跑者！
评论 (1 条评论)

发布
Healer
写的真不错！！！
2020 年 12 月 03 日 14:25
 0 回复
没有更多了
创作场景

AnyRTC --- Flutter 实现视频通话

前言

简介

GitHub地址

Flutter SDK

总结

anyRTC开发者

评论 (1 条评论)
