Layout

Layout

This wiki explains the layout of remote videos in the SDK.

Developer can update the remote videos' layout type for the current meeting from the 5 layout types available options for the specific participant/device only.

API

To know about changeVideoLayout APIs in detail, please visit → https://webex.github.io/webex-js-sdk/api/

Uses below API to change layout type for the current meeting for the specific participant/device only

changeVideoLayout(layoutType, renderInfo = {})

Asynchronous	Yes
Parameters	layoutType, renderInfo
Returns	promise

layoutType possible values user can pass ['Single', 'ActivePresence', 'Prominent', 'Equal', 'OnePlusN'].

renderInfo preferred dimensions for the remote main and content streams (server can ignore it)

const layoutType = 'Equal';
const renderInfo =  {
   "main": {
         "width": "1920", 
         "height": "1080"
      }
};

meeting.changeVideoLayout(layoutType, renderInfo);

Layout Types

There are 5 layout types available in meetings, which are

1. Single
2. ActivePresence
3. Prominent
4. Equal
5. OnePlusN

We can check that in our public Kitchen Sink app.

Types with screenshots are added below -

Single

Equal

Active Presence

Prominent

One+N

Screenshots are added from our Kitchen Sink app.

Errors

The possible errors that one could get from the APIs listed below,

API	Error	How to fix it?
changeVideoLayout	Meeting:index#changeVideoLayout --> cannot change video layout, you are not recieving any video/share stream	Need to recieve any video/share stream
changeVideoLayout	Meeting:index#changeVideoLayout --> cannot change video layout, invalid layoutType recieved.	Please choose the layoutType from above supported options