【玩转腾讯云】<trtc-room>小程序组件使用

2021-04-14 20:09:41 浏览数 (1)

< 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填一下。

2、填写相应的数据之后进房

代码语言:javascript复制
this.setData({
 trtcConfig:{
     sdkAppID: '1401000123',  // 开通实时音视频服务创建应用后分配的 SDKAppID
     userID: 'test_user_001', // 用户 ID,可以由您的帐号系统指定
     userSig: 'xxxxxxxxxxxx', // 身份签名,相当于登录密码的作用
     template: 'grid',        // 画面排版模式
 }
}
代码语言:javascript复制
     // 发布本地音频流和视频流
     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)
     })

3、禁用远端音视频流

代码语言:javascript复制
unsubscribeRemoteVideo(params)
unsubscribeRemoteAudio(params)

4、关闭本地音视频

代码语言:javascript复制
unpublishLocalVideo()
unpublishLocalAudio()

5、退房

代码语言:javascript复制
exitRoom()

更多API

0 人点赞