跳到主要内容

合流布局

画布配置​

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

设置大流画布码率​

方法​

JavaScript
engine.setLiveMixVideoBitrate();

参数说明​

参数类型必填说明
bitrateNumber是画布码率

示例代码​

JavaScript
/// 设置大流画布码率
engine.setLiveMixVideoBitrate(2200);
console.log('大流画布码率设置成功');

设置大流画布分辨率​

方法​

JavaScript
engine.setLiveMixVideoResolution();

参数说明​

参数类型必填说明
widthNumber是画布宽度
heightNumber是画布高度

示例代码​

JavaScript
/// 设置大流画布分辨率
engine.setLiveMixVideoResolution(720, 1280);
console.log('大流画布分辨率设置成功');

设置大流画布帧率​

方法​

JavaScript
engine.setLiveMixVideoFps();

参数说明​

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

示例代码​

JavaScript
/// 设置大流画布帧率
engine.setLiveMixVideoFps(RCRTCVideoFps.Fps15);
console.log('大流画布帧率设置成功');

设置小流画布码率​

方法​

JavaScript
engine.setLiveMixVideoBitrate();

参数说明​

参数类型必填说明
bitrateNumber是画布码率
tinyBoolean是是否设置小流，true 表示小流

示例代码​

JavaScript
/// 设置小流画布码率
engine.setLiveMixVideoBitrate(800, true);
console.log('小流画布码率设置成功');

设置小流画布分辨率​

方法​

JavaScript
engine.setLiveMixVideoResolution();

参数说明​

参数类型必填说明
widthNumber是画布宽度
heightNumber是画布高度
tinyBoolean是是否设置小流，true 表示小流

示例代码​

JavaScript
/// 设置小流画布分辨率
engine.setLiveMixVideoResolution(360, 640, true);
console.log('小流画布分辨率设置成功');

设置小流画布帧率​

方法​

JavaScript
engine.setLiveMixVideoFps();

参数说明​

参数类型必填说明
fpsRCRTCVideoFps是画布帧率
tinyBoolean是是否设置小流，true 表示小流

示例代码​

JavaScript
/// 设置小流画布帧率
engine.setLiveMixVideoFps(RCRTCVideoFps.Fps15, true);
console.log('小流画布帧率设置成功');

设置填充方式​

填充方式 RCRTCLiveMixRenderMode 共分为两种：

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

方法​

JavaScript
engine.setLiveMixRenderMode();

参数说明​

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

示例代码​

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

音频配置​

  1. 设置音频码率，音频码率默认 200 。
  2. 此接口调用时机可以在主播发布资源后的任意时刻。

方法​

JavaScript
engine.setLiveMixAudioBitrate();

参数说明​

参数类型必填说明
bitrateNumber是音频码率

示例代码​

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

合流布局​

  1. 合流布局的功能主要是定义直播间连麦后合流视频的布局方式，可以根据自身业务需求来定义多个连麦者的画面的布局样式。
  2. 接口调用时机可以在主播发布资源后的任意时刻。使用自定义布局时需要在房间有人加入和退出时分别调用，以便合流视频中的画面按照 APP 设计规则展示。

直播合流视频布局 RCRTCLiveMixLayoutMode 目前分为三种：

  1. 悬浮布局（默认）。
  2. 自适应布局。
  3. 自定义布局。

下面将分别介绍布局效果。

悬浮布局​

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

(height=300)

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

方法​

JavaScript
engine.setLiveMixLayoutMode();

参数说明​

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

示例代码​

JavaScript
// 设置合流布局为悬浮布局
engine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.Suspension);
console.log('悬浮布局设置成功');

自适应布局​

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

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

方法​

JavaScript
engine.setLiveMixLayoutMode();

参数说明​

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

示例代码​

JavaScript
// 设置合流布局为自适应布局
engine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.Adaptive);
console.log('自适应布局设置成功');

自定义布局​

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

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

(height=300)

方法​

JavaScript
engine.setLiveMixCustomLayouts();

参数说明​

参数类型必填说明
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);

// 设置合流布局为自定义布局
engine.setLiveMixCustomLayouts(layouts);
console.log('自定义布局设置成功');

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

音频合流​

  1. 音频合流布局的原理就是通过控制输入资源列表，设置输出音频配置，达到合并哪些主播音频资源输出到指定配置的音频资源。设置音频资源合流列表后，观众订阅直播资源，就会只听到音频合流列表中对应的主播。
  2. 此接口接口调用时机可以在主播发布资源后的任意时刻。

方法​

JavaScript
engine.setLiveMixCustomAudios();

参数说明​

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

示例代码​

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

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