Define your overlay and background layer with dynamic content and let the library create the image for you on-the-fly.
Embed Eyeson video meeting in your website with IFrame API
Using the new IFrame API is the easiest way to embed Eyeson video conferencing into your site or app using a few lines of HTML and Javascript.
- Integrate the Eyeson IFrame API script
<script src="https://app.eyeson.team/iframe-api.js"></script>
- Provide an HTML element as meeting container
<div id="meeting"></div>
- Call the
EyesonIframe
function and let the magic happennew EyesonIframe('#meeting', { accessKey: '...' });
IFrame API creates an iframe HTML element with all correct settings and loads Eyeson's default UI.
In advanced mode, methods to interact with Eyeson UI inside the iframe are available, like present, chat, snapshot, and also meeting events for the user like join and leave can be observed.
Introducing the API meeting observer!
We're adding a new way for developers to receive information about a meeting in real-time!
Introducing the "Meeting Observer", a one-way WebSocket connection that allows to boost your application's meeting controls.
It is easier to use than the existing WebHooks and even more powerful, since a lot more information can be observed.
API playback changes
We've made changes to the playbacks API that you need to be aware of!
play_id
is generated if omittedplayback_update
sequence has changedreplacement_id
takes userId, not clientId- EyesonJS (< 1.9.0) react to
playback_update
if_src: 'actioncable'
- Update EyesonJS to v1.9.0 (npm or yarn)
Call control devices - WebHID API
Call Control allows you to control the meeting directly from your USB or Bluetooth devices.
It is an addition to your existing meeting app as it synchronizes the call and mute states between meeting and paired devices. It's available in eyeson-js 1.8.9.
Adaptive video layout with example app
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
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 the video podium.
[
[320, 0, 640, 360, "auto"],
[320, 360, 640, 360, "auto"]
]