Optimize Bandwidth with Vonage Subscriber Auto Resolution
Published on October 31, 2024

Let’s say you have 2 cups, one large and one small. When filling the cups with water, would you pour the same amount in the small cup that you did in the large cup? If you did, there would be a mess from all the excess water that couldn’t fit in the smaller cup. In terms of a video call, the water represents the bandwidth used by a participant. For people with limited bandwidth available and/or pay for the data they consume, it will lead to a terrible experience.

What if there’s not enough bandwidth available? Screen shares of presentations with important data will be blurry and illegible. Just like pouring enough water into the large cup needed to fill the small cup. Not a very satisfying experience.

The best action is to fill the cups depending on their size. Vonage has now brought that ability to your video applications in one line of code! If your call’s layout has the active speaker’s video size much larger than the other participants, Vonage will send the appropriate resolutions for the video streams. A higher resolution for the speaker’s video stream and a smaller resolution for the other participants.

This is something you just have to see. Here it is in action:

Screen recording of a video chat application showing the resolution changing based on the size of some video elements.Subscriber Auto Resolution in action(Note: Image is sped up)

You can test it yourself with the one-click deployable demo we have provided.

With this feature enabled, Vonage will send the optimized resolution based on the size of the participant in the video call. 

As mentioned previously, it takes one line of code to get everything working. After a streamCreated event fires, set the preferredResolution to auto in the options object when subscribing to the stream available to the session.

const subscriberOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%',
  preferredResolution: 'auto', // add this line
};

const subscriber = session.subscribe(
  event.stream,
  'subscriber',
  subscriberOptions,
  handleError
);

One thing to take note of regarding this feature. For Vonage to be able to send the different resolutions, the video call must be a routed session through the Vonage Media Router. There are a couple of ways to ensure this happens:

  • Use another feature that uses the Vonage Media Router such as Archiving, Broadcast, Experience Composer, etc.

  • Have 3 or more participants in a video call

Get in Touch

That will end this little show and tell. Have you tried the demo and/or used the feature in an application? Let us know in the #video-api channel of the Vonage Community Slack.

Dwane HemmingsJavaScript Developer Advocate

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls-all at your fingertips.

Subscribe to Our Developer Newsletter

Subscribe to our monthly newsletter to receive our latest updates on tutorials, releases, and events. No spam.