Tackling network changes: keeping calls stable and reliable

In the technology-driven world, reliable and high-quality communication is no longer a luxury—it’s a necessity. Whether you’re in a business meeting, participating in an online class, the ability to maintain a stable connection during a call is crucial. However, network changes—such as switching from Wi-Fi to cellular data or experiencing fluctuations in signal strength—can disrupt this stability. These changes can lead to call drops, degraded audio or video quality, and frustrating interruptions, making the experience less than ideal. Ensuring the uninterrupted transition and maintaining call quality is important for providing a reliable and consistent user experience, particularly in professional or critical scenarios where communication stability is essential.

In this blog post, we’ll explore why tackling network changes during a call is fundamental and how you can address these issues using ConnectyCube’s solutions.

How ConnectyCube Addresses Network Changes

Normally, in a case of short network interruptions, the ConnectyCube SDK will automatically restore the call so you can see via onSessionConnectionStateChangedListener callback with connectionState changing to DISCONNECTED and then again to CONNECTED.

But not all cases are the same, and in some of them the connection needs to be manually refreshed due to various issues like NAT or firewall behavior changes or even longer network environment changes, e.g. when a user is offline for more than 30 seconds.

This is where ICE restart (Interactive Connectivity Establishment Restart) helps to re-establish the connection to find a new network path for communication. The correct and recommended way for an application to handle all such ‘bad’ cases is to trigger an ICE restart when the connection state goes to either FAILED or DISCONNECTED for an extended period of time (e.g. > 30 seconds).

Here’s a detailed explanation of how ConnectyCube tackles these network changes:

1. ICE restart mechanism:

• When a change in the network environment is detected, such as a switch from Wi-Fi to mobile data or vice versa, ConnectyCube initiates an ICE Restart. This process involves re-negotiating the network paths and finding the best available route for media transmission.
• The ICE Restart allows the system to update the ICE candidates (network connection options) and SDP (Session Description Protocol) parameters, which are critical for maintaining a stable connection.

2. Automatic detection and handling:

• ConnectyCube’s SDK automatically detects when a network change occurs. It triggers the ICE Restart without requiring manual intervention from the user or developer. This automation ensures that video calls continue seamlessly, even when there are changes in the network conditions.

3. Seamless transition:

• By using ICE Restart, ConnectyCube ensures a smooth transition between different networks. It minimizes the disruption of ongoing calls and maintains the quality of the video and audio streams.
• This approach also helps in reducing latency and avoiding packet loss, which are common issues during network switches.

4. Developer control:

• Developers using the ConnectyCube SDK have access to event listeners and handlers that provide notifications about network changes and ICE Restart events. This feature allows developers to implement additional logic if needed, such as updating UI elements or logging events for analytics purposes.

5. Enhanced user experience:

• The seamless handling of network changes improves the overall user experience, as users do not need to manually reconnect or restart the call. The automated ICE Restart process takes care of maintaining the call quality, ensuring that users enjoy a continuous and high-quality video calling experience.

Following is the preliminary code snippet regarding how to work with ICE restart for Web and React Native apps:

1. disable the call termination logic after the network is disconnected for > 30 seconds by increasing the videochat.disconnectTimeInterval value to e.g. 5 mins.

   const appConfig = {
     videochat: {
       disconnectTimeInterval: 300,
     }
   };
   
   ConnectyCube.init(credentials, appConfig);

2. define a variable which can track the Internet connection state:

   let isOnline = window.navigator.onLine;
   
   window.onoffline = () => {
     isOnline = false;
   };
   
   window.ononline = () => {
     isOnline = true;
   };

3. define a function that will perform ICE restart:

   async maybeDoIceRestart(session, userID) {
     try {
       // firstly let's check if we are still connected to chat
       await ConnectyCube.chat.pingWithTimeout();
   
       // do ICE restart
       if (session.canInitiateIceRestart(userID)) {
         session.iceRestart(userID);
       }
     } catch (error) {
       console.error(error.message);
   
       // chat ping request has timed out,
       // so need to reconnect to Chat
   
       await ConnectyCube.chat.disconnect();
       await ConnectyCube.chat.connect({
         userId: currentUser.id,
         password: currentUser.password,
       })
   
       // do ICE restart
       if (session.canInitiateIceRestart(userID)) {
         session.iceRestart(userID);
       }
      }
     }

4. define a ConnectyCube.videochat.onSessionConnectionStateChangedListener callback and try to perform ICE restart if not automatic call restoration happened after 30 seconds:

   iceRestartTimeout = null;
   needIceRestartForUsersIds = [];
   
   ConnectyCube.videochat.onSessionConnectionStateChangedListener = (
     session,
     userID,
     connectionState
   ) => {
     console.log(
       "[onSessionConnectionStateChangedListener]",
       userID,
       connectionState
     );
   
     const { DISCONNECTED, FAILED, CONNECTED, CLOSED } =
       ConnectyCube.videochat.SessionConnectionState;
   
     if (connectionState === DISCONNECTED || connectionState === FAILED) {
       iceRestartTimeout = setTimeout(() => {
          // Connection not restored within 30 seconds, trying ICE restart...
          if (isOnline) {
            maybeDoIceRestart(session, userID);
          } else {
            // Skip ICE restart, no Internet connection
            this.needIceRestartForUsersIds.push(userID);
          }
        }, 30000);
      } else if (connectionState === CONNECTED) {
        clearTimeout(iceRestartTimeout);
        iceRestartTimeout = null;
   
        needIceRestartForUsersIds = [];
      } else if (connectionState === CLOSED) {
        needIceRestartForUsersIds = [];
      }
    };

5. in a case a user got working Internet connection later, do ICE restart there:

   window.ononline = () => {
     if (!isOnline) {
       if (session && needIceRestartForUsersIds.length > 0) {
         for (let userID of needIceRestartForUsersIds) {
           maybeDoIceRestart(session, userID);
         }
       }
     }
     isOnline = true;
   };

Ready to get started?

If you’re looking to implement video calling features in your application, consider using ConnectyCube’s powerful SDKs to ensure that your users enjoy a unbroken and reliable communication experience. Visit our developer documentation for more information, or get in touch with our team to discuss your needs and how we can help you build robust communication solutions.

Explore the features of ConnectyCube and see how you can improve the quality of your communication services. Sign up for FREE and enjoy the generous free tier to start building your first app!

×

Subscribe for updates

Get updates on our new posts by subscribing to our newsletter

Subscribe

Leave this field empty if you're human: