Alibaba Cloud RTC provides the configuration of 12 groups of video layouts. You can select an appropriate layout to start bypass transfer or cloud recording based on your actual needs. Read this topic to learn more about the layout configuration.

Note If you need to customize the layout, you can choose Bypass to Push > Layout Management or call the CreateMPULayout in the console.

Layout component elements

Parameter Type Description
panes object array Pane information. Up to 16 sets of settings are supported.
audio_mix_count int The maximum number of audio mixes.

The following table lists the parameters related to pane information:

Parameter Type Description
paneid int The number of the pane.
major_pane int 1: The main pane.
x float The coordinate x, the normalized percentage.
y float coordinate y, normalized percentage.
width float The width of the pane. Normalized percentage.
height float The height of the window. Normalized percentage.
zorder int Stacking order, 0 is the bottom layer, 1 layer is above 0 layer, and so on.

Layout coordinate system

Layout coordinate system

Default layout

Alibaba Cloud RTC provides the following layout reference:

Layout ID Number of video sources Layout name
1 1 Single Picture 1
2 2 Left and right tiling_1
3 2 PIP 1
4 2 PIP 2
5 3 Gallery Mode_3
6 4 Gallery Modes_4
7 5 Gallery Modes_5
8 6 Gallery Modes_6
9 7 Gallery Modes_7
10 8 Gallery mode_8
11 9 Gallery Modes_9
13 2 Left and right tiling_2

Single screen 1

id x y width height zorder
0 0 0 1 1 0

Left and right tiling_1

id x y width height zorder
0 0.0021 0.2516 0.4968 0.4968 0
1 0.501 0.2516 0.4968 0.4968 0
Left and right tiling

PIP 1

id x y width height zorder
0 0 0 1 1 0
1 0.00625 0.00625 0.2361 0.2361 1
PIP 1

PIP 2

id x y width height zorder
0 0 0 1 1 0
1 0.7576 0.7576 0.2361 0.2361 1
PIP 2

Gallery Mode_3

id x y width height zorder
0 0.2547 0.00625 0.4906 0.4906 0
1 0.00625 0.5031 0.4906 0.4906 0
2 0.5031 0.5031 0.4906 0.4906 0
Gallery Mode_3

Gallery Mode_4

id x y width height zorder
0 0.013 0.013 0.4805 0.4805 0
1 0.5065 0.013 0.4805 0.4805 0
2 0.013 0.5065 0.4805 0.4805 0
3 0.5065 0.5065 0.4805 0.4805 0
Gallery Mode_4

Gallery Mode_5

id x y width height zorder
0 0.1718 0.1718 0.325 0.325 0
1 0.5031 0.1718 0.325 0.325 0
2 0.00625 0.503 0.325 0.325 0
3 0.3375 0.503 0.325 0.325 0
4 0.66875 0.503 0.325 0.325 0
Gallery Mode_5

Gallery Mode_6

id x y width height zorder
0 0.00625 0.1718 0.325 0.325 0
1 0.3375 0.1718 0.325 0.325 0
2 0.6688 0.1718 0.325 0.325 0
3 0.00625 0.5031 0.325 0.325 0
4 0.3375 0.5031 0.325 0.325 0
5 0.6688 0.5031 0.325 0.325 0
Gallery Mode_6

Gallery Mode_7

id x y width height zorder
0 0.00625 0.00625 0.7391 0.7391 0
1 0.7516 0.1336 0.2422 0.2422 0
2 0.7516 0.3821 0.2422 0.2422 0
3 0.00625 0.7516 0.2422 0.2422 0
4 0.2547 0.7516 0.2422 0.2422 0
5 0.5032 0.7516 0.2422 0.2422 0
6 0.7516 0.7516 0.2422 0.2422 0
Gallery Mode_7

Gallery Mode_8

id x y width height zorder
0 0.00625 0.00625 0.7391 0.7391 0
1 0.7516 0.00625 0.2422 0.2422 0
2 0.7516 0.2547 0.2422 0.2422 0
3 0.7516 0.5032 0.2422 0.2422 0
4 0.00625 0.7516 0.2422 0.2422 0
5 0.2547 0.7516 0.2422 0.2422 0
6 0.5032 0.7516 0.2422 0.2422 0
7 0.7516 0.7516 0.2422 0.2422 0
Gallery Mode_8

Gallery Mode_9

id x y width height zorder
0 0.00625 0.00625 0.325 0.325 0
1 0.3375 0.00625 0.325 0.325 0
2 0.6688 0.00625 0.325 0.325 0
3 0.00625 0.3375 0.325 0.325 0
4 0.3375 0.3375 0.325 0.325 0
5 0.6688 0.3375 0.325 0.325 0
6 0.00625 0.6688 0.325 0.325 0
7 0.3375 0.6688 0.325 0.325 0
8 0.6688 0.6688 0.325 0.325 0
Gallery Mode_9

Left and right tiling_2

id x y width height zorder
0 0 0 0.5 1 0
1 0.5 0 0.5 1 0
Left and right tiling 2

References

The API involved in configuring the bypass to push layout is as follows: