Mute / Unmute Mic - React Native

Muting and Unmuting your microphone refers to turning your microphone off and on, respectively.

Muting your microphone prevents the transmission of any sound from your microphone to other room participants, while unmuting allows them to hear you.

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()
• toggleMic(), which rejects with the errors of unmuteMic() and muteMic()

unmuteMic()

• By using the unmuteMic() function of the useRoom hook, the local participant can publish their audio to other participants.

  • You can only call this method when the local participant is not broadcasting audio to others. 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 room 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 local participant can stop publishing their audio to other participants.

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

toggleMic()

• By using the toggleMic() function of the useRoom hook, the local participant can turn their mic off when it is on, and on when it is off. It rejects with the same errors as unmuteMic() and muteMic().

• You can pass a custom audio track to toggleMic(). It is used only when the mic is turned on.

note

While a mic change is still in progress, another unmuteMic(), muteMic() or toggleMic() call rejects with 3055 ERROR_OPERATION_IN_PROGRESS.

Example

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

const RoomView = () => {
  //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 (
    <>
      <TouchableOpacity
        onPress={() => {
          handleMuteMic();
        }}
      >
        <Text>Mute Mic</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleUnmuteMic();
        }}
      >
        <Text>Unmute Mic</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleToggleMic();
        }}
      >
        <Text>Toggle Mic</Text>
      </TouchableOpacity>
    </>
  );
};

Getting Participant Mic Status

• You can get the local participant's media status from the useRoom hook using a property called isMicEnabled.
• If isMicEnabled is true, it indicates that the local participant's microphone is currently active. If it is false, it means that the local participant's microphone is currently muted or inactive.

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

const RoomView = () => {
  // Get the isMicEnabled property
  const { isMicEnabled } = useRoom();

  return (
    <>
      <Text>Local Mic is {isMicEnabled ? "on" : "off"}</Text>
    </>
  );
};

• To get the status of any participant's microphone, you can use the micOn property of the useParticipant hook. This parameter will be true if participant's mic is on, else it will be false.

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

const ParticipantView = ({ participantId }) => {
  // Get the micOn property
  const { micOn } = useParticipant(participantId);

  return (
    <>
      <Text>Participant Mic is {micOn ? "on" : "off"}</Text>
    </>
  );
};

Events associated with unmuteMic

• Every Participant will receive a callback onStreamEnabled() event of the useParticipant() hook with the RTCStream object.

Events associated with muteMic

• Every Participant will receive a callback on onStreamDisabled() event of the useParticipant() hook with the RTCStream object.

import { useParticipant } from "@videosdk.live/react-native-sdk";
import { 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 <Text>{displayName}</Text>;
}

API Reference

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

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