本文主要介绍如何快速地将腾讯云 <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 组件样式文件 |
集成组件
- 在需要引入组件的页面目录下，配置相应页面的 xxx.json 文件。
// index.json "usingComponents": { "trtc-room": "/components/trtc-room/trtc-room" }
- 在相应页面的 xxx.wxml 文件中使用标签。
// index.wxml <trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>
确认 trtcConfig 属性中必填的配置参数。
KEY 示例 作用 获取方案 sdkAppID 1401000123 用于计费和业务区分 在 实时音视频控制台 获取 userID xiaoming 用户名 可以由您的服务器指定，或者使用小程序的 openid userSig 加密字符串 相当于 userID 对应的登录密码 由您的服务器 计算 UserSig template custom 指定 <trtc-room> 的模版 支持1v1，grid，custom 在 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标签使用及错误码参考
- live-pusher&错误码
- live-player&错误码
- livePusherContext
- livePlayerContext
4. 如果需要上线或者部署正式环境怎么办？
- 请申请域名并做备案。
- 请将服务端代码部署到申请的服务器上。
- 请将推流域名及 IM 域名配置到小程序控制台 request 合法域名里面：
域名 说明 https://cloud.tencent.com推流域名 https://webim.tim.qq.comIM 业务域名 https://yun.tim.qq.comIM 业务域名 https://pingtas.qq.comIM 业务域名
5.使用组件内置模板不符合预期是什么原因？
目前我们的组件仅支持在同层模式下使用（微信已全量支持同层模式），如果使用不符合预期，请您检查 app.json 下是否有"renderingMode": "seperated"配置，此配置会强制开启非同层模式，导致内置模板样式失效。
相关文章
精彩导读
热门资讯