Speaking While Muted

In this cookbook, we will explore the ways to remind users they are speaking while being muted. The React SDK bundles SpeakingWhileMutedNotification component, but we will discover how to build our own component.

Speaking-while-muted notification component

Our speaking-while-muted notification component will be based on simple principle of reading the isSpeakingWhileMuted state of the currently selected mic. The UI will be rendered only, when isSpeakingWhileMuted is set to true.

import { useCallStateHooks } from '@stream-io/video-react-sdk';

export const SpeakingWhileMutedNotification = () => {
  const { useMicrophoneState } = useCallStateHooks();
  const { isSpeakingWhileMuted } = useMicrophoneState();

  if (!isSpeakingWhileMuted) return null;
  return <div>You are muted</div>;
};