Connection Quality

Network Icons

Video/Audio conferencing is by nature a 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 that users will still have problems.

It can be helpful to measure a user's connection speed before joining a room in order 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 current user's connection quality score when in preview. The score ranges from -1 to 5, 5 being the hightest(Good Network) and 0 being the lowest(No Network). -1 indicates an undefined state that is either the score hasn't yet been determined or it couldn't be determined.

⚠️ The downlink speed is measured by having the user download a file (1mb as of this writing) after the websocket connection is established during a preview.

The download will be continued for at most a fixed number of seconds (eg: 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 a Network Quality Update in Preview

When creating an HMSConfig object to request a preview, set the captureNetworkQualityInPreview to true to measure the user's downlink network quality.

When available, the information will be returned in onPeerUpdate of the HMSPreviewListener in the update type HMSPeerUpdate.NETWORK_QUALITY_UPDATED. It can be retrieved out of the HMSPeer object's networkQuality property.

import { HMSConfig, } from '@100mslive/react-native-hms'; const config = new HMSConfig({ authToken: token, username: userID, captureNetworkQualityInPreview: true, }); // hms instance acquired by build method hmsInstance?.preview(config); hmsInstance?.join(config);

Here's the class definition of HMSNetworkQuality, which is a property on the HMSPeer.

class HMSNetworkQuality { downlinkQuality: number; }

Interpreting the Values

hmsInstance?.localPeer?.networkQuality?.downlinkQuality will be a value between -1 and 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

0 score in preview could also mean a failure in measuring the network due to firewall block if the internet otherwise looks good.

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.