自定义直播布局

更新时间: 2023/08/08 11:54:30

在开启直播时,您可以自定义直播画面的布局,本文介绍直播布局 layoutCoordinateList 参数的相关说明和推荐设置。

参数说明

自定义布局 layoutCoordinateList 参数的详细说明如下表所示。

参数名称 类型 是否必选 示例值 描述
streamType String 必选 5 流类型:
  • USER:用户音视频
  • IMAGE:背景图片
  • SUBSTREAM:辅流
userUuid String 必选 abc 将指定userUuid对应用户的视频流拉入直播。
如果添加多个 users,则 userUuid 不能重复。
url String 可选 https://example.im/占位图片.png 占位图片的 URL,即用户掉线后显示的图片。
只有当 streamTypeIMAGE 时,才需要设置该参数。
x Integer 必选 0 通过 x 和 y 指定画布坐标中的一个点,该点将作为用户图像的左上角。
x 参数用于设置画布的横轴坐标值。
取值范围为 0~1920,若设置为奇数值,会自动向下取偶。
y Integer 必选 0 通过 x 和 y 指定画布坐标中的一个点,该点将作为用户图像的左上角。
y 参数用于设置画布的纵轴坐标值。
取值范围为 0~1920,若设置为奇数值,会自动向下取偶。
width Integer 必选 360 该用户图像在画布中的宽度。
取值范围为 0~1920,若设置为奇数值,会自动向下取偶。
height Integer 必选 360 该用户图像在画布中的高度。
取值范围为 0~1920,若设置为奇数值,会自动向下取偶。

adaption

Integer

可选

1

用于设置占位图片和指定区域的适应属性。可设置为:

  • 0:适应图片。即保证视频内容全部显示,未覆盖区域默认填充背景色。
  • 1:适应区域。即保证所有区域被填满,视频超出部分会被裁剪。若未设置或设置为非 0 和 1 的正整数,则取默认值 1。

pushAudio

Boolean

可选

true

是否在直播中混流该用户的对应音频流。可设置为:

  • true:在直播中混流该用户的对应音频流。
  • false:在直播中将该用户设置为静音。若未设置,默认为 true。

pushVideo

Boolean

可选

true

是否在直播中向观看者播放该用户的对应视频流。可设置为:

  • true:在直播中播放该用户的视频流。
  • false:在直播中不播放该用户的视频流。若未设置,则默认为 true。
zOrder Integer 可选 1 直播视频上用户视频帧的图层编号。取值范围为 0~100,默认为 0。
最小值为 0(默认值),表示该区域图像位于最下层。
最大值为 100,表示该区域图像位于最上层。
若编号相等,三者图层展示的优先顺序为 users > subStream > images。

示例

以右侧展示成员列表的布局为例。

  • 显示效果

自定义布局.png

  • 示例代码
{
    "liveLayout": 5,
    ...
    "layoutCoordinateList": [
        {
            "streamType": "USER",
            "userUuid": "abc",
            "x": 590,
            "y": 60,
            "width": 120,
            "height": 100,
            "zOrder": 10,
            "adaption": 1,
            "pushAudio": true,
            "pushVideo": true
        },
        {
            "streamType": "USER",
            "userUuid": "edf",
            "x": 590,
            "y": 180,
            "width": 120,
            "height": 100,
            "zOrder": 2,
            "adaption": 1,
            "pushAudio": true,
            "pushVideo": true
        },
        {
            "streamType": "SUBSTREAM",
            "userUuid": "def",
            "x": 0,
            "y": 0,
            "width": 580,
            "height": 500,
            "zOrder": 1,
            "adaption": 1,
            "pushAudio": true,
            "pushVideo": true
        },
        {
            "streamType": "IMAGE",
            "url": "http://163.com/picture.png",
            "x": 590,
            "y": 300,
            "width": 120,
            "height": 100,
            "zOrder": 50,
            "adaption": 1,
            "pushAudio": true,
            "pushVideo": true
        }
    ]
    ...
}

相关接口

接口 描述
开始直播 开启会议直播
修改直播 主播上线时、修改画面布局等场景中需要调用此接口更新直播
查询直播信息 查询指定直播的详细信息,包括推流地址、布局模式等
结束直播 结束直播
此文档是否对你有帮助?
有帮助
去反馈
  • 参数说明
  • 示例
  • 相关接口