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
- shell
- node sdk
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"
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"
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.