Mic Controls - React
Whenever any participant wants to start / stop broadcasting their audio to other participant in meeting, they can simply do it with VideoSDK Meeting.
This guide will provide an overview of how to use enable and disable Mic in a meeting.
-
Enable Mic - By using
unmuteMic()
function, a participant can publish audio to other participants.- You can pass customise audio track in
unmuteMic()
by using Custom Audio Track.
- You can pass customise audio track in
-
Disable Mic - By using
muteMic()
function, a participant can stop publishing audio to other participants. -
Change Mic - By using
changeMic()
function, a participant can change mic. -
Toggle Mic - By using
toggleMic()
function, a participant start or stop publishing the audio during the meeting.
Enable, Disable, Change Mic​
import { useMeeting } from "@videosdk.live/react-sdk";
const MeetingView = () => {
const { unmuteMic, muteMic, getMics, changeMic, toggleMic } = useMeeting();
const onPress = async () => {
// Enable Mic in Meeting
unmuteMic();
// Disable Mic in Meeting
muteMic();
// Toggle Mic in Meeting
toggleMic();
// Change Mic in Meeting
const mics = await getMics(); // returns all mics
const { deviceId, label } = mics[0];
changeMic(deviceId);
};
return <>...</>;
};
To get a better control over the audio Quality, we recommend you to use the custom audio tracks. You can check out how to use custom audio tracks here.
Events​
Event associated with unmuteMic()
:
- Every Participant will receive a callback on
onStreamEnabled()
of theuseParticipant()
hook withStream
object.
Event associated with muteMic()
:
- Every Participant will receive a callback on
onStreamDisabled()
of theuseParticipant()
hook withStream
object.
import { useParticipant } from "@videosdk.live/react-sdk";
function onStreamEnabled(stream) {
if(stream.kind === 'audio'){
console.log("Audio Stream On: onStreamEnabled", stream);
}
}
function onStreamDisabled(stream) {
if(stream.kind === 'audio'){
console.log("Audio Stream Off: onStreamDisabled", stream);
}
}
const {
displayName
...
} = useParticipant(participantId,{
onStreamEnabled,
onStreamDisabled,
...
});
Got a Question? Ask us on discord