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()
• toggleMic()

unmuteMic()

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

• 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 host can stop publishing their audio to other hosts and audience members.

toggleMic()

• By utilizing the toggleMic() function of useMeeting hook, the host can start or stop publishing their audio to other hosts and audience members 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.

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

Example

import { useMeeting } 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 } = useMeeting();

  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 Stream object.

• Every Participant—including all the hosts and audience members will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

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 Stream object.

• Every Participant—including all the hosts and audience members 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—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object if the audio broadcasting was started.

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object if the audio broadcasting was stopped.

• Every Participant—including all the hosts and audience members 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";
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);
    }
  }

  //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 <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()
• toggleMic()
• onStreamEnabled()
• onStreamDisabled()
• onMediaStatusChanged()