微信小程序使用TRTC

2021-03-10 17:47:54 浏览数 (1)

在使用之前我们需要了解 <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

0 人点赞