Audio Volume Indicator

Build a sound/volume indicator from the participant's audio state exposed through useCallStateHooks().

Best Practices

• Use participant state - On React Native the audio level and speaking state come from the participant object (reported by the SFU), not from a local Web Audio analyser.
• Provide visual feedback - Give a clear indication of microphone activity.
• Handle the muted case - Only show activity when the participant is not muted.

AudioVolumeIndicator component

Every participant exposes the following audio-related fields, derived from the SFU:

• audioLevel - a number between 0 (silence) and 1 (loud).
• isSpeaking - whether the participant is currently speaking.
• isDominantSpeaker - whether the participant is the dominant speaker in the call.

The example below reads the local participant's audioLevel and renders a bar that grows with the volume:

import { View } from "react-native";
import { useCallStateHooks } from "@stream-io/video-react-native-sdk";

export const AudioVolumeIndicator = () => {
  const { useLocalParticipant, useMicrophoneState } = useCallStateHooks();
  const localParticipant = useLocalParticipant();
  const { isMute } = useMicrophoneState();

  const audioLevel = localParticipant?.audioLevel ?? 0;
  const isSpeaking = !isMute && (localParticipant?.isSpeaking ?? false);

  return (
    <View
      style={{
        height: 8,
        minWidth: 8,
        borderRadius: 4,
        // scale the width with the current audio level (0 to 1)
        width: `${Math.round(audioLevel * 100)}%`,
        backgroundColor: isSpeaking ? "#005fff" : "#4c525c",
      }}
    />
  );
};

Map audioLevel, isSpeaking, and isDominantSpeaker to whatever visual you prefer — a bar, a set of dots, or an animated waveform.