Adjust Picture-in-Picture

Introduction

We provide two ways to adjust the picture-in-picture layout:

Flexible Adjustment

You can flexibly adjust the live broadcast layouts to put any user on any wanted position as any wanted size.

  1. Contact sales-us@agora.io with the following purpose:

    1. Enable the function of pushing streams at the Agora server side.
    2. Enable the function of adjusting the picture-in-picture layouts dynamically.
  2. Wait for the confirmation from agora.io that the said functions are enabled.

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

    Note

    • Be sure that only one user in the same channels calls this API, otherwise, the rest users must call clearVideoCompositingLayout to remove the settings.
    • It will be no image and only audio in the bypass live and recordings of the bypass live if this API is not called correctly.
    Android iOS
    Windows Mac

Example 1: Full Screen for One Host

If you want to display the following layout:

../../_images/sei_1host.png

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

If you want to display the following layout:

../../_images/sei_2host.png

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

If you want to display the following layout:

../../_images/sei_3host.png

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

If you want to display the following layout:

../../_images/sei_random.png

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 the flexible adjustment.

  1. Contact sales-us@agora.io to enable the function of pushing streams at the Agora server side. Wait for the confirmation from agora.io that the said functions are enabled.
  2. Call the API method configPublisher to adjust the layout. Check Supported Layout for details.

Supported Layout

Layered Windows

Floating: 1 dominant upper window + multiple lower floating thumbnails (The maximum layout is 1 dominant upper window + 6 lower floating thumbnails.)

For example,

../../_images/inpicture_1plusn.png

Tile Horizontally

Horizontally Split: 2 horizontally displayed equal-sized windows.

For example,

../../_images/inpicture_horizontal.png

Tile Vertically

Vertically Split: 1 upper window (60%)+2 lower equal-sized windows

For example,

../../_images/inpicture_vertical.png