该demo要求环境是
- Flutter Web 开发
- Chrome72 及以上版本
- Safari13 及以上版本
- flutter 2.0 及以上版本
所以请各位看官测试的时候,使用2.0,我这里使用的是最新版本,所以会有一些奇妙的bug
-
下载官方github的
实时音视频 Flutter-无 UI 集成方案-文档中心-腾讯云
https://github.com/LiteAVSDK/TRTC_Flutter/tree/master/TRTC-Simple-Demo
-
下载完成后打开,进行执行一下get获取包加载一下嘛。
-
然后运行,会报错,这里会有一些注意的地方,会提示RaisedButton组件不存在,这个的原因是被弃用了,因为我的是最新的flutter,所以这里大家就手动更改一下ElevatedButton组件就好
demo运行会遇到一些弃用组件
前面组件为过期组件,后面为新的,基础属性需要用新组建属性
RaisedButton > ElevatedButton
FlatButton > TextButton
替换例子
这里,我们可以看到替换后的结果是正常的,为了简单方便,他的padding与color就直接删除了。
配置秘钥与自己的应用ID
lib\debug\GenerateTestUserSig.dart
运行结果:这里展示的是屏幕分享功能
浏览器下半部分,会显示,你分享的内容,并且会提醒你,该网站正在被分享。
TRTC流程
那么很显然,从生命周期的角度上来讲,我们从加入房间,到退出房间可以为本地音视频通话的一个生命周期,接下来,按照生命周期步骤,一步步来说。
加入房间,很显然,这是一切的开始,音视频即时通讯,都会有一个房间,通过这个房间,TRTC云服务才能知道,接收到的某个人的音视频信息要发给哪些人。一个小的团体,或者是两个人,或者是多个人,互相之间进行沟通,这就是房间的概念。
发布文件流,加入房间之后,我们需要给房间内的其他人发送本地音视频数据流给到云服务,然后再由云服务经过处理后转发到房间内的其他用户。
订阅远程流,这时候,其他的用户需要有一个订阅的处理,利用SDK接收云服务器端,别的用户发送过来经过处理的音视频,然后展现和播放。(官方建议在进入房间之前订阅,避免时间差导致没有接收到关键进房信息)
在通讯过程中,可以取消发布本地数据流,可用于取消后重新发布别的本地数据流,达到切换效果,但是不会影响订阅流。
退出房间,生命周期结束,SDK会自动取消订阅远程流和取消发布本地流(但是官方建议先取消发布本地流【unpublish】)。
至此,每个客户端都走一遍这样的流程,一个完整的音视频通话的过程到这儿就全部结束了。
总结
对接起来没有难度,公司下一个项目应该会体验一下TRTC的语音,这次没有体验到,如果有其他小伙伴要试验的,也欢迎分享一下。
上面写的如果大家按照以上步骤是可以体验到的,需要改的地方上述图也帮大家截了一下。
本次演示的内容API为:
enterRoom // 加入房间
exitRoom // 退出房间
startScreenCapture // 开始屏幕分享
stopScreenCapture // 停止屏幕分享