Audio Connecting Indicator

Detect when a participant's audio track is published but not yet producing data, and show a loading indicator until the connection is ready.

The default ParticipantView UI already shows a small connecting indicator out of the box. This guide is for cases where you build a custom participant label and want to keep the same behavior.

Best Practices

• Show the indicator only when the participant has an audio track. Don't confuse "connecting" with "muted by choice."
• Use a subtle loading indicator rather than an intrusive banner.
• Dismiss the notification automatically once the track starts producing audio.

Detecting the connecting state

The SDK ships a useIsAudioConnecting hook. It returns true when the participant has an audio track that has not yet fired its unmute event, and false otherwise (no audio track, or the track is already producing data).

import { useIsAudioConnecting } from "@stream-io/video-react-sdk";

Internally the hook subscribes to mute and unmute events on the participant's MediaStreamTrack, so your UI updates automatically as the connection progresses.

Enhancing the participant label

In the Custom Label cookbook we showed how to create a custom ParticipantDetails component. We can enhance it by calling the hook to render a connecting indicator next to the participant's name.

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

const ParticipantDetails = () => {
  const { participant } = useParticipantViewContext();
  const isAudioConnecting = useIsAudioConnecting(participant);

  return (
    <div title={participant.name}>
      <span>{participant.name}</span>
      {isAudioConnecting && <span>Connecting to audio...</span>}
    </div>
  );
};

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