How to Add a Background Image

The Eyeson One View platform offers a powerful background image feature that enhances your video meetings with customizable visual elements. Building on our Layout Positioning capabilities, you can implement sophisticated backgrounds to complement your meeting content. This section demonstrates how to apply a background image consisting of a PDF page combined with graphic elements, all rendered as a PNG file for seamless integration with your video stream.

info

Images smaller than 1280x720 (widescreen mode) or 1280x960 (fullscreen mode) are centered in the background. Larger images are automatically scaled to fit the video stream dimensions, similar to CSS's object-fit: cover property.

The following example demonstrates how to set a background image for your meeting. Note that the background will only be visible in areas not covered by participant videos. For optimal background visibility, we recommend using the four layout which organizes participant videos in a grid formation, leaving more of the background visible.

bash

export ACCESS_KEY=123...

curl -X POST \
  -d "url=https://docs.eyeson.com/img/examples/bg_p1.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/bg_p1.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/bg_p1.png',
  'z-index': -1,
});

go sdk

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

For next pages just make the same request again with the adjusted PNG file.

Deleting the Background Image

If you don't want the background image to be shown anymore, try 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);

go sdk

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