跳到主要内容

合流布局

画布配置​

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

示例代码

JavaScript
/// 设置大流画布码率
engine.setLiveMixVideoBitrate(2200);
/// 设置大流画布分辨率
engine.setLiveMixVideoResolution(720, 1280);
/// 设置大流画布帧率
engine.setLiveMixVideoFps(RCRTCVideoFps.Fps15);

 /// 设置小流画布码率
engine.setLiveMixVideoBitrate(800, true);
/// 设置小流画布分辨率
engine.setLiveMixVideoResolution(360, 640, true);
/// 设置小流画布帧率
engine.setLiveMixVideoFps(RCRTCVideoFps.Fps15, true);
  1. 填充方式设置，填充方式共分为两种：
  • RCRTCLiveMixRenderMode.Crop
  • RCRTCLiveMixRenderMode.Whole(默认)

示例代码

JavaScript
/// 设置填充方式为裁剪
engine.setLiveMixRenderMode(RCRTCLiveMixRenderMode.Crop);

音频配置​

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

示例代码

JavaScript
engine.setLiveMixAudioBitrate(400);

合流布局​

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

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

悬浮布局​

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

(height=300)

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

示例代码

JavaScript
engine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.Suspension);

自适应布局​

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

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

示例代码

JavaScript
engine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.Adaptive);

自定义布局​

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

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

(height=300)

示例代码

JavaScript
let layouts = [];

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

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

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

engine.setLiveMixCustomLayouts(layouts);

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

音频合流​

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

示例代码

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

engine.setLiveMixCustomAudios(userIds);
最后于 更新