Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序使用TRTC

微信小程序使用TRTC

原创
作者头像
yuliang
修改于 2021-03-10 09:47:54
修改于 2021-03-10 09:47:54
3K00
代码可运行
举报
文章被收录于专栏:TRTC Web SDKTRTC Web SDK
运行总次数:0
代码可运行

在使用之前我们需要了解 <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
AI代码解释
复制
"usingComponents": {
"trtc-room": "/components/trtc-room/trtc-room"
}

在需要引入的页面中的 wxml 文件中直接使用组件 <trtc-room>

代码语言:html
AI代码解释
复制
<trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>

<trtc-room>只有一个属性config,通过这个属性可以传入以下参数:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序TRTC使用custom自定义面板(实现篇)
本文主要是使用 custom 面板实现直播互动,上下麦操作。如有疑问可参考 微信小程序TRTC使用custom自定义面板(理解篇)。本文只是简单演示如何实现主播与观众进行连麦互动,在实际中,通常是有主播端发起与粉丝进行直播互动,通过粉丝来接受,进行连麦。发送这种消息可以使用IM(即时通讯)完成。
yuliang
2021/03/16
1.4K0
实时音视频开发学习10 - 小程序端一
小程序端双人通话、多人会议和语音聊天室三个功能。双人通话中实现1V1视频通话,在结合Web IM SDK可实现在线问诊或客服;语音聊天室能支持多人互动语音聊天,混音、混响等声音特效,适用于狼人杀、在线语音直播等社交场景;多人会议支持多路音视频通话、大小画面和屏幕分享等功能,适用于远程培训、在线教育等。
金林学音视频
2020/08/27
1.4K0
实时音视频开发学习10 - 小程序端一
从零开始创建一个超简单的TRTC音视频通讯程序(小程序篇)
出于政策和合规的考虑,微信暂未放开所有小程序对实时音视频功能(即 <live-pusher> 和 <live-player> 标签)的支持:
F颜
2020/06/18
2.1K0
打通小程序音视频和webRTC
2017年腾讯视频云团队跟微信团队联合,将视频云 SDK 跟微信小程序整合在一起,并开放内部功能。
腾讯视频云终端团队
2018/05/03
19.4K14
打通小程序音视频和webRTC
微信小程序TRTC使用custom自定义面板(理解篇)
登录腾讯云官网,官网给出了小程序TRTC的Demo分别实现了语音聊天室、双人视频通话、多人视频通话,小程序TRTC提供了custom自定义面板开发者们可以自行设计页面内容和样式,接下来我们就使用custom自定义面板实现一下直播互动功能。
yuliang
2021/03/15
1.6K0
腾讯云实时音视频客户端实现A+B->A和A+B->C混流方式
上一篇文章介绍了腾讯云实时音视频的两种混流方式分别是A+B->A和A+B->C,本文重点介绍,客户端如何实现这两种混流的方式,代码附上
singleli
2022/11/28
1.5K0
【玩转腾讯云】<trtc-room>小程序组件使用
< trtc-room >是目前腾讯推出的多端实时音视频的处理方案,官方地址介绍。这里记录一下个人使用这个组件的一些经验。 用上TRTC后,各端互通,甚至可以用小程序,在QQ和微信互通,在网页端,pc端都有很好的支持(Electron也有,前端福音)。加上TIM的即时通信能力,直接可以搭建一个企业级的直播应用,如果加上腾讯白板,直接变成会议小帮手,教学大杀器,业务场景完全可以在实时音视频业务之上自由组合。
sskingss
2021/04/14
10.3K0
实时音视频 TRTC 常见问题汇总---小程序篇
如有更多需求,或希望深度合作,可以 提交工单 或致电4009100100联系我们。
腾讯视频云-Zachary
2021/09/21
5.8K0
实时音视频 TRTC 常见问题汇总---小程序篇
实时音视频开发学习9 - 进房权限和画质
开启进房权限的目的是为了避免非会员模式能够进入高级房间,同时解决客户端限制被破解的问题。目前进房权限在iOS、Android、Windows、Electron、微信小程序和Chrome 浏览器都支持。
金林学音视频
2020/08/27
1.9K0
实时音视频开发学习9 - 进房权限和画质
iOS音视频接入 - TRTC多人视频会议
官方SDK中提供了可复用的UI和封装了TRTCCloud的model,具体位置见下图。
小明同学接音视频
2020/10/15
2.5K0
iOS音视频接入 - TRTC多人视频会议
实时音视频 TRTC 常见问题汇总---集成接入篇
TRTC 的日志默认压缩加密,后缀为 .xlog。日志是否加密是可以通过 setLogCompressEnabled 来控制,生成的文件名里面含 C(compressed) 的就是加密压缩的,含 R(raw) 的就是明文的。
腾讯视频云-Zachary
2019/11/01
14.4K1
实时音视频 TRTC 常见问题汇总---集成接入篇
TRTC Android端开发接入学习之常见问题(十一)
V1和V2主要区别在于IM的SDK是否内嵌于TRTC中,V1线路是内嵌,而V2则可选,默认不打包IM的SDK包。V2在通话质量、线路规格、接入难度以及功能扩展上均比V1更有优势。
腾讯云-hongyang
2020/09/27
3.1K0
实时音视频,小程序端WebRTC互通
我们在 LiteAVSDK 的最新版本里面加入了对 WebRTC 的支持能力,并且已经跟随微信APP的 6.6.6 版本发布出来,此文档主要介绍如何使用原生的 <live-pusher> 和 <live-player> 标签实现 WebRTC 互通能力。
腾讯云-chaoli
2019/05/24
11.3K0
实时音视频,小程序端WebRTC互通
实时音视频开发学习11 - 小程序端二
小程序实现过程就不按照web端一步步拆分代码,而是直接讲解业务内容。核心内容可以参考trtc—room相关的API,本章内容会讲述大部分内容。地址:
金林学音视频
2020/08/28
1.3K0
实时音视频开发学习11 - 小程序端二
实时音视频开发学习14 - 常见问题
V1和V2主要区别在于IM的SDK是否内嵌于TRTC中,V1线路是内嵌,而V2则可选,默认不打包IM的SDK包。V2在通话质量、线路规格、接入难度以及功能扩展上均比V1更有优势。
金林学音视频
2020/08/30
2.8K0
实时音视频开发学习14 - 常见问题
【实时音视频】live-pusher/live-player与trtc-wx入门介绍
第一次接触trtc小程序的同学和可能会对茫茫多的api接口产生疑惑,createPusher是做什么的,enterRoom又是干嘛,为什么我调用了之后没有用,硬件设备我又要怎么控制?
circleRich
2022/05/19
2.6K0
Android TRTC 推自定义采集的视频数据
如果开发者想在 TRTC 中集成第三方美颜库来实现美颜、滤镜等功能,第三方库的美颜功能输入数据格式支持有 camera 的原始数据(YUV 数据)、纹理数据(Textureid)。开发者想实现该功能,需要采用自定义采集视频数据接口,然后复用 LiteAVSDK 的编码和推流功能。
腾讯云-chaoli
2019/07/07
1.9K0
Android TRTC 推自定义采集的视频数据
实时音视频开发学习13 - 小程序端API
小程序端API分为基础方法、发布订阅方法、视图控制方法、背景音乐方法、消息收发和其它。针对trtc-room组件来说可以传递一个config属性来打开音视频通话。
金林学音视频
2020/08/30
1.3K0
实时音视频开发学习13 - 小程序端API
实时音视频SDK,如何实现类似微信的纯语音通话功能?
实时音视频TRTCSDK适用的业务场景是视频会议、坐席视频、在线教育等,如果您希望实现类似微信的语音通话、语音会议功能,TRTCSDK也是支持的,只需要微调几个参数就可以实现,将采集音视频的api,换成只采集音频。
腾讯云-chaoli
2019/03/05
8.1K2
实时音视频SDK,如何实现类似微信的纯语音通话功能?
微信小程序集成TRTC SDK,集成移动直播SDK
在集成小程序 SDK 前,请确保您已完成以下步骤,具体操作请参见跑通Demo(小程序)。
yuliang
2021/03/22
4.9K0
推荐阅读
相关推荐
微信小程序TRTC使用custom自定义面板(实现篇)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验