Disable Video on Poor Networks

We often take for granted just how connected we are in today’s world. From free WiFi in coffee shops to 4G and 5G cell towers spread across the country, there is almost always a way to be connected to the internet. While this presents a great opportunity to enable live video and communication in a variety of locations, there are still times when the quality of the connection does not fully support the experience you would like your customers to have.

It is important to design into your application how the user experience will adapt to poor network connectivity and progressively worse conditions.  In this blog, we will showcase how to monitor network conditions and what we recommend at each of these stages.  The suggestions provided will be from the perspective of the sender of live audio and video specifically on an SFU Upstream Connection.

To begin, let’s define a mechanism for monitoring the network quality of your SFU upstream connection. The first stage in this is determining the network quality. This can simply be done by calling the following function on your connection object.

var networkQuality = connection.getNetworkQuality();

We currently use the round trip time of the packets on the connection to determine network quality. There may be other statistics that provide a better indication of network quality based on your situation.

Next you should establish some rules about what defines a good connection and at what breakpoints you should adjust your experience.  The value returned will be 1 for a perfect network and 0 for no network connection. In our example, we will disable the video if the quality value falls below 0.5 and enable it if the network quality rises above 0.7.

Based on these rules, we can construct a helper function to manage the upstream connection based on the network quality value.

let checkNetworkQuality = () => {

     var networkQuality = connection.getNetworkQuality();

      if (lastQuality != networkQuality) {

           writeStatus("Network Quality changed to: " +networkQuality);

           if (networkQuality >= 0 && networkQuality <= 0.5 && videoEnabled) {

                 writeStatus("Network Quality is below threshold. Disabling video.");

                 disableVideo();

        } 
  
           else if (networkQuality > 0.7 && !videoEnabled) {

                 writeStatus("Network Quality is above threshold. Enabling video.");

                reEnableVideo();

        }

    }

}

Now that we have our logic defined, it is time to set our check interval. Checking too frequently can lead to a bad user experience, and if you wait too long, your customer may have a bad experience that could have been mediated. For our example, we will check our network quality and adjust it every 15 seconds.

interval = window.setInterval(checkNetworkQuality, 15000);

While this example is fairly straightforward, this can be combined with other strategies such as adjusting the bitrate you are using to send audio and video on your upstream connection as discussed in our previous blog.

In this scenario, you may want to define some additional breakpoints. The following may be a good starting point:

• Network Quality > 0.8 - Continue to stream at full bitrate and quality
• Network Quality > 0.6 - Drop the Bitrate by 25%
• Network Quality < 0.4 - Disable Video
• Network Quality > 0.5 - Enable Video

These breakpoints and decisions should be made as a result of testing how your application behaves under network conditions, what quality video you stream, and how much you are willing to degrade the video quality before shutting it off altogether.

If you want to see this in action, please check out the full application in this demo and check out the code for this example here.

If you are interested in building this out further and exploring this with some of the other examples we have discussed in our blogs such as the chat example, please sign up for a free 30-day trial and build your own application!

Need assistance in architecting the perfect WebRTC application? Let our team help out! Get in touch with us today!