Skip to main content

Adaptive video layout with example app

· 4 min read
Dugar Enkhtuya
Code Enthusiast

Thanks to the implementation of Custom layout map API in Eyeson, you can now change the layout without having the need for pre-defined layouts provided by us. This has some major upsides regarding the control over the stream content.

In this tutorial we want to use the adaptive layout to arrange users around an image for a seamless presentation.

Example web app

You can instantly update the stream content during a live session using some HTML and Javascript.

This example includes

  • a local image uploading script which draws it on a canvas
  • layout calculation depending on the image size
  • sending canvas and calculated layout to show in Eyeson via AJAX requests

Custom layout map API

· 4 min read
Stefan Benicke
Senior Developer @ Eyeson

Developers are free to create and apply their own custom layout maps whenever they need it! You need a special layout for your app? Just go ahead and create it!

The existing layout endpoint is extended with the new parameter map. The map is a JSON stringified list of box-definition-lists with x, y, width, height, and objectFit definitions for each box.

Here's an example map that places 2 boxes (640x360px) above eachother in the center of Eyeson One View's stream.

[
[320, 0, 640, 360, "auto"],
[320, 360, 640, 360, "auto"]
]

Snapshot API changes

· 3 min read
Stefan Benicke
Senior Developer @ Eyeson

This change affects Custom UIs using Eyeson Javascript or one of the mobile SDKs.

When a new snapshot is created, the update event will only include a list with the latest snapshots instead of all existing snapshots of the current meeting.

caution

The old snapshot behaviour will shut down on 11th of September.

Furthermore, there will be 2 new API endpoints for retrieving the most recent snapshot information.

Customize the meeting video background color via API

· 3 min read
Stefan Benicke
Senior Developer @ Eyeson

We provide the new option background_color to let you customize the meeting video background color to your needs.

The option is only available on the meeting start request, see API room reference. It can not be changed during the meeting.

The following example shows how to use the new option with curl.

$ curl -X POST \
-H "Authorization: YOUR_API_KEY" \
-d "user[name]=John Doe" \
-d "options[background_color]=#121212" \
https://api.eyeson.team/rooms

Use local video overlay to make it feel faster and with mirrored display

· 6 min read
Stefan Benicke
Senior Developer @ Eyeson

Eyeson video meetings are based on the MCU+ Single-Stream Technology that provides many advantages like "everyone sees the same at the same time", it lets you create virtual rooms with its layout and layer features and much more.

But this also means, that you see yourself like all other participants see you. And unfortunately, this is not what you are used to. In other meeting tools your local video is usually shown instantly and mirrored based on the following trick:

Choose pre-selected screensharing media

· 2 min read
Stefan Benicke
Senior Developer @ Eyeson

What is this about?

In version 109, Chrome has rolled out a new media-picker where the order of display surfaces has changed. It has changed from screens/windows/tabs to tabs/windows/screens. Furthermore the pre-selection has changed too - from screens to tabs. Lucky for us, since version 107 of Chrome and Chromium based browsers, like Edge and Opera, there's an option that gives you back the control.

This article is showing how it can be controlled in your custom UI with eyeson-js since v1.8.5.

Cover image

Enjoy HD video meetings with widescreen mode

· 2 min read
Stefan Benicke
Senior Developer @ Eyeson

We're introducing Eyeson video meetings in 16:9 HD video format!

Cover image

How to start

The default aspect-ratio is still 4:3. In order to activate widescreen mode (aspect-ratio 16:9), you have to start a meeting via API and set the widescreen option to true.

For example using curl:

curl -X POST \
-H "Authorization: YOUR_API_KEY" \
-d "user[name]=John Doe" \
-d "options[widescreen]=true" \
https://api.eyeson.team/rooms