微信小程序TRTC使用custom自定义面板(理解篇)

2021-03-15 17:49:17 浏览数 (2)

登录腾讯云官网,官网给出了小程序TRTC的Demo分别实现了语音聊天室、双人视频通话、多人视频通话,小程序TRTC提供了custom自定义面板开发者们可以自行设计页面内容和样式,接下来我们就使用custom自定义面板实现一下直播互动功能。

参数说明

首先观察组件文件中的trtc-room.wxml文件,可以看到传入 1v1 和 grid 面板的参数都有pusher、streamList、debug、enableIM,顾名思义可以想到pusher是需要推流的对象,streamList是流对象列表,debug是调试面板,enableIM是实时通讯是否支持。

pusher

由于 <trtc-room> 是基于 <live-pusher> 和 <live-player> 实现的,所以 pusher 中的属性不仅包含了 <live-pusher> 的属性,在 /trtc-room/common/constants.js 文件中也有说明(‘DEFAULT_PUSHER_CONFIG’),还包含了在调用 <trtc-room> 传入的配置属性;pusher 中的方法是通过 getPusherContext() 返回一个 LivePusherContext 对象 (<live-pusher>上下文对象),通过该对象操作<live-pusher>。

streamList

用于渲染 player 列表,存储 Stram ,streamList 中 Stream 的属性不仅包含了 <live-player>的属性,在 /trtc-room/common/constants.js 文件中也有说明(‘DEFAULT_PLAYER_CONFIG’),其中还包含了一些其他的属性可以在/trtc-room/model/stream.js 中有说明:

Stream 的属性Stream 的属性

Stream 与 pusher 不同,它有单独的属性 playerContext 用来保存 LivePlayerContext对象(<live-player>上下文对象),通过该对象操作对应的<live-player>,TRTC为小程序自动封装了监听方法,在远端流增加时会创建并渲染 <live-player> 到页面然后完善stream中的属性。

以上两个参数是比较重要的参数,还有一些组件内置的函数可以用在自定义面板中,除了官方文档中的组件方法外在编写 custom 面板中还可以用到的方法:

_setPuserProperty() &_setPlayerProperty()

_setPuserProperty() 设置pusher的属性,可以设置 pusher 一些有固定值的属性,只能在两个值之间切换,比如 boolean 类型的属性有 enableAns(是否开启ANS)、enableAgc(是否开启AGC),number类型的属性有 beautyLevel(美颜级数),string类型但是值有限的属性有 videoOrientation(切换横竖屏推流)等;同理 _setPlayerProperty() 设置 Stream 的属性。使用方法,根据需求直接在对应的标签内添加点击事件:

设置美颜开关设置美颜开关

_toggleAudio() &_toggleVideo()

_toggleAudio()麦克风开关,可以根据 pusher.enableMic 查看是否开启麦克风,其实该方法是直接操作音频流的推送状态,关闭麦克风则停止推送本地音频流,打开麦克风则是开始推送本地音频流;同理 _toggleVideo() 摄像头开关,可以根据 pusher.enableCamera 判断摄像头开启情况。使用方法,根据需求直接在对应的标签内添加点击事件:

麦克风开关麦克风开关

_toggleSoundMode()

在双人聊天时可以使用该方法,用来切换音频输出设备(听筒/扬声器),操作的是 player 的属性。使用方法,根据需求直接在对应的标签内添加点击事件:

切换声音输出设备 听筒/扬声器切换声音输出设备 听筒/扬声器

_handleSubscribeRemoteAudio()&_handleSubscribeRemoteVideo()

是否订阅远端的音/视频流,可以实现屏蔽对方的视频或者音频的效果的开关来使用,使用方法,根据需求直接在对应的标签内添加点击事件:(其中 itemstreamList 的元素)

屏蔽流开关屏蔽流开关

_toggleFullscreen()

全屏播放的开关,整合了文档中的 enterFullscreen(params) 和 exitFullscreen(params) 方法,可通过组件实例的 _isFullscreen 属性判断是否有开启全屏模式。使用方法,根据需求直接在对应的标签内添加点击事件:(其中 itemstreamList 的元素)

指定视频全屏播放指定视频全屏播放

_hangUp()

退出通话返回上一级页面,其实直接就是 exitRoom() 离开房间加上返回上一级页面动作的整合,使用方法,根据需求直接在对应的标签内添加点击事件:

点击退出聊天点击退出聊天

编写自定义面板 custom 里面的内容可以参考 1v1 面板和 grid 面板,1v1 和 grid 面板也可以更具自己的需求改动,文件位置在:

组件目录结构组件目录结构

0 人点赞