Skip to main content

How to Build a Virtual Situation Room with Eyeson (Part 3)

· 3 min read
Stefan Steinbauer

In Part 3 of our Series, we will look at the layout functionalities of the Eyeson One View API. Since Eyeson is built on top of a next-generation MCU, you can be sure that everyone sees the same things at the same time. So, the Layout is applied by the MCU and can not be changed individually.

Some predefined layouts come with Eyeson One View, optimized for conversational topics. If not instructed otherwise, each call starts with an auto layout.

Custom layouts enable you to define your own video arrangement by specifying a custom name, a map of coordinates, and object-fit values for each participant's or source’s video feed.

Now, let's dive into the details:

Defining a Custom Layout​

To create a custom layout, you'll use the Layout API endpoint with specific parameters:

curl -X POST \
  -d "layout=auto" \
  -d "name=custom-map" \
  -d "map=[[20,80,400,400,\"auto\"],[440,160,400,400,\"contain\"],[860,240,400,400,\"cover\"]]" \
  -d "users[]=" \
  -d "users[]=$USER_ID1" \
  -d "users[]=" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

This request sets up a custom layout with three video spots, each with different positioning and object-fit values.

Understanding the Map Parameter​

The map parameter is crucial for custom layouts. It's an array of arrays, where each inner array represents a video spot:

[x, y, width, height, "object-fit"]
  • x and y are the coordinates for the top-left corner of the spot
  • width and height define the size of the spot
  • "object-fit" determines how the video fills the spot

Object-Fit Options​

You have three choices for object-fit:

  • "cover": Scales the video to cover the whole spot, maintaining aspect ratio (default)
  • "contain": Fits the video within the spot, potentially leaving letterbox space
  • "auto": Chooses between cover and contain based on the video source's aspect ratio

User Positioning​

The users[] parameter allows you to assign specific users to spots. Empty strings ("") can be used to leave spots vacant. A placeholder string can be used to block the spot from being used.

Layout Considerations​

  • Ensure all spots fit within the video stream (1280x720 for widescreen or 1280x960 for standard)
  • The number of map indices should match the number of user parameters

Visualization Tool​

Eyeson provides a visualization tool to help you plan your custom layouts. This can be especially useful when determining coordinates for the map parameter.

Map

Preview

By leveraging custom layouts, you can create unique video experiences tailored to your specific needs. This feature sets Eyeson apart as a highly configurable video API solution. Out of the box 10 spots are supported. These also can overlap in the order they are added.