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

登录腾讯云官网，官网给出了小程序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 与 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()

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

屏蔽流开关

_toggleFullscreen()

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

指定视频全屏播放

_hangUp()

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

点击退出聊天

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

组件目录结构