Advanced: Adjusting the Picture-in-picture Layout

There is a new release of the Developer Center! If you'd like to check it out, please click  here

Advanced: Adjusting the Picture-in-picture Layout

There are two methods to adjust the picture-in-picture layout:

Flexible Adjustment

You can adjust the layout to display any user in any position, and in any size.

  1. Contact sales-us@agora.io to enable the function of pushing streams at the Agora server.

  2. Call the API method setVideoCompositingLayout to adjust the layout according to your needs:

    Note

    • Ensure only one user in the same channel calls this API, otherwise, the other users must call clearVideoCompositingLayout to remove the settings.
    • There will not be any video but only be voice in CDN Live and the recordings of CDN Live if this API is not called correctly.

Example 1: Full Screen for One Host

To display the following layout:

../_images/sei_1host.jpg

Set the parameters as follows:

Canvas:360*640, #FFFFFF
UserList
   User1 :
       userId: 123
       renderRegion: 0.0, 0.0, 1.0, 1.0
       alpha: 1.0
       zorder: 0
       renderMode: Cropped

Example 2: Two-host Tile Horizontally

To display the following layout:

../_images/sei_2host.jpg

Set the parameters as follows:

Canvas: 640 * 360,  #FFFFFF

UserList
User1 :
    userId: 123
    renderRegion: 0.0, 0.0, 0.5, 1.0
    alpha: 1.0
    zorder: 0
    renderMode: Cropped
User2:
    userId: 456
    renderRegion: 0.5, 0.0, 0.5, 1.0
    alpha: 1.0
    zorder: 0
    renderMode: Cropped

Example 3: Three-host Tile vertically

To display the following layout:

../_images/sei_3host.jpg

Set the parameters as follows:

Canvas: 360 * 640,  #FFFFFF

UserList
   User1 :
       userId: 123
       renderRegion: 0.0, 0.0, 1.0, 0.6
       alpha: 1.0
       zorder: 0
       renderMode: Cropped
   User2:
       userId: 456
       renderRegion: 0.0, 0.6, 0.5, 0.4
       alpha: 1.0
       zorder: 0
       renderMode: Cropped
   User3:
       userId: 789
       renderRegion: 0.5, 0.6, 0.5, 0.4
       alpha: 1.0
       zorder: 0
       renderMode: Cropped

Example 4: 1 Full Screen + Randomly Floating Thumbnails

To display the following layout:

../_images/sei_random.jpg

Set the parameters as follows:

Canvas: 360 * 640,  #FFFFFF
UserList

   User1:
       userId: 123
       renderRegion: 0.0, 0.0, 1.0, 1.0
       alpha: 1.0
       zorder: 0
       renderMode: Cropped

   User2:
       userId: 456
       renderRegion: 0.1, 0.5, 0.3, 0.4
       alpha: 1.0
       zorder: 100
       renderMode: Cropped

   User3:
       userId: 789
       renderRegion: 0.5, 0.5, 0.3, 0.4
       alpha: 1.0
       zorder: 100
       renderMode: Cropped

Default Layout

You can select one of the following default layouts if you do not want to use flexible adjustment.

  1. Contact sales-us@agora.io to enable the function of pushing streams at the Agora server.
  2. Call the API method configPublisher to adjust the layout. Check Supported Layout for details.

Supported Layout

Layered Windows

Floating: One dominant upper window + multiple lower floating thumbnails (the maximum layout is one dominant upper window + 6 lower floating thumbnails).

For example,

../_images/inpicture_1plusn.jpg

Tile Horizontally

Horizontally Split: Two horizontally displayed equally-sized windows.

For example,

../_images/inpicture_horizontal.jpg

Tile Vertically

Vertically Split: One upper window (60%) + two lower equally-sized windows.

For example,

../_images/inpicture_vertical.jpg
Is this page helpful?