快速集成(小程序)

最近更新时间:2020-05-18 17:37:02

本文主要介绍如何快速地将腾讯云 <trtc-room> 小程序组件集成到您的项目中,只要按照如下步骤进行配置,即可完成组件的集成工作。

准备工作

在集成小程序 SDK 前,请确保您已完成以下步骤,具体操作请参见 跑通Demo(小程序)

  • 创建了腾讯云实时音视频应用,购买了相应的套餐,并获取到 SDKAppID 和密钥信息。
  • 开通小程序类目与推拉流标签权限。
  • 小程序服务器域名配置。

环境要求

  • 微信 App iOS 最低版本要求:7.0.9
  • 微信 App Android 最低版本要求:7.0.8
  • 小程序基础库最低版本要求:2.10.0
  • 由于微信开发者工具不支持原生组件(即 <live-pusher> 和 <live-player> 标签),需要在真机上进行运行体验。

下载组件源码

您可以直接从 Github 下载 SDK 源码压缩包,也可以通过 git clone 下载源码:

$ cd YOUR_PATH
$ git clone https://github.com/tencentyun/TRTCSDK.git
说明:

如果您访问 Github 较慢,可以选择腾讯云镜像 压缩包

<trtc-room>组件的文件结构如下:

目录 说明
common 常量存储空间,包括事件常量,本地和远端的默认配置信息
controller 成员管理模块
model pusher,stream,user 的抽象对象模型
template 组件提供的模板样式,包括1v1,grid,custom
utils 功能函数
trtc-room.js trtc-room 组件主程序文件
trtc-room.json trtc-room 组件声明文件
trtc-room.wxml trtc-room 组件模版文件
trtc-room.wxss trtc-room 组件样式文件

集成组件

  1. 在需要引入组件的页面目录下,配置相应页面的 xxx.json 文件。

    // index.json
    "usingComponents": {
    "trtc-room": "/components/trtc-room/trtc-room"
    }
  2. 在相应页面的 xxx.wxml 文件中使用标签。

    // index.wxml
    <trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>
  3. 确认 trtcConfig 属性中必填的配置参数。

    KEY 示例 作用 获取方案
    sdkAppID 1401000123 用于计费和业务区分 实时音视频控制台 获取
    userID xiaoming 用户名 可以由您的服务器指定,或者使用小程序的 openid
    userSig 加密字符串 相当于 userID 对应的登录密码 由您的服务器 计算 UserSig
    template custom 指定 <trtc-room> 的模版 支持1v1,grid,custom
  4. 在 xxx.js 文件中添加如下代码,完成最基本的业务逻辑。实现进入某个指定的音视频房间,发布自己的音频和视频,并订阅远端用户的音频和视频。

    // index.js
    this.setData({
     trtcConfig:{
         sdkAppID: '1401000123',  // 开通实时音视频服务创建应用后分配的 SDKAppID
         userID: 'test_user_001', // 用户 ID,可以由您的帐号系统指定
         userSig: 'xxxxxxxxxxxx', // 身份签名,相当于登录密码的作用
         template: 'grid',        // 画面排版模式
     }
    },()=>{
     let trtcRoomContext = this.selectComponent('#trtcroom')
     let EVENT = trtcRoomContext.EVENT
    
     if(trtcRoomContext) {
         trtcRoomContext.on(EVENT.LOCAL_JOIN, (event)=>{
             // 进房成功后发布本地音频流和视频流 
             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: userID})
         })
    
         // 进入房间
         trtcRoomContext.enterRoom({roomID: 1002}).catch((res)=>{
             console.error('room joinRoom 进房失败:', res)
         })
     }
    })

常见问题

1. 运行出错如何排查?

  • 请检查开通的小程序类目是否正确,推拉流标签在小程序控制台是否开启。
  • 如果使用官方 Demo 运行正常,请参考本文重新部署一遍。
  • 若仍无法正常运行,可以 提交工单联系我们

2. 运行小程序进入多人音视频看不到画面?

  • 请使用手机真机运行,微信开发者工具内部的模拟器目前不支持直接运行。
  • 请确认小程序基础库版本,wx.getSystemInfo 可查询该信息,2.10.0 以上的基础库才支持 TRTC。
  • 请确认小程序所属的类目,由于监管要求,并非所有类目的小程序都开放了音视频能力,已支持的类目请参考 微信小程序官方文档
  • 如有更多需求或希望深度合作,可以 提交工单联系我们

3. live-pusher、live-player标签使用及错误码参考

4. 如果需要上线或者部署正式环境怎么办?

  • 请申请域名并做备案。
  • 请将服务端代码部署到申请的服务器上。
  • 请将推流域名及 IM 域名配置到小程序控制台 request 合法域名里面:
    域名 说明
    https://cloud.tencent.com 推流域名
    https://webim.tim.qq.com IM 业务域名
    https://yun.tim.qq.com IM 业务域名
    https://pingtas.qq.com IM 业务域名

5.使用组件内置模板不符合预期是什么原因?

目前我们的组件仅支持在同层模式下使用(微信已全量支持同层模式),如果使用不符合预期,请您检查 app.json 下是否有"renderingMode": "seperated"配置,此配置会强制开启非同层模式,导致内置模板样式失效。

目录