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.

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 = () => {
    // Unmuting Mic
    unmuteMic();
  };

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

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

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