前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序使用TRTC

微信小程序使用TRTC

原创
作者头像
yuliang
修改2021-03-10 17:47:54
2.8K0
修改2021-03-10 17:47:54
举报
文章被收录于专栏:TRTC Web SDK

在使用之前我们需要了解 <live-player><live-pusher> 微信小程序原生组件,因为小程序TRTC组件标签 <trtc-room> 是基于这两个标签实现的组件,所以在运行调试时开发工具是不支持的,只能在真机上运行。

出于政策和合规的考虑,微信暂未放开所有小程序对实时音视频功能(即 <live-pusher> 和 <live-player> 标签)的支持,所以在开发过程中确保开通了以下两个接口:

否则在运行时会报渲染错误:

未开通接口报错
未开通接口报错

了解更多

集成小程序TRTC

下载官网提供的小程序Demo,解压后找到 WXMini\TRTCSimpleDemo\components 路径下的 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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 集成小程序TRTC
相关产品与服务
实时音视频
实时音视频(Tencent RTC)基于腾讯21年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档