Eyeson Blog

Adaptive Video Layout with Example App: Control Your Stream Presentation

Written by Iryna Sydorchuk | November 30, 2023

Being able to have customized layouts and optimized presentations is crucial in the world of online presence and corporate branding. With the introduction of our latest Custom Layout Map API, users no longer need to set any layouts themselves; Eyeson manages the stream content dynamically based on the file size you are presenting, eliminating the reliance on pre-defined layouts. This development opened up the world of exciting possibilities for seamless workflows and pretty presentations for video calls, putting you in the director's chair of your video meeting moderation. In this tutorial, we'd want to elaborate on how to leverage the power of adaptive layout to arrange users around an image for a polished and engaging presentation. 

 

The Power of Adaptive Layout

Adaptive layout is all about flexibility. It empowers you to dynamically arrange participants' video feeds and other content elements in a way that suits your specific needs. Whether you're hosting a webinar, conducting a team meeting, or giving a presentation, the adaptive layout ensures that your content is displayed in an ordered manner.

Layout mapping and visual mapping serve as your debugging tools to ensure that every element of customized layouts lines up perfectly, leaving no room for "it works on my machine" excuses.

 

How to Use Adaptive Layout

Using Eyeson's adaptive layout is a straightforward process:

  • Upload an image
  • Draw the canvas content

Depending on the uploaded imageRatio, the coordinates of the image and participants are calculated and visualized in the canvas. Also an adjustable spacing parameter gap is added. In case you are interested in more details and code snippets, don’t hesitate to read our tech blog article about layout configuration as well as download the app and try it yourself.  

  • Send background and layout to Eyeson

The API's layer endpoint has the capability to accept a binary image file as an input parameter. 

Furthermore, the layout endpoint of the API is designed to receive a layout configuration that mirrors the content displayed on the canvas.

 

Adaptive Layout In Action

Here’s the end result and how images with various ratios are performing to show the adaptive layout:

 

Request a demo to know more. 

Conclusion

Eyeson API’s Custom Layout Mapping empowers you to create adaptive video layouts, enhancing your control over stream content presentation. By following this example, you can seamlessly integrate dynamic layout changes into your live sessions, ensuring an engaging and polished experience for your audience. Grab your cup of Java, experiment with different image aspect ratios and layout configurations to take your video content to the next level. The possibilities are endless, and Eyeson's API makes it all possible.

More Resources