Electron SDK提供两种会议布局方式,即自动布局和自定义布局,方便开发者更方便自由的选择布局方式。
自动布局,即SDK按照提前定义好的布局模型,自动计算参会者的布局数据和位置。开发者无需做过多的计算,即可快速完成会议视频功能的开发;
从Electron SDK@1.0.0版本开始,自动布局的布局模型得到了很大的增强,支持了翻页查看更多画面,也支持了更多的布局模型,详细的有:
详细布局模型如图所示:
通过回调消息 VideoStreams 向外提供 List 数据内容,开发者直接渲染数据即可显示布局和画面。
自定义布局模式,SDK会上报每个参会者的数据,业务上自行决定每个画面的位置和大小;
自定义布局 此布局模式会上报会议相关的数据,第三方自行处理会议数据进行自定义布局计算,设置参会者的位置、设置画面视频分辨率、质量等;
在通过 getXYInstance
创建客户端时,可以配置 model
字段为 auto,即开启自动布局模式
在通过 getXYInstance
创建客户端时,可以配置 offset
字段,用来配置自动布局 Layout 容器信息,可选配置:
监听 ScreenInfo
回调事件,会实时返回 Layout 显示容器的大小,支持屏幕 resize 变化。 CUSTOM 布局不需要监听此数据。
// AUTO模式回调数据,推送最新的Layout容器大小信息
xyRTC.on("ScreenInfo", (e: IScreenInfo) => {
console.log("demo get screen info: ", e);
// 更新到显示画面的容器上,再次容器的基础上,展示 Layout 布局画面
// 此处使用 React Hook语法,具体参考 示例程序Demo
setScreenInfo(e);
});
type IScreenInfo = {
layoutWidth: number;
layoutHeight: number;
}
监听 VideoStreams
回调事件,实时返回参会者布局数据。返回的 list 数据直接渲染即可。 CUSTOM 布局不需要监听此数据。
// AUTO 布局回调layout数据,使用此数据直接渲染画面即可
xyRTC.on("VideoStreams", (e: ILayout[]) => {
console.log("demo get layout map: ", e);
// 更新数据,渲染画面
setLayout(e);
});
如果需要进行自定义布局,处理流程如下:
在通过 getXYInstance
创建客户端时,可以配置 model
字段为 custom,即开启自定义布局模式
监听 ConfInfoChanged
回调事件。开发者使用此列表数据计算一组 reqList,请求每个人的分辨率、质量画面数据,调用requestLayout()发起请流请求,等待回应布局结果数据:
// 接收到 ConfInfoChanged 数据后,需要基于此参会者人员数据计算想要请求的参会成员画面
// 调用 xyRTC.requestLayout 请求后,会回调 VideoStreams 数据,然后基于此数据处理计算每个人的位置,大小信息
xyRTC.on("ConfInfoChanged", (e: IConfInfo) => {
let { participantCount, contentPartCount, chairManUrl = "" } = e;
const reqList = [];
// 存在主会场,那么需要指定callUri字段
// 如果有content,那么content会上大屏,分辨率请高一些
// 如果无content,那么content可以请高分辨率的
if (chairManUrl) {
reqList.push({
isContent: false,
callUri: chairManUrl,
resolution: contentPartCount ? 2 : 3,
quality: 1,
});
participantCount -= 1;
}
for (let i = 0; i < participantCount; i++) {
const reqObj = {
isContent,
callUri: "",
// content内容请求1080分辨率画面,其他画面请求 360P 画面
// 此处可以根据自己的业务自控制每个人的分辨率数据,例如大屏画面可以请求高分辨画面,缩略图画面请求低分辨率画面
resolution: contentPartCount > 0 ? 4 : 2,
quality: 1,
};
}
xyRTC.requestLayout(reqList, maxSize, currentPage);
});
再请求 requestLayout() 完成后,会触发 VideoStreams
回调,此列表数据是最终请求的布局结果数据,开发者可以使用此列表数据再去计算每个人的位置、大小等信息,然后渲染此列表数据即可。
// CUSTOM 自定义布局,通过 VideoStreams 回调布局结果数据
// 第一步:根据【ConfInfoChanged】回调消息的参会者人员数量请求对应参会人员的画面数据
// 第二步:在【VideoStreams】回调消息里面,获取请求的参会人最新的布局列表数据
// 第三步:基于最新的布局列表数据,计算 position/size 等信息,计算完成后,直接渲染即可
xyRTC.on("VideoStreams", (e: any) => {
// 每次推送都会携带local数据,如果分页不需要展示,则移除local数据
if (cachePageInfo.current.currentPage !== 0) {
const localIndex = e.findIndex(
(item) => item.sourceId === "LocalPreviewID"
);
if (localIndex >= 0) {
e.splice(localIndex, 1);
}
}
const nextTemplateRate = TEMPLATE.GALLERY.rate[e.length] || 0.5625;
// 此处无id是container的容器,则使用document.body的size计算screen
cacheScreenInfo.current = getScreenInfo("container", nextTemplateRate, [
92,
0,
]);
// 计算初始layoutList数据
// 包含计算每个参会成员的大小,位置,详见 sdk demo 程序
const nextLayout = calculateBaseLayoutList(e);
console.log("nextLayout:", nextLayout);
// 处理完数据,执行渲染即可
setLayout(nextLayout);
});
在第三步生成了layout数据后,直接通过框架(React/Vue等)渲染数据即可,此处建议使用SDK提供的Video组件进行渲染画面,方便快速集成。具体内容参见SDK Demo项目;