Skip to content
a close up of a hand working on a laptop
Iryna SydorchukNovember 30, 20232 min read

Adaptive Video Layout with Example App: Control Your Stream Presentation

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 like to elaborate on leveraging 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 to suit your specific needs. Whether you're hosting a webinar, conducting a team meeting, or giving a presentation, adaptive layout ensures that your content is displayed in an ordered manner.

Layout mapping and visual mapping serve as your debugging tools, ensuring 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. If you are interested in more details and code snippets, don’t hesitate to read our tech blog article about layout configuration or download the app and try it yourself.  

  • Send background and layout to Eyeson

The API's layer endpoint can 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:

imageratio-05e375b0369d89cf1862b03112e00ca2

 

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

RELATED ARTICLES