Vonage, with a decade of video development expertise, has created a simple high-level API called Video Express to accelerate the development and integration of multiparty video into web applications.
Let’s start by defining what multiparty means. This is when a video call has multiple participants that are both publishing their audio and video streams while simultaneously subscribing to everyone else’s streams.
Previously, it was quite common to have teams of people in the same room and then get on a video call with a team in another room.
2 teams 2 streams
As you may have experienced yourself lately, things are shifting towards individuals calling in from different locations.
6 people 36 streams
As you can see from the image above, it can quickly become a complex challenge to keep up with all the connections from the participants.
This is where Video Express comes in. Maybe you are new to developing applications that integrate video or a seasoned developer that wants to focus on other things. Video Express helps remove the complexity PLUS optimizes for quality, CPU usage, and layout! That’s why it’s awesome!
Here is Video Express used in a vanilla JavaScript project you can view. There is a quick deploy button, so you can just input your API Key and Secret in the .env file and you will have your own working example. This is a bare-bones implementation to highlight Video Express.
See the comparison below of the starter code needed to create a video chat.
Vonage Video API JavaScript Client SDK
const session = OT.initSession(this.apiKey, this.roomId); // Init session
session.on('sessionConnected', ...); // Handle session connected events
session.on('sessionDisconnected', ...); // Handle session end
session.on('streamCreated', ...); // Subscribe to newly published streams
session.on('streamDestroyed', ...); // Clean up on stream end
session.on('connectionCreated', ...); // Handle connection events (join)
session.on('connectionDestroyed', ...); // Handle disconnect events (leave)
// Build your own UI / Layout
// Active Speaker Detection
// Video / Audio Optimizations
const pub = OT.initPublisher(targetElement, options, (err) => console.error(err)); // Create a publisher
session.publish(pub, undefined, err => { // Try to publish media
if (err) {
reject(err);
} else {
resolve();
}
});Vonage Video Express
const room = new VideoExpress.Room({ apiKey, sessionId, token, roomContainer: 'roomContainer’ });
room.join();Video Express handles all the publishing and subscribing of all the participants of the video call. Just tell it the id of the HTML element (in this example, "roomContainer") to place the "Room" into, join and that’s it. Read our documentation for more on what you can do.
Quality Manager diagram
To help create the best quality video call, Video Express will apply various methods automatically. These include maximizing tile sizes for visible video streams and pausing the ones that can’t be seen. It will also adjust resolution and frame rates depending on network conditions and CPU. By dynamically setting higher priorities on speakers and screen shares, the things that need the focus can achieve the best quality.
To create a great user experience, Video Express will optimize things on the client-side. For example, every participant after 10 is automatically muted to avoid very noisy rooms. When a displayed video gets smaller in size, a smaller stream is requested to help reduce the bandwidth needed for smooth playback.
Example of a raw, unoptimized video session
Table with data of an unoptimized multiparty video session
Example of an optimized video session
Table with data of an optimized multiparty video session
Layout Manager diagram
Out of the box, Video Express will automatically adjust the layout of the streams based on screen size and the number of participants. Screen shares and the active speaker are given a higher priority or take up more space.
Another feature that Video Express handles for you is allowing the user to preview their video and audio before joining the room. Here is some sample code:
const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia({
targetElement: 'previewContainer',
publisherProperties: {
resolution: '1280x720',
audioBitrate: 15,
},
});
The final feature of Video Express that I want to point out is how screen sharing is handled.
const startScreensharing = () => {
room.startScreensharing("myScreenshare");
}
const stopScreensharing = () => {
room.stopScreensharing();
}
screenshareStartBtn.addEventListener("click", startScreensharing, false);
screenshareStopBtn.addEventListener("click", stopScreensharing, false);That's it! With these few lines of code, you can share your screen and Video Express will reconfigure the room's layout to make it the priority.
Ready to build something amazing?!
Take a look at the Video Express documentation for more details.
Play around with the basic starter project.
Show us what you are working on and give us any feedback in our Community Slack Channel.
){kind=small}
