Skip to main content
Version: Next

Mute / Unmute Mic - React Native

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

When you mute your microphone, you prevent any sound from your microphone from being transmitted to other meeting participants, while unmuting it allows others to hear you.

unmuteMic()

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

    • You can call this method when the local participant is not broadcasting any audio to others.
  • You can pass customised audio track in unmuteMic() by using Custom Audio Track.

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

muteMic()

  • By using muteMic() function of useMeeting hook, local participant can stop publish audio to other participants.

  • You can call this method when the local participant is broadcasting any audio to others.

toggleMic()

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

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

  • Audio stream of the participant can be accessed from the micStream property of 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 property named localMicOn.
  • If localMicOn is true, it means 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 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

Events associated with muteMic

Events associated with toggleMic

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 participants media gets changed
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.

Got a Question? Ask us on discord