Network Quality Indicator

The default ParticipantViewUI includes a connection quality indicator showing participant network conditions: unspecified, poor, good, or excellent.

Best Practices

• Display quality indicator inside ParticipantViewUI for each participant.
• Use SfuModels.ConnectionQuality enum for readable quality values.
• Consider showing warnings only for poor/unspecified to reduce visual noise.

This guide shows how to build a custom 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.