Connection Quality

Audio Video Conferencing is by nature a network data-intensive operation. The 100ms SDK attempts to stabilize connections especially if subscribe degradation is turned on in the template but it's possible for really bad connections users will still have problems.

It can be helpful to measure a user's connection speed before joining a Room to set expectations or decide to have them join with video off etc. Letting the participants know of each other's connection status is also a great value addition.

Once you have joined the room, you can get a network quality score for all the Peers including yourself. You can also get the current user's connection quality score when in preview. The score ranges from -1 to 5, 5 being the highest(Good Network) and 0 being the lowest(No Network). -1 indicates an undefined state that either the score hasn't yet been determined or it couldn't be determined.

The download will be continued for at most a fixed number of seconds (for example: 10 seconds) and the speed during that interval is calculated. The entire file may not be downloaded if it exceeds the timeout.

DNS time is not counted in this, only throughput is measured.

Requesting/Reading Network Quality Updates

By default, network quality updates are only sent if requested. To request for getting network quality call enableNetworkQualityUpdates like so -

  useEffect(() => {
    // To Start receiving network quality updates
    hmsInstance.enableNetworkQualityUpdates();

    // To Stop receiving network quality updates
    return () => hmsInstance.disableNetworkQualityUpdates();
  }, [hmsInstance]);

Network Quality information for every peer is available on networkQuality property of HMSPeer object. networkQuality property value is an instance of HMSNetworkQuality class -

interface HMSNetworkQuality {
    downlinkQuality: number;
}

On networkQuality property value, we have downlinkQuality property which represents the peers' network quality. This is a number ranging from -1 to 5. To know about the meaning of each value refer to Interpreting the Values section.

Whenever the network quality of a peer changes, HMSUpdateListenerActions.ON_PEER_UPDATE event is emitted with HMSPeerUpdate.NETWORK_QUALITY_UPDATED update type. Then inside the function subscribed to this event, you can check networkQuality property on the updated HMSPeer object and update the UI accordingly.

const onPeerListener = (data: { peer: HMSPeer, type: HMSPeerUpdate }) => {
    const { peer, type } = data;

    // Network quality changed for {peer}
    if (type === HMSPeerUpdate.NETWORK_QUALITY_UPDATED) {
        console.log(`Network Quality of ${peer.name}: ${peer.networkQuality?.downlinkQuality}`);
    }
};

hmsInstance.addEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE, onPeerListener);

Requesting/Reading Network Quality Updates in Preview

When creating a HMSConfig object to request a preview, You have to set the captureNetworkQualityInPreview property to true to get the users' downlink network quality in preview room state.

When information is available, HMSUpdateListenerActions.ON_PEER_UPDATE event is emitted with HMSPeerUpdate.NETWORK_QUALITY_UPDATED update type. Rest is same as mentioned in above section.

import { HMSConfig } from '@100mslive/react-native-hms';

const config = new HMSConfig({
    authToken: '...jgvc...',
    username: 'John Applesead',
    captureNetworkQualityInPreview: true
});

// hms instance acquired by build method
hmsInstance.preview(config);

Refer to Preview Guide to learn more about room preview

Interpreting the Values

Peer.networkQuality?.downlinkQuality will be a value in range -1 to 5.

• -1 -> Undefined - yet to be determined or not enough data to determine
• 0 -> Disconnected or error in measuring score(in preview)
• 1 -> Very Bad Connection
• 2 -> Bad Connection
• 3 -> Moderate Connection
• 4 -> Good Connection
• 5 -> Excellent Connection

Showing in the UI

You can show this as a network icon on every peer tile or show only a list of peers not having good connection. Feel free to checkout how the code from our dashboard app's implementation here where we show a network bar on each peer's tile as well in the participant list with a tooltip describing the connection state.