在使用之前我们需要了解 <live-player> 和 <live-pusher> 微信小程序原生组件,因为小程序TRTC组件标签 <trtc-room> 是基于这两个标签实现的组件,所以在运行调试时开发工具是不支持的,只能在真机上运行。
出于政策和合规的考虑,微信暂未放开所有小程序对实时音视频功能(即 <live-pusher> 和 <live-player> 标签)的支持,所以在开发过程中确保开通了以下两个接口:
否则在运行时会报渲染错误:
了解更多
集成小程序TRTC
下载官网提供的小程序Demo,解压后找到 WXMiniTRTCSimpleDemocomponents 路径下的 trtc-room 的文件夹,此文件夹就是 <trtc-room> 组件,将其复制到自己项目中的自定义组件文件夹中。
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 组件样式文件 |
在需要引入的页面中的 json 文件中引入组件,或者直接引入到项目根目录下的app.json中
代码语言:json复制"usingComponents": {
"trtc-room": "/components/trtc-room/trtc-room"
}
在需要引入的页面中的 wxml 文件中直接使用组件 <trtc-room>
代码语言:html复制<trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>
<trtc-room>只有一个属性config,通过这个属性可以传入以下参数:
代码语言:javascript复制trtcConfig: {
scene: '', // 通话场景'trc' 'live'
sdkAppID: '', // 注册腾讯云账号写入自己的SDKAppID
userID: '', // 用户ID
userSig: '', // 身份签名,可以参考文章 https://cloud.tencent.com/developer/article/1796612 中最后的说明
template: '', // 画面排版'1v1' 'grid' 'custom',1v1一般用于双人通话,grid适用于多人,custom是自定义面板
enableCamera: false, // 是否开启摄像头
enableMic: true, // 是否开启麦克风
enableAgc: false, // 是否开启音频自动增益
enableAns: false, // 是否开启音频噪声抑制
enableEarMonitor: false, // 是否开启耳返(ios)
enableAutoFocus: true, // 是否开启摄像头自动对焦
enableZoom: false, // 是否支持双手滑动调整摄像头焦距
minBitrate: '200', // 最小码率,不建议设置太低
maxBitrate: '1000', // 最大码率,需要跟分辨率相匹配,建议参考 分辨率码率参照表。
videoWidth: '360', // 视频宽,若设置视频宽高,会忽略 aspect
videoHeight: '640', // 视频高,若设置视频宽高,会忽略 aspec
beautyLevel: 0, // 美颜,取值范围 0-9,0表示关闭
whitenessLevel: 0, // 美白,取值范围 0-9,0表示关闭。
videoOrientation: 'vertical', // 设置本地画面方向,可选值:vertical 或 horizontal。
videoAspect: '9:16', // 宽高比,可选值:3:4 或 9:16。
frontCamera: 'front', // 设置前置还是后置摄像头,可选值:front 或 back。
enableRemoteMirror: false, // 是否设置观众端看到的画面的镜像效果
localMirror: 'auto', // 设置主播本地摄像头预览画面的镜像效果
enableBackgroundMute: false, // 是否设置主播端小程序切入后台时是否暂停声音的采集
audioQuality: 'high', // 高音质(48KHz)或低音质(16KHz),可选值:high 或 low。
audioVolumeType: 'voicecall', // 系统音量类型'media' 'voicecall'
audioReverbType: 0, // 音频混响类型,可选值为: 0:关闭,1:KTV,2:小房间,3:大会堂,4:低沉,5:洪亮,6:金属声,7:磁性。
enableIM: false, // 是否启用即时通信功能
debugMode: false, // 是否打开组件的调试模式
},
以上的设置完成后可以调用 enterRoom({roomID:xxx}) 方法进入房间即可:
代码语言:javascript复制let trtcRoomContext = this.selectComponent('#trtcroom') // 通过id属性选中<trtc-room>组件
trtcRoomContext.enterRoom({roomID: parseInt(this.data.roomID)})
了解更多关于小程序TRTC的API可以查看:https://cloud.tencent.com/document/product/647/17018