Audio Volume Indicator

In this documentation article, we will explore how to build sound detection by using our useSpeechDetection() hook.

AudioVolumeIndicator component

With invoking our useSpeechDetection() hook, we get info about the audio level and whether sound is detected from the microphone. The audioLevel can have values from 0 to 1.

The SpeechIndicator component will show sound detection by dynamically expanding and contracting three vertical lines when we pass isSpeaking=true or three static dots when isSpeaking=false.

This can be useful in Lobby components where the call is not started yet.

import {
  useSpeechDetection,
  SpeechIndicator,
} from "@stream-io/video-react-native-sdk";

export const AudioVolumeIndicator = () => {
  const { audioLevel, isSoundDetected } = useSpeechDetection();
  const isSpeaking = isSoundDetected && audioLevel > 0.1;

  return <SpeechIndicator isSpeaking={isSpeaking} />;
};