How to add an Overlay Image

The overlay feature provides similar flexibility to the background image feature, allowing you to overlay transparent images on top of your video stream to mask specific areas.

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.

With these snippets the visuals of the overlay image example is improved.

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

import fetch, { FormData } from 'node-fetch';

const ACCESS_KEY = '123...';
const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layers';

const formData = new FormData();
formData.set('url', 'https://docs.eyeson.com/img/examples/ol_pdf.png');
formData.set('z-index', '1');

await fetch(url, { method: 'POST', body: formData });

As you can see (Figure 1) the frame of the participants are rounded and additional data is added to the video stream. You can also use the same layout with another combination (Figure 2). The first participant is moved up a rank in the spots and the overlay content is adjusted.

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

import fetch from 'node-fetch';

const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layers/1';
await fetch(url, { method: 'DELETE' });