Audio Volume Indicator

In this documentation article, we will explore how to build a custom sound detection component by using useMicrophoneState() and our createSoundDetector() helper.

AudioVolumeIndicator component

The component will show the audio level changes by expanding and contracting a line.

The audio level is kept in component’s state. The sound detection is set up in an effect. Also, we make sure to call the clean-up function in the effect clean-up phase.

import { useEffect, useState } from "react";

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

export const AudioVolumeIndicator = () => {
  const { useMicrophoneState } = useCallStateHooks();
  const { isEnabled, mediaStream } = useMicrophoneState();
  const [audioLevel, setAudioLevel] = useState(0);

  useEffect(() => {
    if (!isEnabled || !mediaStream) return;

    const disposeSoundDetector = createSoundDetector(
      mediaStream,
      ({ audioLevel: al }) => setAudioLevel(al),
      { detectionFrequencyInMs: 80, destroyStreamOnStop: false },
    );

    return () => {
      disposeSoundDetector().catch(console.error);
    };
  }, [isEnabled, mediaStream]);

  if (!isEnabled) return null;

  return (
    <div
      style={{
        width: "100%",
        display: "flex",
        alignItems: "center",
        gap: "0.75rem",
        padding: "0 1.25rem 1rem",
      }}
    >
      <Icon icon="mic" />
      <div
        style={{
          flex: "1",
          background: "#fff",
          height: "5px",
          borderRadius: "4px",
        }}
      >
        <div
          style={{
            transform: `scaleX(${audioLevel / 100})`,
            transformOrigin: "left center",
            background: "var(--str-video__primary-color)",
            width: "100%",
            height: "100%",
          }}
        />
      </div>
    </div>
  );
};

Permission Requests

Network Quality Indicator