Unstable Connection

Indicate when a participant has unreliable connection. The default ParticipantViewUI shows a notification when connection quality is poor.

Best Practices

Only show warning for ConnectionQuality.POOR to avoid notification fatigue.
Consider showing only for local participant (their own connection issues).
Place notification prominently within ParticipantViewUI.

Custom implementation

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

const PoorConnectionNotification = () => {
  const { participant } = useParticipantViewContext();
  const { connectionQuality, isLocalParticipant } = participant;

  if (
    isLocalParticipant &&
    connectionQuality === SfuModels.ConnectionQuality.POOR
  ) {
    return <div>Poor connection quality</div>;
  }
  return null;
};

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

Final steps

Pass this custom ParticipantViewUI to layout components or ParticipantView as described in the ParticipantView customizations guide.

import { useCallStateHooks, ParticipantView } from "@stream-io/video-react-sdk";

import { CustomParticipantViewUI } from "../ParticipantViewUI";
import { CustomVideoPlaceholder } from "../VideoPlaceholder";

export const CustomCallLayout = () => {
  const { useParticipants } = useCallStateHooks();
  const otherParticipants = useParticipants();

  return (
    <div>
      {/* your other custom UI elements */}
      {otherParticipants.map((participant) => (
        <div key={participant.sessionId}>
          <ParticipantView
            participant={participant}
            ParticipantViewUI={CustomParticipantViewUI}
            VideoPlaceholder={CustomVideoPlaceholder}
          />
        </div>
      ))}
    </div>
  );
};

Network Quality Indicator

Network Disruptions