Mute / Unmute Mic - JavaScript

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 liveStream object, 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 Participant object.

muteMic()

• By using the muteMic() function of the liveStream object, the host can stop publishing their audio to other hosts and audience members.

Example

let liveStream;

// Initialize Meeting
liveStream = VideoSDK.initMeeting({
  // ...
});

const unmuteMicBtn = document.getElementById("unmuteMicBtn");
unmuteMicBtn.addEventListener("click", () => {
  // unmuteMic Meeting
  liveStream?.unmuteMic();
});

const muteMicBtn = document.getElementById("muteMicBtn");
muteMicBtn.addEventListener("click", () => {
  // unmuteMic Meeting
  liveStream?.muteMic();
});

note

To learn, how to render audio in the live stream, follow this detailed guide.

Events associated with unmuteMic

• Every Participant—including all the hosts and audience members will receive a callback on stream-enabled event of the participant object with the Stream object.

• Every Participant—including all the hosts and audience members will receive a callback on media-status-changed event of the participant object 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 stream-disabled event of the participant object with the Stream object.

• Every Participant—including all the hosts and audience members will receive a callback on media-status-changed event of the participant object with the type of media and its status.

const participants = liveStream.participants;
const participant = participants.get("<participant-id>");

participant.on("stream-enabled", (stream) => {
  if (stream.kind === "audio") {
    //particiapnt turned on audio
    //Render Participant audio logic here
  }
});

participant.on("stream-disabled", (stream) => {
  if (stream.kind === "audio") {
    //particiapnt turned off audio
    //remove Participant audio logic here
  }
});

participant.on("media-status-changed", (data) => {
  const { kind, newStatus } = data;
  if (kind === "audio") {
    //particiapnt media status changed
  }
});

Audio Permissions

• By default, VideoSDK will request audio permission when a participant attempts to turn on the mic. Once the permission is granted, the mic is activated. If the permission is denied, VideoSDK will send an error message in the onError event callback of the liveStream object.

Troubleshoot Audio Permissions

• If a participant denies the microphone permission, they can manually grant it by following the below shown steps.

caution

To use the audio and video communications in the web browser, your site must be SSL enabled, i.e. it must be secured and running on https.

API Reference

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

• unmuteMic()
• muteMic()
• stream-enabled event
• stream-disabled event
• media-status-changed