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.
Image dimensions must not exceed 1280x720 pixels in widescreen mode or 1280x960 pixels in fullscreen mode.
Smaller images are positioned at the top left of the video stream as overlay.
- bash
- shell
- node sdk
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"
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"
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
- shell
- node sdk
curl -X DELETE "https://api.eyeson.team/rooms/$ACCESS_KEY/layers/1"
curl -X DELETE "https://api.eyeson.team/rooms/$ACCESS_KEY/layers/1"
import Eyeson from 'eyeson-node';
const eyeson = new Eyeson();
const user = await eyeson.getUser('ACCESS_KEY');
await user.clearLayer(1);