Twilio-video.js: Muting audio/video

[itsMattShull]

I've searched around quite a bit to find this answer and nothing I find online works. I want to mute the audio/video element when attaching it. When I try the following code I get an error that says disable() isn't a function:

// Attach the Tracks to the DOM.
export const attachTracks = function attachTracks(participant, tracks, container) {
    tracks.forEach(function attachEachTrack(track) {
        track.disable();
        container.appendChild(track.attach());
    });
};

I can however use isEnabled() just fine. Does enable() and disable() not work? Is there another way to mute the track when it's attached that I'm missing?

[itsMattShull]

@manjeshbhargav I'm assuming the same principle applies here as it did in https://github.com/twilio/twilio-video.js/issues/227 ?

[MilllerTime]

The issue you linked does not apply. The disable() method you're attempting to call is Twilio specific, therefore you want to be using the Twilio objects directly and not the underlying DOM elements.

Are you trying to disable local tracks, or remote tracks?

Remote tracks cannot be disabled. You can see in the docs that the AudioTrack and RemoteAudioTrack classes do not have a disable method, however LocalAudioTrack does. LocalAudioTrack extends AudioTrack, which is why isEnabled works on either type, however you can only disable the local variant. The same applies for video tracks.

[markandrus]

@MilllerTime thanks for the explanation.

@derekshull like @MilllerTime mentioned, only LocalAudioTracks and LocalVideoTracks have a disable method; RemoteAudioTracks and RemoteVideoTracks do not. The idea is that you can disable/enable (i.e., mute or pause) your own Tracks, and this will affect what every other Participant in the Room receives; however, you cannot remotely disable a RemoteAudioTrack or RemoteVideoTrack and have it affect what every other Participant in the Room receives.

That being said, muting or pausing _local_ playback of RemoteAudioTracks and RemoteVideoTracks _is_ a valid use case. You can do this by manipulating the HTMLMediaElement returned by attach. For example,

const element = remoteAudioOrVideoTrack.attach()
element.muted = true; // Mute
element.pause(); // Pause
container.appendChild(element);

I recognize this may be annoying in the common case. If you think it would not be confusing to add enable and disable to RemoteAudioTracks and RemoteVideoTracks—with the caveat that it affects _local_ playback only—we may consider it. Or we could add some API with another name for controlling this. For example, our iOS SDK has playbackEnabled. What do you think?

Thanks,
Mark

[itsMattShull]

Yeah that’s what I was meaning, to use JavaScript .muted=true instead of twilio. Thanks.

[amarkoulavkar]

you can make it like this

room.localParticipant.tracks.forEach(function(track) {
console.log(track);
track.mediaStreamTrack.muted = false;
track.enable();
});

room.localParticipant.tracks.forEach(function(track) {
console.log(track);
track.mediaStreamTrack.muted = false;
track.disable();
});

[ericksondelacruz]

Turn Off Audio

room.localParticipant.audioTracks.forEach((publication) => { 
    publication.track.disable(); 
});

Turn On Audio

room.localParticipant.audioTracks.forEach((publication) => { 
    publication.track.enable(); 
});

Turn Off Video

room.localParticipant.videoTracks.forEach((publication) => { 
    publication.track.disable(); 
});

Turn On Video

room.localParticipant.videoTracks.forEach((publication) => { 
    publication.track.enable(); 
});

[mikron123]

I got Uncaught TypeError: publication.enable is not a function

[makarandp0]

Hello @mikron123, Which version of SDK are you using? for 2.x API - enable/disable methods are on publication.track object, and not publication. Maybe that's causing the error you see. Can you try with the code @ericksondelacruz posted above? You might also find this example that demonstrates this functionality

Thanks,
Makarand

[voigtd]

Honestly, there should be a way to disable audio or video for a RemoteAudioTrack, similar to how it's done with a LocalAudioTrack. People setting up video conferencing calls need a way to be able to handle situations where someone needs to be muted or their video disabled for disruptive reasons, or whatever the case may be. Twilio should also set up the ability for there to be an admin (i.e. the person that created the video call) where they would have permissions to do this, while others wouldn't.

[acro5piano]

Have to call stop() before disable() to turn off the light next to webcam.

    publication.track.stop(); 
    publication.track.disable();