Connection Quality

Video/Audio conferencing is by nature a data intensive operation. Our 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.

Getting peer connection quality

Below is the interface for connection quality.

interface HMSConnectionQuality {
    peerID: string;
    downlinkQuality: number;
}

hmsStore.subscribe((connectionQuality) => {
    if (connectionQuality) {
        const quality = connectionQuality.downlinkQuality;
        // use the score to show some UI!
    }
}, selectConnectionQualityByPeerID(peerId));

function ConnectionQuality(peerId) {
    const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
    // use the score to show some UI!
    return <span>downlinkQuality</span>;
}

Connection Quality Score in Preview

To receive the score in preview as well, you can pass in the captureNetworkQualityInPreview flag as true in preview config while calling preview. The interface to get the quality score stays same as above which is for post joining the room.

actions.preview({..., captureNetworkQualityInPreview: true})

Score Interpretation

The networkQuality score will be a number 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

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.