Skip to main content

Custom Layouts & Voice Activation

· 3 min read
Christoph Lipautz

One advantage of the Eyeson single stream is that you can change the video podium layout without the need for client side updates. With latest release of the Eyeson API we extended this feature and added support of voice detect activation for the podium positions, lets have a closer look.

Cover image

Setup a Meeting​

The following sections use the widely distributed Unix tool curl and to ease the parsing of the JSON responses also jq, both are available for many Linux distributions. Lets start a meeting with disabled SFU mode and test different layouts and options.

$ which curl
/usr/bin/curl
$ which jq
/usr/bin/jq

# Start a meeting for room "demo" with user named "demo1"
$ API_KEY=... curl -X POST \
  -H "Authorization: $API_KEY" \
  -d "id=demo" \
  -d "name=Layout Demo" \
  -d "user[name]=demo1" \
  -d "options[sfu_mode]=disabled" \
  "https://api.eyeson.team/rooms" | jq ".links.gui, .access_key, .user.id"

Now we need to remember the access key, id of the user, and open the URL to the default web UI in any browser. You can export this details into environment variables $ export ACCESS_KEY=z9CaljR... and $ export USER1=605.... In order to see different layouts we should add several more users, export their user ids $ export USER2=... and open the web UI URLs in the same browser than before.

Three participants in auto layout mode

To set the first custom layout, we choose auto layout to fill up empty positions of the podium and choose them using voice detection.

# Update the podium layout using an empty space and user demo1, fill the empty
# space by voice activation.
$ curl -X POST \
  -d "layout=auto" \
  -d "users[]=" \
  -d "users[]=$USER1" \
  -d "voice_activation=true" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

You end up with a layout for two speakers, the right one is fixed and the left one will be replaced by any participant that has been active recently. Test the new layout by mute/unmute different participants.

Two person layout with first position using voice activation

You can choose between layouts of one, two, four or nine positions using the parameter users. When choosing the layout mode auto any free space will be filled automatically, whereas in mode custom they will stay empty and fixed.

The later can be useful if you set some background image and want to display a logo or similar on a fixed position without using an overlay on the video.

# Set a background image
$ curl -X POST \
  -d "url=https://techblog.eyeson.team/img/avatar.png" \
  -d "z-index=-1" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layers"

# Set a custom fixed layout with empty space and three users
$ curl -v -X POST \
  -d "users[]=" \
  -d "users[]=$USER1" \
  -d "users[]=" \
  -d "users[]=" \
  -d "users[]=" \
  -d "users[]=" \
  -d "users[]=$USER2" \
  -d "users[]=" \
  -d "users[]=$USER3" \
  -d "layout=custom" \
  -d "show_names=false" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

Custom 9 Layout with Background Image

Remember that you can always switch back to the default auto mode by skipping the users parameter.

# Reset layout
$ curl -X POST \
  -d "layout=auto" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

If you have a suggestion and use-case for a new podium layout do not hesitate to create a GitHub issue, containing a box-description and a mockup. For the calculation note that the video has a total width of 1280 and height of 960.