Stream mixing layouts-Real-Time Communication(RTC)-阿里云帮助中心

Alibaba Cloud Real-Time Communication (RTC) provides 12 video layout configurations that you can use to start a bypass live stream or cloud recording. This topic describes these layout configurations.

Note To create a custom layout, go to the console and choose Bypass Live Streaming > Layout Management, or call the CreateMPULayout operation.

Layout elements

Parameter	Type	Description
panes	object array	Information about the panes. A maximum of 16 panes can be configured.
audio_mix_count	int	The maximum number of audio streams that can be mixed.

The following table describes the pane parameters.

Parameter	Type	Description
paneid	int	The ID of the pane.
major_pane	int	1: Main pane
x	float	The x-coordinate. This is a normalized percentage.
y	float	The y-coordinate. This is a normalized percentage.
width	float	The width of the pane. This is a normalized percentage.
height	float	The height of the pane. This is a normalized percentage.
zorder	int	The display layer. Layer 0 is the bottom layer. Layer 1 is displayed on top of layer 0, and so on.

Layout coordinate system

Default layouts

Alibaba Cloud RTC provides the following layouts:

Layout ID	Number of video sources	Layout name
1	1	Single view 1
2	2	Tiled left and right 1
3	2	Picture-in-Picture (PiP) 1
4	2	PiP 2
5	3	Gallery mode 3
6	4	Gallery mode 4
7	5	Gallery mode 5
8	6	Gallery mode 6
9	7	Gallery mode 7
10	8	Gallery mode 8
11	9	Gallery mode 9
13	2	Tiled left and right 2

Single view 1

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

Tiled left and right 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

Picture-in-Picture (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 2

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

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 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 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 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 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 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 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

Tiled left and right 2

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

References

You can use the following API operations to configure bypass live streaming layouts: