How to Add an Overlay Image

The overlay feature allows you to place transparent images on top of your video stream. Like the background image feature, overlays provide flexibility to customize your meeting appearance by masking specific areas or adding visual elements to enhance presentation contexts.

warning

Image dimensions must not exceed 1280x720 pixels in widescreen mode or 1280x960 pixels in fullscreen mode.

info

Smaller images are positioned at the top left of the video stream as overlay.

bash

export ACCESS_KEY=123...

curl -X POST \
  -d "url=https://docs.eyeson.com/img/examples/ol_pdf.png" \
  -d "z-index=1" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layers"

shell

SET ACCESS_KEY=123...

curl -X POST ^
  -d "url=https://docs.eyeson.com/img/examples/ol_pdf.png" ^
  -d "z-index=1" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layers"

node sdk

This example also includes the creation of the room.

import Eyeson from 'eyeson-node';

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.setLayer({
  url: 'https://docs.eyeson.com/img/examples/ol_pdf.png',
  'z-index': 1,
});

As shown in Figure 1, the participants' frames feature rounded corners, and supplementary information is overlaid on the video stream. This layout can be further customized with alternative configurations (Figure 2). In this second example, the primary participant is elevated in priority position, and the overlay elements are modified accordingly.

Deleting the Overlay image

If you don't want the overlay image to be shown anymore, delete the layer by using these snippets.

bash

curl -X DELETE "https://api.eyeson.team/rooms/$ACCESS_KEY/layers/1"

shell

curl -X DELETE "https://api.eyeson.team/rooms/$ACCESS_KEY/layers/1"

node sdk

import Eyeson from 'eyeson-node';

const eyeson = new Eyeson();
const user = await eyeson.getUser('ACCESS_KEY');
await user.clearLayer(1);