Network Quality Indicator

Network conditions are not always perfect so instead of playing guessing games as to why is someone’s video so blurry our default ParticipantViewUI component comes equipped with connection quality indicator which provides general information about that participants network conditions in four states:

• unspecified
• poor
• good
• excellent

In this guide we’ll learn how to build and implement our own primitive connection quality indicator.

How to reach the state

Each StreamVideoParticipant has a connectionQuality property which by itself is just a numeric representation of values in a SfuModels.ConnectionQuality enum. To get a readable format out of it we’ll just pass the connectionQuality variable as a key to said enum:

import { SfuModels } from '@stream-io/video-react-sdk';

const readableConnectionQuality =
  SfuModels.ConnectionQuality[participant.connectionQuality];

console.log(readableConnectionQuality); // -> EXCELLENT

Network quality indicator component

You’ll most likely be displaying this indicator component inside each participant box (ParticipantView) within a call layout, you can learn more about ParticipantViewUI customizations in the participant view customizations guide.

import {
  SfuModels,
  useParticipantViewContext,
} from '@stream-io/video-react-sdk';

const MyNetworkQualityIndicator = () => {
  const { participant } = useParticipantViewContext();

  const readableConnectionQuality =
    SfuModels.ConnectionQuality[participant.connectionQuality];

  return (
    <span title={readableConnectionQuality}>
      {'⭐️'.repeat(participant.connectionQuality)}
    </span>
  );
};

const CustomParticipantViewUI = () => {
  return (
    <>
      <MyNetworkQualityIndicator />
      {/* your other custom UI elements */}
    </>
  );
};

Final steps

Now we can pass this custom ParticipantViewUI component down to our call layout components or directly to ParticipantView component in our custom call layout as described in the aforementioned ParticipantView customizations guide.