Stats For Nerds

This feature is still in Beta. To know more or report any issues, feel free to reach out to us over Discord.

Sometimes you need a way to capture certain metrics related to a call. This may be helpful if you want to tailor the experience to your users or debug issues. Typical metrics of interest are audio/video bitrate, round trip time, total consumed bandwidth and packet loss. getStats has got your back.

With getStats you could get statistics for the whole session and individual tracks of all the peers in the room.

Stats On Tile

Initialization


import { HMSReactiveStore } from '@100mslive/hms-video-store';

const hms = new HMSReactiveStore();

export const hmsStats = hms.getStats();


import { HMSRoomProvider } from '@100mslive/react-sdk';

export function App() {
    return (
        <HMSRoomProvider isHMSStatsOn={true}>
            <MyApp />
        </HMSRoomProvider>
    );
}

This initializes the SDK to collect stats from WebRTC periodically and store it in a reactive Zustand store called HMSStatsStore. This is similar to HMSStore in terms of retrieving data from the store.

If you have Redux Devtools installed(which is highly recommended), you could open the HMSStatsStore to get a quick sense of the quality of the call by looking at the bitrate, packets lost, jitter, etc...

Stats Redux Store

Retrieving data from HMSStatsStore

Retrieving data is similar to how you do it with HMSStore.

You have getState and subscribe methods, if you're using our JS SDK and useHMSStatsStore, if you're using our react SDK and a bunch of useful selectors under selectHMSStats.

Global Level Stats for Local Peer

Use the selectHMSStats.localPeerStats selector to get the combined stats for the room for local peer.


import { selectHMSStats } from '@100mslive/hms-video-store';

const renderLocalPeerStats = (localPeerStats) => {
    if (!localPeerStats) return;

    console.log('Publish Bitrate', localPeerStats.publish?.bitrate);
    console.log('Subscribe Bitrate', localPeerStats.subscribe?.bitrate);
    console.log('Total Bytes Sent', localPeerStats.publish?.bytesSent);
    console.log('Total Bytes Received', localPeerStats.subscribe?.bytesReceived);
    console.log('Total Packets Lost', localPeerStats.subscribe?.packetsLost);
    console.log('Total Jitter', localPeerStats.subscribe?.jitter);
};

hmsStats.subscribe(renderLocalPeerStats, selectHMSStats.localPeerStats);


import { selectHMSStats, useHMSStatsStore } from '@100mslive/react-sdk';

const renderLocalPeerStats = (localPeerStats) => {
    if (!localPeerStats) return;

    console.log('Publish Bitrate', localPeerStats.publish?.bitrate);
    console.log('Subscribe Bitrate', localPeerStats.subscribe?.bitrate);
    console.log('Total Bytes Sent', localPeerStats.publish?.bytesSent);
    console.log('Total Bytes Received', localPeerStats.subscribe?.bytesReceived);
    console.log('Total Packets Lost', localPeerStats.subscribe?.packetsLost);
    console.log('Total Jitter', localPeerStats.subscribe?.jitter);
};

const LocalPeerStats = () => {
    const localPeerStats = useHMSStatsStore(selectHMSStats.localPeerStats);
    useEffect(() => {
        renderLocalPeerStats(localPeerStats);
    }, [localPeerStats]);
};

Individual Track Stats

Use the selectHMSStats.trackStatsByID selector to get an individual track's stats.


import { selectHMSStats } from '@100mslive/hms-video-store';

const renderTrackStats = (trackStats) => {
    if (!trackStats) return;
    console.log('Stat Type', trackStats.type); // 'outbound-rtp' for local tracks, 'inbound-rtp' for remote tracks
    console.log('Track Type', trackStats.kind); // 'video' | 'audio'
    console.log('Bitrate', trackStats.bitrate);
    console.log('Packets Lost', trackStats.packetsLost);
    console.log('Packets Lost Rate', trackStats.packetsLostRate);
    console.log('Jitter', trackStats.jitter);

    const isLocal = trackStats.type.includes('outbound');
    if (isLocal) {
        console.log('Bytes Sent', trackStats.bytesSent);
    } else {
        console.log('Bytes Received', trackStats.bytesReceived);
    }

    if (trackStats.kind === 'video') {
        console.log('Frame Width', trackStats.frameWidth);
        console.log('Frame Height', trackStats.frameHeight);
        console.log('Framerate', trackStats.framesPerSecond);

        if (isLocal) {
            console.log('Quality Limitation Reason', trackStats.qualityLimitationReason);
        }
    }
};

hmsStats.subscribe(renderTrackStats, selectHMSStats.trackStatsByID('some-track-id'));


import { selectHMSStats, useHMSStatsStore } from '@100mslive/react-sdk';

const renderTrackStats = (trackStats) => {
    if (!trackStats) return;
    console.log('Stat Type', trackStats.type); // 'outbound-rtp' for local tracks, 'inbound-rtp' for remote tracks
    console.log('Track Type', trackStats.kind); // 'video' | 'audio'
    console.log('Bitrate', trackStats.bitrate);
    console.log('Packets Lost', trackStats.packetsLost);
    console.log('Packets Lost Rate', trackStats.packetsLostRate);
    console.log('Jitter', trackStats.jitter);

    const isLocal = trackStats.type.includes('outbound');
    if (isLocal) {
        console.log('Bytes Sent', trackStats.bytesSent);
    } else {
        console.log('Bytes Received', trackStats.bytesReceived);
    }

    if (trackStats.kind === 'video') {
        console.log('Frame Width', trackStats.frameWidth);
        console.log('Frame Height', trackStats.frameHeight);
        console.log('Framerate', trackStats.framesPerSecond);

        if (isLocal) {
            console.log('Quality Limitation Reason', trackStats.qualityLimitationReason);
        }
    }
};

const TrackStats = (trackID) => {
    const trackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(trackID));
    React.useEffect(() => {
        renderTrackStats(trackStats);
    }, [trackStats]);
};

You could also use selectHMSStats.localAudioTrackStats and selectHMSStats.localVideoTrackStats to get stats of local audio track and local video track respectively.

For list of other stats-related selectors, look at selectHMSStats.

Hand Raise HLS Stats

Have a suggestion? Recommend changes ->