How to Show Local Images

Sources used in video calls aren't limited to server-hosted files - you can also use images directly from your local drive in meetings. This guide demonstrates how to blend a local image into your video stream as a foreground overlay layer.

bash

curl -X POST \
  -F "file=@path/to/local/file.png" \
  -F "z-index=1" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layers"

shell

curl -X POST ^
  -F "file=@path\to\local\file.png" ^
  -F "z-index=1" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layers"

node sdk

This example also includes the creation of the room.

import fs from 'node:fs';
import Eyeson from 'eyeson-node';

const file = './path/to/local/file.png';

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);
const buffer = await fs.promises.readFile(file);
await room.sendLayer(buffer, 1);

If you don't want the overlay 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);