Mute / Unmute Mic - React Native

This feature allows hosts to communicate with each other during the livestream by enabling or disabling their microphones. While only hosts (participants in SEND_AND_RECV mode) can speak, audience members (in RECV_ONLY mode) can listen to the conversation in real time.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• unmuteMic()
• muteMic()

unmuteMic()

• By using the unmuteMic() function of the useRoom hook, the host can publish their audio to other hosts and audience members.

  • You can only call this method when the host is not broadcasting audio. Otherwise, it rejects with 3054 ERROR_ALREADY_IN_REQUESTED_STATE.

• You can also pass a customised audio track in the unmuteMic() method by using Custom Audio Track.

• A stopped or released track is refused with ERROR_INVALID_CUSTOM_AUDIO_TRACK (3030).

• Audio stream of the participant can be accessed from the micStream property of the useParticipant hook.

• On Android, the SDK does not ask the user for microphone access. Ask for it with requestPermission() of the useMediaDevice hook before the live stream joins. Without it, unmuteMic() rejects with 3018 ERROR_MICROPHONE_ACCESS_DENIED_OR_DISMISSED. On iOS, the SDK asks the user itself.

muteMic()

• By using the muteMic() function of the useRoom hook, the host can stop publishing their audio to other hosts and audience members.

• You can only call this method when the host is broadcasting audio. Otherwise, it rejects with 3054 ERROR_ALREADY_IN_REQUESTED_STATE.

toggleMic()

• By using the toggleMic() function of the useRoom hook, the host can turn their mic off when it is on, and on when it is off. Use it for a single mic button.

• It takes the same optional custom audio track as unmuteMic(), and uses it only when the mic is turned on.

isMicEnabled

• The isMicEnabled property of the useRoom hook tells whether the host is publishing audio. Use it to show the state of the mic button.

note

• While a mic change is still in progress, another unmuteMic(), muteMic() or toggleMic() call rejects with 3055 ERROR_OPERATION_IN_PROGRESS.
• Audience members (in RECV_ONLY mode) cannot publish audio. For them, unmuteMic() and toggleMic() reject with 3066 ERROR_ACTION_NOT_SUPPORTED_IN_MODE.

Example

import { useRoom } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text, View } from "react-native";

const LiveStreamView = () => {
  //Getting the mic methods from hook
  const { unmuteMic, muteMic, toggleMic } = useRoom();

  const handleUnmuteMic = async () => {
    // Unmuting Mic
    try {
      await unmuteMic();
    } catch (err) {
      console.error("unmuteMic failed:", err);
    }
  };

  const handleMuteMic = async () => {
    // Muting Mic
    try {
      await muteMic();
    } catch (err) {
      console.error("muteMic failed:", err);
    }
  };

  const handleToggleMic = async () => {
    // Toggling Mic
    try {
      await toggleMic();
    } catch (err) {
      console.error("toggleMic failed:", err);
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={handleMuteMic}>
        <Text>Mute Mic</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleUnmuteMic}>
        <Text>Unmute Mic</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleToggleMic}>
        <Text>Toggle Mic</Text>
      </TouchableOpacity>
    </View>
  );
};

Events associated with unmuteMic

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the RTCStream object.

Events associated with muteMic

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the RTCStream object.

Events associated with toggleMic

• Every Participant receives onStreamEnabled() when the mic is turned on, and onStreamDisabled() when it is turned off.

import { useParticipant } from "@videosdk.live/react-native-sdk";
import { View, Text } from "react-native";

const ParticipantView = ({ participantId }) => {
  //Callback for when the participant starts a stream
  function onStreamEnabled(stream) {
    if(stream.kind === 'audio'){
      console.log("Audio Stream On: onStreamEnabled", stream);
    }
  }

  //Callback for when the participant stops a stream
  function onStreamDisabled(stream) {
    if(stream.kind === 'audio'){
      console.log("Audio Stream Off: onStreamDisabled", stream);
    }
  }

  const {
    displayName,
    // ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled,
    // ...
  });
  return <View><Text>Participant View</Text></View>;
}

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• unmuteMic()
• muteMic()
• onStreamEnabled()
• onStreamDisabled()