How to Add an Overlay Image

The layers endpoint allows you to place transparent images on top of your video stream. 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.

Displaying an Example Overlay

There are multiple ways to display images in an Eyeson meeting. In this case, we are using a public image. All other options are listed under Layers.

bash

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

node sdk

xample 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/overlay_example.png',
  'z-index': 1,
});

go sdk

accessKey := "..."
userService, _ := eyeson.NewUserServiceFromAccessKey(accessKey)
userService.SetLayer("https://docs.eyeson.com/img/examples/overlay_example.png", eyeson.Foreground)

Setting a Predefined Layout

To ensure the overlay image is visible, a predefined layout is applied. More about layouts and the predefined layouts list. This is optional.

bash

export ACCESS_KEY=...
curl -X POST \
  -d "layout=auto" \
  -d "show_names=true" \
  -d "users[]=" \
  -d "name=one" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

node

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

const ACCESS_KEY = '...';
const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layout';
const formData = new FormData();
  formData.set('layout', 'auto');
  formData.set('show_names', 'true');
  formData.append('users[]', '');
  formData.set('name', 'one');
await fetch(url, { method: 'POST', body: formData });

go sdk

user_id_1 := "123..."
users := []string{user_id_1 , ""}
accessKey := "..."
userService, _ := eyeson.NewUserServiceFromAccessKey(accessKey)
userService.SetLayout("auto", users, false, true)

Resulting Video Layout

If both API requests are successfully processed, the resulting video stream may be displayed as follows.

Deleting the Overlay image

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

bash

export ACCESS_KEY=...
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);

go sdk

accessKey := "..."
userService, _ := eyeson.NewUserServiceFromAccessKey(accessKey)
userService.ClearLayer(eyeson.Foreground)