Skip to content

one-view-layouts-public-safety-v2

Eyeson One View API

Merge all sources into a single video stream and achieve complete sync.

salesforce
Eyeson for Salesforce
Video meetings inside Salesforce, guided workflows & compliant document sharing.
record
Eyeson Stream Recorder
An unmatched solution for capturing streams across any sector.
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 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:

a sequence of images that show different layout possibilities

 

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