Skip to main content

Video Mixing Layout

Canvas Configuration​

  1. The canvas refers to the width and height of the newly synthesized video background after mixing multiple video streams. Regardless of the mixing layout method, rendering is based within the canvas dimensions. This configuration is optional.
  • Default canvas dimensions for the main stream: 360 × 640, frame rate: 25, bitrate: 800.
  • Default canvas dimensions for the tiny stream: 180 × 320, frame rate: 15, bitrate: 200.
  • Use the tiny parameter to distinguish between main and tiny stream settings.

Sample Code

/// Set canvas bitrate  
engine.setLiveMixVideoBitrate(2200);  
/// Set canvas resolution  
engine.setLiveMixVideoResolution(RCRTCVideoResolution.resolution_720_1280);  
/// Set canvas frame rate  
engine.setLiveMixVideoFps(RCRTCVideoFps.fps_30);
  1. Fill mode settings. Two fill modes are supported:
  • RCRTCLiveMixRenderMode.crop
  • RCRTCLiveMixRenderMode.whole (default)

Sample Code

/// Set fill mode to crop  
engine.setLiveMixRenderMode(RCRTCLiveMixRenderMode.crop);

Audio Configuration​

Set the audio bitrate (default: 200).

Sample Code

engine.setLiveMixAudioBitrate(400);

Video Mixing Layout​

Live video mixing currently supports three layout modes:

  1. Suspension Layout (default)
  2. Adaptive Layout
  3. Custom Layout

Suspension Layout​

The background video source defaults to the first host who joins the room or the host who calls the mixing layout API. The display area covers the entire mixed video, whose dimensions can be set via setLiveMixVideoResolution (default: 360 × 640). When participants join sequentially, sub-views are loaded in the order shown below:

(height=300)

If a participant leaves, the system automatically rearranges the views based on the remaining participants' join order.

Sample Code

engine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.suspension);

Adaptive Layout​

The default mixed video dimensions are 360 × 640 (or customizable via API). When multiple participants join, the system evenly divides the video area so each sub-view has equal space. The recording system loads participants' video feeds in the order they joined, corresponding to the numbered positions below.

If a participant leaves, the system automatically rearranges the views based on the remaining participants' join order.

(height=300) (height=300) (height=300) (height=300)

Sample Code

engine.setLiveMixLayoutMode(RCRTCLiveMixLayoutMode.adaptive);

Custom Layout​

Use the custom layout API to define the mixed video dimensions and each participant's view position/size.

As shown below, the mixing layout uses pixel-based coordinates to define the output video dimensions (e.g., 300 × 300). The canvas origin (0,0) is at the top-left corner. The positions and dimensions of three participants' video windows relative to the origin are illustrated (see layout example code in the API documentation):

(height=300)

Sample Code

List<RCRTCCustomLayout> layouts = [];  

RCRTCCustomLayout layout1 = RCRTCCustomLayout.create(  
  userId: userId1,  
  x: 70,  
  y: 20,  
  width: 130,  
  height: 80,  
);  
layouts.add(layout1);  

RCRTCCustomLayout layout2 = RCRTCCustomLayout.create(  
  userId: userId2,  
  x: 20,  
  y: 100,  
  width: 120,  
  height: 150,  
);  
layouts.add(layout2);  

RCRTCCustomLayout layout3 = RCRTCCustomLayout.create(  
  userId: userId3,  
  x: 160,  
  y: 100,  
  width: 120,  
  height: 150,  
);  
layouts.add(layout3);  

engine.setLiveMixCustomLayouts(layouts);

Setting a custom layout automatically changes the LiveMixLayoutMode property to RCRTCLiveMixLayoutMode.custom.

Audio Mixing​

Audio mixing works by controlling the input resource list and configuring output audio settings to merge specified hosts' audio streams. After setting the audio mixing list, audiences subscribing to the live stream will only hear audio from the listed hosts.

Sample Code

List<String> userIds = [  
  userId1,  
  userId2,  
  userId3,  
];  

engine.setLiveMixCustomAudios(userIds);
Last updated on