腾讯视频云trtc-room小程序组件使用

< trtc-room >是目前腾讯推出的多端实时音视频的处理方案，官方地址介绍。这里记录一下个人使用这个组件的一些经验。

用上TRTC后，各端互通，甚至可以用小程序，在QQ和微信互通，在网页端，pc端都有很好的支持（Electron也有，前端福音）。加上TIM的即时通信能力，直接可以搭建一个企业级的直播应用，如果加上腾讯白板，直接变成会议小帮手，教学大杀器，业务场景完全可以在实时音视频业务之上自由组合。

获取代码

可以在github上下载最新的代码，也可以直接在官网上下载代码包，这里贴上两个地址

github

腾讯云官网

代码clone下来或者是解压完成后，会看到trtc-room的一个组件的代码包，如果只是想快速接入一下的话，可以直接跑通官网的demo，这里注意要开放live-pusher和live-player的权限，小程序官方对这两个组件是需要单独授权的。

代码介绍

pages

• index 三个场景入口的索引页
• meeting 多人会议设置页面
• room 多人会议页面
• videocall 双人通话
• voice-room 语音房

以上是腾讯官网小程序的图片，demo有三个场景，语音房，双人通话，多人会议，这里会议场景下，可以设置的地方还是比较多的，live-pusher和live-player里面还有很多其他的属性可以设置。
这里提一下，组件内的页面跳转统一使用navigateTo，如果使用redirectTo进行页面跳转的，安卓的返回键，可能造成小程序挂起的假现象，这里页面的回收时间依赖于微信小程序的内存回收机制，不建议有live-pusher或live-player的页面放在页面栈顶。另外，对于小程序挂起的问题，微信已经在推出官方的解决方案，大家可以随时关注最新的动态。

组件trtc-room

• common 里面是组件提供给外部的事件，包括本地和远端的默认状态等等，这里面都会有比较详细的注释
• user-controller 这里是通讯成员管理模块，里面是远端成员（下行流）管理的模块，里面会对微信抛出的事件进行处理。这里简单介绍一下有哪些事件，1031 远端成员进房的通知， 1032 远端成员退房的通知， 1033 远端用户视频状态位变更的通知（关闭/开闭）， 1034 远端用户音频状态位变更的通知。
• model 里面定义了本地流（pusher），远端流（stream），和用户（user）的基本数据结构，一个user可能是有两条stream的，因为pc端或web端开启屏幕分享后是会共享相同的userId的
• template 里面包含了三个模板，分别是1v1，custom，grid，可以根据自己的类型选取，custom是可以直接通过API的调用来设置显示位置，我感觉还是不太符合前端的开发习惯，1v1通话模式，和grid的会议模式还是可以直接修改使用的。

组件使用

我们把这个过程想象成一个上网的过程。

1. 第一步先要找网管搞个账号才能开机。就是把注册好账号的SDKAppid和SECRETKEY填一下。

this.setData({
 trtcConfig:{
     sdkAppID: '1401000123',  // 开通实时音视频服务创建应用后分配的 SDKAppID
     userID: 'test_user_001', // 用户 ID，可以由您的帐号系统指定
     userSig: 'xxxxxxxxxxxx', // 身份签名，相当于登录密码的作用
     template: 'grid',        // 画面排版模式
 }
}
1
2
3
4
5
6
7
8

2. 要打游戏了，拉上几个哥们（憨憨）进个房。
   进房前肯定要看看自己麦和摄像头行不行啊，边进边看那些人有没有进来，鸽王总是令人捉摸不透（先监听一下远端事件，别一下那些人就跑没影了），准备工作做好了，进房！

     // 发布本地音频流和视频流
     trtcRoomContext.publishLocalVideo()
     trtcRoomContext.publishLocalAudio()

     // 监听远端用户的视频流的变更事件
     trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, (event)=>{
         // 订阅（即播放）远端用户的视频流
         let userID = event.data.userID
         let streamType = event.data.streamType// 'main' or 'aux'            
         trtcRoomContext.subscribeRemoteVideo({userID: userID, streamType: streamType})
     })

     // 监听远端用户的音频流的变更事件
     trtcRoomContext.on(EVENT.REMOTE_AUDIO_ADD, (event)=>{
         // 订阅（即播放）远端用户的音频流
         let userID = event.data.userID
         trtcRoomContext.subscribeRemoteAudio(userID)
     })

     // 进入房间
     trtcRoomContext.enterRoom({roomID: 1002}).catch((res)=>{
         console.error('room joinRoom 进房失败:', res)
     })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

进去了，不行，有些人一言不合就要开团，为了世界和平我要禁了他

unsubscribeRemoteVideo(params)
unsubscribeRemoteAudio(params)
1
2

女朋友打电话来了，先把自己的麦关一下

unpublishLocalVideo()
unpublishLocalAudio()
1
2

不行，搞不定女朋友了，为了生命安全，我决定

exitRoom()
1

更多API

总结

讲讲自己的体验，组件中云服务是以Faas的形式提供的，比较符合现在serverless的发展潮流，而且electron端也是有非常好的支持，跨平台能力没的说。小程序里面不可否认确实有些坑，但是腾讯的客服还是可以的，晚上也有人，话说这也三班倒吗。。微信小程序里面的支持，腾讯云的产品能算的上同行中最行的了，别人行好像也不太行。要不是现在人不喜欢下APP，我也不会跪着写小程序了，算了，微信真香。