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 meeting participants, while unmuting allows them to hear you.

unmuteMic()

• By using the unmuteMic() function of the useMeeting 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.

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

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

muteMic()

• By using the muteMic() function of the useMeeting 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.

toggleMic()

• By utilizing the toggleMic() function of useMeeting hook, the local participant can start or stop publishing their audio to other participants based on the current state of the mic.

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

• The audio stream of a participant can be accessed from the micStream property of the useParticipant hook.

Example

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

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

  const handleUnmuteMic = () => {
    // Unmuting Mic
    unmuteMic();
  };

  const handleMuteMic = () => {
    // Muting Mic
    muteMic();
  };

  const handleToggleMic = () => {
    // Toggling Mic
    toggleMic();
  };

  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 useMeeting hook using a property called localMicOn.
• If localMicOn 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 { useMeeting } from "@videosdk.live/react-native-sdk";
import { Text } from "react-native";

const MeetingView = () => {
  // Get the localMicOn property
  const { localMicOn } = useMeeting();

  return (
    <>
      <Text>Local Mic is {localMicOn} </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}</Text>
    </>
  );
};

Events associated with unmuteMic

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

• Every Participant will receive a callback onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

Events associated with muteMic

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

• Every Participant will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

Events associated with toggleMic

• Every Participant will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object if the audio broadcasting was started.

• Every Participant will receive a callback on onStreamDisabled() event of the useParticipant() hook with Stream object if the audio broadcasting was stopped.

• Every Participant will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

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

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);
    }
  }


  //Callback for when participant's media changes
  function onMediaStatusChanged(data) {
    const { kind, newStatus} = data;
    console.log("Participant Media Kind: ", kind, " newStatus: ", newStatus);
  }

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

API Reference

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

• unmuteMic()
• muteMic()
• toggleMic()
• onStreamEnabled()
• onStreamDisabled()
• onMediaStatusChanged()