How to Place a User in a Specific Position

When making API requests to position users, the ordering of parameters is crucial for correct participant placement. This is particularly important for complex custom layouts that require precise control over where each user appears.

Figure 1. A numbered grid showing the present-vertical-9 layout positions.

The code examples below demonstrate positioning a participant in the second position (index 1). This layout system supports empty spots through the use of an arbitrary placeholder value. In the example implementation, placeholders are used in multiple positions including the first spot, allowing the background image shown in Figure 1 to remain visible in those locations.

bash

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

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

shell

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

curl -X POST ^
  -d "users[]=_placeholder" ^
  -d "users[]=%USER_ID1%" ^
  -d "users[]=_placeholder" ^
  -d "users[]=_placeholder" ^
  -d "users[]=_placeholder" ^
  -d "users[]=" ^
  -d "users[]=_placeholder" ^
  -d "users[]=" ^
  -d "users[]=_placeholder" ^
  -d "layout=auto" ^
  -d "name=present-vertical-9" "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: 'present-vertical-9',
  users: [
    '_placeholder',
    user_id_1,
    '_placeholder',
    '_placeholder',
    '_placeholder',
    '',
    '_placeholder',
    '',
    '_placeholder',
  ],
});

Figure 2. The result in the eyeson UI may look like this.

For the sake of clarity in Figure 3, four participants are added to the session. The last two are not visible in this case. Also the user names are blended out with show_names=false while changing the layout.

bash

export ACCESS_KEY=123...

curl -X POST \
  -d "show_names=false" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

shell

SET ACCESS_KEY=123...

curl -X POST ^
  -d "show_names=false" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layout"

node sdk

import Eyeson from 'eyeson-node';

const eyeson = new Eyeson();
const user = await eyeson.getUser('ACCESS_KEY');
await user.setLayout({ show_names: false });

Figure 3. To visualise the invisible participants, here is an image of set up with an UI.

You can also move around the participants as you wish like this.

Figure 4. Same layout but the first participant is up a spot.