How to Assign Spots Automatically

The default layout setting is auto. When you define users in your request, Eyeson automatically fills any empty spots in the video stream with participants who have active cameras.

To manipulate and set a specific layout, you'll need two key pieces of information:

• The ACCESS_KEY for the video call
• The USER_ID of participants you want to reposition

You can set these either when initiating a video call via the API or when adding participants to an active call. Alternatively, you can extract these values from a running call using EyesonJS or the observer.

In the example below, the first participant is positioned in the second spot of a layout named four.

bash

export ACCESS_KEY=123...
export USER_ID1=123...

curl -X POST \
  -d "users[]=" \
  -d "users[]=$USER_ID1" \
  -d "users[]=" \
  -d "users[]=" \
  -d "layout=auto" \
  -d "name=four" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

shell

SET ACCESS_KEY=123...
SET USER_ID1=123...

curl -X POST ^
  -d "users[]=" ^
  -d "users[]=%USER_ID1%" ^
  -d "layout=auto" ^
  -d "name=four" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layout"

node sdk

This example also includes the creation of the room.

import Eyeson from 'eyeson-node';

const user_id_1 = 'abc...';
const eyeson = new Eyeson({ apiKey: 'API_KEY' });
const room = await eyeson.join('test-user-name', 'test-room', {
  options: {
    widescreen: true,
    sfu_mode: 'disabled',
  },
});
await room.waitReady();
console.log('Join via:', room.data.links.gui);
await room.setLayout({
  layout: 'auto',
  name: 'four',
  users: ['', user_id_1, '', ''],
});

For the sake of clarity, there is a background image with the numbered video spots blended in.

Figure 1. The result may look like this.

Also four additional participants are added to the video call session after the layout change. You can see in Figure 2 the video stream spots are filled with active participants although in the request the options had no values. Because this layout has only four spots the excess participants are not blended in.

Figure 2. To visualise the invisible participant, here is an image of the same set up with an UI.