用户使用小鱼WebRTC SDK时,期望能够轮询播放特定参会者的画面。为实现这一目标,可以利用会控的轮询多画面设置功能,通过对WebRTC SDK端进行画面控制。
会议主持人通过会控对单个或多个终端设置轮询后,终端按照指定的布局、轮询时间、轮询对象、轮询过滤条件进行轮询画面切换。主持人可为每个轮询子画面选择独立的显示模式:语音激励、自动轮询或指定成员。轮询过程中,各子画面按指定内容显示。
1、兼容:v3.9.8+
2、WebRTC SDK最高支持9画面布局
3、移动端暂时不支持轮询多画面设置
4、v3.9.10+ 轮询多画面支持画面重复渲染
通过小鱼WebRTC SDK加入会议,有两种方式可以进行轮询多画面设置,分别是会控页面、Server API;
一、会控方式
通过企业管理平台/小鱼客户端/WebRTC SDK等方式都可以获取到标准会控或者专业会控地址,打开会控界面,可以针对Web参会终端进行轮询多画面的设置;
打开轮询设置后,可以设置指定的布局、轮询时间、轮询对象、轮询过滤条件等进行轮询画面配置,点击开始后,即可针对设定的端进行轮询多画面控制:
设置完成后,对应的Web端将按照会控的指令进行多画面显示,如果配置了自动轮询画面,则会按照指定的轮询间隔时间自动显示所有人的画面:
二、Server API方式
在你的项目中,可以调用终端轮询API进行轮询多画面的设置,具体参考对应API文档;
通过上文设置了轮询多画面后,如果你在项目中集成了WebRTC SDK,那么需要进行简单的开发即可实现轮询多画面的显示;
一、切换到自动布局
由于轮询多画面功能实现较为复杂,SDK针对自动布局进行了多画面的数据加工处理,以方便集成者快速可以响应轮询多画面,开发者需要切换至自动布局:
XYRTC.createClient({
layout: 'AUTO';
//...
});
二、监听layout事件
XYRTCClient.on('layout', (e: ILayout[]) => {
setLayout(e);
});
三、修改Video播放组件
通过第二步获取到Layout列表数据后,可以沿用之前的Video组件进行画面渲染,但在此基础上,layout的数据结构增加了三个字段:pollingId、pollingState、pollingName,开发者需要简单调整Video组件的逻辑,适配新增的三个字段:
当进行轮询多画面时,存在一定的布局优先级,例如当接收到远端Content时,轮询多画面会暂时被取消,显示Content布局,如果Content结束,则继续显示多画面;
整体的优先级顺序如下:
锁定画面(ForceLayout) > 点名/督导模式 > 收发Content模式 > 发言模式/对话模式 > 多画面/轮询 > 点名广播 > 焦点画面 > 主会场 > 正常视图
监听会控消息,包含了会控轮询多画面元数据,当使用自定义布局时,用户也可以自行实现轮询多画面功能
XYRTCClient.on('meeting-control', (e: IMeetingControl) => {});
回调参数:IMeetingControl
监听布局结果数据
XYRTCClient.on('layout', (e: ILayout[]) => {});
回调参数:ILayout
监听轮询多画面是否正在运行中,注意此处的状态是合并之后的状态,当轮询被会控暂停、正在运行时会推送isPolling是true的状态,当被高优先级布局模型临时取消、会控结束时,会推送isPolling是false状态;
XYRTCClient.on('layout-state', (e: LayoutState) => {});
回调参数:LayoutState