设置合流布局

更新时间: 2021/05/27 01:12:37

在使用合流录制模式时,您需要设置合流布局,即房间内所有发流用户视窗的大小及其在视频画布上的位置,进行合流布局。

本地服务端录制支持两种合流布局的方式:

  • 自适应布局:目前本地服务端录制提供预设的自适应布局,将参数 VideoMixingLayout 中的 layout 字段设置为kNERtcLayoutGrid,即可实现预设的自适应布局效果。
  • 自定义合流布局:支持自定义设置用户画面的大小,指定用户画面在视频画布上的相对位置。

如果原视频的宽高比和布局中用户视窗的宽高比不一致,会进行裁剪或缩放。用户视窗的宽高比取决于合流布局方式和视频画布的长宽比。

自适应布局

屏幕共享场景下,不支持使用自适应布局。如果设置了自适应布局,会默认使用 Camera 主流视频填充自适应布局。

布局样式会根据房间人数自适应。每个用户视窗平铺在画布上,大小一致。

规则 说明
画面显示规则
  • 如果某房间成员只发送音频,仍然会占据布局,显示黑色。
  • 在下面不同人数的合流布局下,如果房间中人数不足,则剩余的布局位置会空着,显示背景色。
  • 如果有成员退出房间,系统会自动按照房间成员加入房间的顺序对用户画面进行重新排序。
布局规则
  • 当房间成员人数为 1 人时,用户画面会在画布中平铺显示。
  • 当房间成员人数为 2 人时,采用二分视频布局。
  • 当房间成员人数为 3~4 人时,采用四宫格视频布局。
  • 当房间成员人数为 5~9人时,采用九宫格视频布局。
  • 当房间成员人数为 10~16人时,采用十六宫格视频布局。
  • 当房间成员人数为17人时,前16人为4*4 排列模式,第五列最左侧显示第17人的用户画面。
画面自适应 如果实际视频流的宽高比与视窗的宽高比不一致,视频画面会被裁剪以适应视窗的大小。

示例图:

1 人 2 人 3~4 人
1人 2人 3~4人
5~9 人 10~16 人 17 人
5~9人 10~16人 17人

自定义合流布局

如果预设的布局样式无法满足您的场景需求,您可以通过 API 实现自定义合流布局,灵活设置用户画面的大小,指定用户画面在视频画布上的相对位置。

屏幕共享场景请使用自定义合流布局,并通过 setVideoMixingLayout: regions的substream设置为true 在画布中添加辅流画面的小视窗。

实现方法

在加入房间后,先通过 VideoMixingLayout 类设置合流布局的参数,然后调用 setVideoMixingLayout 实现自定义的合流布局。

设置视频合流布局时,需在 VideoMixingLayout 中传入以下参数:

参数 说明
backgroundColor 画布的背景颜色。可根据所需颜色填写对应的 6 位 RGB 值,如 "#000000"。
regionCount 房间内显示头像或视频的成员数量。
regions 房间内每位成员在画布上的画面,包含如下参数:
  • uid:该画面对应成员的 UID。
  • substream:该子窗口画面是否为辅流,默认为主流。
  • x:(必填)画布上该画面左上角的横坐标的相对值,浮点数,取值范围为 [0.0,1.0]。从左到右布局,0.0 在最左端,1.0 在最右端。
  • y:(必填)画布上该画面左上角的纵坐标的相对值,浮点数,取值范围为 [0.0,1.0]。从上到下布局,0.0 在最上端,1.0 在最下端。
  • width:(必填)该画面宽度的相对值,浮点数,取值范围为 [0.0,1.0]。
  • height:(必填)该画面高度的相对值,浮点数,取值范围为 [0.0,1.0]。
  • alpha:图像的透明度。浮点数,取值范围为 [0,1] 。0 表示图像透明,1 表示图像完全不透明的。
  • renderMode:画面显示模式。
    • kNERtcRenderModeHidden:适应视窗,优先保证视窗被填满。
    • kNERtcRenderModeFit:适应用户画面,优先保证视频内容全部显示。

设置自定义合流布局时,通过 x 和 y 指定画布坐标中的一个点,该点将作为用户图像的左上角。x 和 y 分别代表用户画面左上角到原点的水平相对距离和垂直相对距离。width 和 height 设置用户画面的相对宽度和相对高度,即用户画面的宽度和高度占画布的宽度和高度的比例。请确保 x + width ≤ 1,y + height ≤ 1。

示例代码

本节以设置 4 人画面的合流布局为例,并结合示例代码介绍如何设置自定义合流布局。 在示例中,第一个加入房间的用户在画布上显示为大视窗,铺满整个画布;其他三个用户显示为小视窗,悬浮在大视窗上面,效果如下图所示:

设置合流布局示例

cppnerecord::VideoMixingLayout layout;

nerecord::NERtcRegion regions[4];

regions[0].uid = <uid1>;
regions[0].x = 0;
regions[0].y = 0;
regions[0].width = 1;
regions[0].height = 1;
regions[0].alpha = 1;
regions[0].renderMode = nerecord::kNERtcRenderModeHidden; 

regions[1].uid = <uid2>;
regions[1].x = 0.01;
regions[1].y = 0.76;
regions[1].width = 0.23;
regions[1].height = 0.23;
regions[1].alpha = 1;
regions[1].renderMode = nerecord::kNERtcRenderModeHidden; 

regions[2].uid = <uid3>;
regions[2].x = 0.26;
regions[2].y = 0.76;
regions[2].width = 0.23;
regions[2].height = 0.23;
regions[2].alpha = 1;
regions[2].renderMode = nerecord::kNERtcRenderModeHidden; 

regions[3].uid = <uid3>;
regions[3].x = 0.51;
regions[3].y = 0.76;
regions[3].width = 0.23;
regions[3].height = 0.23;
regions[3].alpha = 1;
regions[3].renderMode = nerecord::kNERtcRenderModeHidden;

layout.regionCount = 4;
layout.regions = regions;
layout.layout = kNERtcLayoutCustom;
layout.backgroundColor = "#ffffff";
engine->setVideoMixingLayout(layout);
此文档是否对你有帮助?
有帮助
去反馈
  • 自适应布局
  • 自定义合流布局
  • 实现方法
  • 示例代码