跳到主要内容

合流布局

画布配置​

  1. 画布指的是多道视频流新合成后视频背景宽高，不管哪种合流布局方式，都是基于画布宽高范围内渲染，此配置为可选设置。
  • 大流画布宽高默认为 360 * 640 帧率为 25 码率为 800 。
  • 小流画布宽高默认为 180 * 320 帧率为 15 码率为 200 。
  • 可通过传递 tiny 参数区分设置大小流。

设置画布码率​

方法​

JavaScript
rtcEngine.setLiveMixVideoBitrate(bitrate);

参数说明​

参数类型必填说明
bitrateNumber是画布码率，单位 kbps

示例代码​

JavaScript
// 设置画布码率
rtcEngine.setLiveMixVideoBitrate(2200);
console.log('画布码率设置完成');

设置画布分辨率​

方法​

JavaScript
rtcEngine.setLiveMixVideoResolution(resolution);

参数说明​

参数类型必填说明
resolutionRCRTCVideoResolution是画布分辨率

示例代码​

JavaScript
// 设置画布分辨率
rtcEngine.setLiveMixVideoResolution(RCRTCVideoResolution.Resolution_720x1280);
console.log('画布分辨率设置完成');

设置画布帧率​

方法​

JavaScript
rtcEngine.setLiveMixVideoFps(fps);

参数说明​

参数类型必填说明
fpsRCRTCVideoFps是画布帧率

示例代码​

JavaScript
// 设置画布帧率
rtcEngine.setLiveMixVideoFps(RCRTCVideoFps.Fps30);
console.log('画布帧率设置完成');

设置填充方式​

填充方式共分为两种：

  • RCRTCLiveMixRenderMode.Crop
  • RCRTCLiveMixRenderMode.Whole(默认)

方法​

JavaScript
rtcEngine.setLiveMixRenderMode(mode);

参数说明​

参数类型必填说明
modeRCRTCLiveMixRenderMode是填充方式

示例代码​

JavaScript
// 设置填充方式为裁剪
rtcEngine.setLiveMixRenderMode(RCRTCLiveMixRenderMode.Crop);
console.log('填充方式设置完成');

音频配置​

设置音频码率，音频码率默认 200 。

方法​

JavaScript
rtcEngine.setLiveMixAudioBitrate(bitrate);

参数说明​

参数类型必填说明
bitrateNumber是音频码率，单位 kbps

示例代码​

JavaScript
rtcEngine.setLiveMixAudioBitrate(400);
console.log('音频码率设置完成');

合流布局​

直播合流视频布局目前分为三种：1. 悬浮布局（默认）；2. 自适应布局；3. 自定义布局。下面分别介绍布局效果。

悬浮布局​

背景视频来源默认采用第一个加入房间的主播或调用合流布局相关接口的主播发布的视频，显示区域为整个合流视频，合流视频大小需要调用 setLiveMixVideoResolution 接口设置（默认值是 360 * 640）；当连麦者依次加入时，按照下图显示的序列加载子视图：

(height=300)

当有人离开时，系统会自动按照现有主播加入房间的次序重新布局视图。

方法​

JavaScript
rtcEngine.setLiveMixLayoutMode(mode);

参数说明​

参数类型必填说明
modeRCRTCLiveMixLayoutMode是布局模式

示例代码​

JavaScript
rtcEngine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.Suspension);
console.log('悬浮布局设置完成');

自适应布局​

视频的整体大小为默认值 360 * 640 或通过合流接口自定义；当有多人加入房间后，直播系统会按照具体人数平分整体视频区域，使之每个子视图加载区域大小一致；录制系统会按照参会者进入房间的次序依次把参会者图像加载在示意图的相应序号上。 当有人离开时，系统会自动按照现有主播加入房间的次序重新布局视图。

(height=300) (height=300) (height=300) (height=300)

示例代码​

JavaScript
rtcEngine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.Adaptive);
console.log('自适应布局设置完成');

自定义布局​

通过调用自定义布局接口可以设置合流视频整体尺寸，以及各个连麦者视图位置及大小。

如下图所示，合流布局是以像素方式，定义视频输出尺寸， 如图整体视频尺寸 宽*高 = 300 * 300 ；以整体作为画布，画布的原点（0,0）在左上角, 那么三个连麦主播的窗口相对原点的位置，及其宽度，高度值分别如图所示（相应的设置代码也可在直播布局的接口文档中查看布局实例代码）：

(height=300)

方法​

JavaScript
rtcEngine.setLiveMixCustomLayouts(layouts);

参数说明​

参数类型必填说明
layoutsArray是自定义布局配置数组

示例代码​

JavaScript
let layouts = [];

let layout1 = {
  userId: userId1,
  x: 70,
  y: 20,
  width: 130,
  height: 80,
};
layouts.push(layout1);

let layout2 = {
  userId: userId2,
  x: 20,
  y: 100,
  width: 120,
  height: 150,
};
layouts.push(layout2);

let layout3 = {
  userId: userId3,
  x: 160,
  y: 100,
  width: 120,
  height: 150,
};
layouts.push(layout3);

rtcEngine.setLiveMixCustomLayouts(layouts);
console.log('自定义布局设置完成');

设置自定义布局后会默认修改 LiveMixLayoutMode 属性为 RCRTCLiveMixLayoutMode.Custom

音频合流​

音频合流布局的原理就是通过控制输入资源列表，设置输出音频配置，达到合并哪些主播音频资源输出到指定配置的音频资源。设置音频资源合流列表后，观众订阅直播资源，就会只听到音频合流列表中对应的主播。

方法​

JavaScript
rtcEngine.setLiveMixCustomAudios(userIds);

参数说明​

参数类型必填说明
userIdsArray是音频合流用户 ID 列表

示例代码​

JavaScript
let userIds = [
  userId1,
  userId2,
  userId3,
];

rtcEngine.setLiveMixCustomAudios(userIds);
console.log('音频合流设置完成');
最后于 更新