Skip to main content

Layers: Background and Foreground

You can display any data content inside your video using the Eyeson layer service. There are three ways to achieve this:

  1. The insert parameter allows you to show simple text message overlays. For example, you can listen for tweets in a separate service and display them by using the tweet sender's avatar as an icon, name as title, and the tweet content itself.

  2. For more complex data, you can either generate and upload an image directly, or

  3. provide a public URL to the image. When overlaying images, make sure to use a transparent background.

warning

Any Eyeson room video has a resolution of either 1280x960 pixels (960p in default) or 1280x720 pixels (HD in widescreen mode). Ensure any file uploaded is an alpha interlaced PNG or WebP image with a corresponding resolution to avoid any distortions.

tip

When using layers, you may want to disable SFU mode in the default room configuration, as it will transport individual streams for single and two participants without showing layer media.

Docusaurus themed imageDocusaurus themed image

Add Content to Layer​

info

Supported image types are: PNG, WebP, and JPEG. Background layer has no transparency, foreground layer can be transparent.

POST /rooms/<access_key>/layers # insert image or text message
RESPONSES 201 CREATED, 400 BAD REQUEST, 404 NOT FOUND, 410 GONE

file​

Type: File (optional)
File upload.

Example

url​

Type: STRING (optional)
File URL.

Examples

insert[icon]​

Type: STRING (optional)
URL for an icon to show.

insert[title]​

Type: STRING (optional)
Message title.

insert[content]​

Type: STRING (optional)
Message content.

z-index​

Type: STRING (optional)
Use -1 for background or 1 (default) for foreground position.

id​

Type: STRING (optional)
Layer id for relation control in observer "podium_update" event.

$ curl -X POST \
-d "url=https://eyeson-team.github.io/api/images/eyeson-overlay.png" \
https://api.eyeson.team/rooms/<ACCESS_KEY>/layers

Delete Layer Content​

DELETE /rooms/<access_key>/layers/<layer_index> # clear layer, layer_index: -1 or 1
  RESPONSES 200 OK, 404 NOT FOUND, 410 GONE

Show Insert with Icon, Title and Text in Room​

Insert is a preconfigured element with icon, title and text. It gets rendered automatically to show messages.

warning

The parameters for insert are marked optional in the list above. In order to get an insert you have to give icon, title and text, which makes them required for insert.

curl -i -X POST \
   -d "insert[icon]=@path/to/local/file.png" \
   -d "insert[content]=Message" \
   -d "insert[title]=Title" \
 'https://api.eyeson.team/rooms/<access_key>/layers'