Set mixed-stream layout

---

When there are multiple users sending audio, video, and whiteboard streams in a room, our Cloud Recording service mixes the streams of all the users into one stream. This document describes how to set the video layout in the mixed-stream recording mode.

We currently support the following video layouts:

• Customized layout: You can customize the video layout as needed, and this canvas can display up to 25 users.
• Grid layout: The number of columns and rows and the grid size vary according to the number of users in the room. This layout supports up to 25 users.
• Horizontal layout: One large region is displayed on the bottom edge of the canvas, and several small regions are displayed along the top edge of the canvas. The space on the top supports up to two rows of small regions with eight regions per row. And when the small regions are more than two rows, the left regions are displayed on the right edge of the canvas. This layout supports up to 25 users.
• Vertical layout: One large region is displayed on the left edge of the canvas, and several small regions are displayed along the right edge of the canvas. The space on the right supports up to two columns of small regions with eight regions per column. And when the small regions are more than two columns, the left regions are displayed on the bottom edge of the canvas. This layout supports up to 25 users.
• Floating layout: The first user in the room occupies the full canvas, the other users occupy the small regions on the top of the canvas, starting from the bottom right corner (every small region is the same size). This layout supports up to 25 users.

Implementation

To set video layout, set the MixMode parameter when calling the StartRecord method.

During the mixed-stream recording, you can change the layout by calling the UpdateLayout method.

The following figures describe several layouts in detail. The numbers in the diagram represent the order of users joining the room.

Grid layout

The following diagrams show the actual layouts with different number of users in the room:

Horizontal layout

To specify the large region in the horizontal layout, set the MixMaxResolutionStreamId parameter when calling the calling the StartRecord method and UpdateLayout methods.

The following diagrams show the actual layouts with different number of users in the room:

Vertical layout

To specify the large region in the vertical layout, set the MixMaxResolutionStreamId parameter when calling the calling the StartRecord method and UpdateLayout methods.

For detailed notes, refer to the Horizontal layout.

The following diagrams show the actual layouts with different number of users in the room:

Floating layout

To specify the large region in the floating layout, set the MixMaxResolutionStreamId parameter when calling the calling the StartRecord method and UpdateLayout methods.

For detailed notes, refer to the Horizontal layout.

The following diagrams show the actual layouts with different number of users in the room:

Customize the video layout

To set the size and position of each user's region on the canvas, set the MixInputList parameter when calling the StartRecord method and UpdateLayout methods.

The MixInputList is an array in JSON format that consists of the configurations of the user regions. You can configure up to 25 regions.

The parameters are defined as follows:

As shown in the following coordinate system figure:

Sample request

You can update the video layout during a recording.

Content-type: application/json; charset=utf-8

The request example of UpdateLayout is as follows:

{
    "TaskId": "xxxx",
    "MixMode": 1,
    "MixInputList": [
        {
            "StreamId": "xxxx", 
            "ViewType": 1, 
            "Top": 0, 
            "Left": 0, 
            "Bottom": 720, 
            "Right": 540, 
            "Layer": 1
        },
        {
            "StreamId": "", 
            "ViewType": 1, 
            "Top": 0, 
            "Left": 540, 
            "Bottom": 360, 
            "Right": 1080, 
            "Layer": 1
        },
        {
            "StreamId": "", 
            "ViewType": 1, 
            "Top": 360, 
            "Left": 540, 
            "Bottom": 720, 
            "Right": 1080, 
            "Layer": 1
        }
    ]
}