Twilio Video Mute and unmute audio and video in Node.js

Question

I have created a Twilio video call app using the Serverless guide, everything is fine and good now I want to implement mute/unmute audio in this. Please help for this I'm new with node.js. Want to know that where I need to put code in conference.js.

This is guide, which I used to install and video call is working perfect.

Initiate a new project

twilio serverless:init example --template=video && cd example

4. Start the server with the Twilio CLI:

twilio serverless:start

5. Open the web page at https://localhost:3000/index.html to test the app

ℹ️ Check the developer console and terminal for any errors, make sure you've set your environment variables.

Deploying

Deploy your functions and assets with either of the following commands. Note: you must run these commands from inside your project folder. More details in the docs.

With the Twilio CLI:

twilio serverless:deploy

Answer 1

First up, just to let you know, when making changes to the application that users interact with in the browser, you are not doing so in Node.js, but in JavaScript that is running in the browser.

To mute/unmute a participant's audio or video within a Twilio Video application you need to access the LocalAudioTrack or LocalVideoTrack that you want to mute and call disable() on it. To unmute or re-enable the track you need to call enable() on it.

But there's more to it than that. You will need to add buttons to the page in conference.html that will do the muting, and you will need to get access to the buttons in the JavaScript and listen to the click event so you can trigger the muting/unmuting.

Once you have added the buttons and are listening to the click event, you will need to get access to the tracks. You can do this through the room object that you have access to once the room has connected. With the room object you can access the localParticipant object and then use that to access either the videoTracks or audioTracks property depending on whether you want to mute video or audio. Both videoTracks and audioTracks are Maps of Track SID and LocalTrackPublications. You can call track on a publication to get the underlying track and then call enable/disable on it.

Here's an example of a function that would mute a localParticipant's audio tracks. It assumes you've already placed a mute button on the page and got access to it in the JavaScript earlier. This code should go in conversation.js in the callback once the video has connected and you have access to the room object:

muteButton.addEventListener("click", (event) => {
  room.localParticipant.audioTracks.forEach(trackPublication => {
    trackPublication.track.disable();
  }
});

You can repeat this for videoTracks and also use the same pattern to call enable on the tracks to unmute them again.

See how you do with that. If you have any more questions, please share the code you are using, the things you have tried and what is going wrong.