Muting local tracks on Twilio Video? - twilio

Question

Following guides, I'm attempting to disable and enable localAudioTracks.
Within the roomJoined function, I have these two functions:
document.getElementById("audio-toggle-off").onclick = function() {
console.log("muting this users audio");
room.localParticipant.audioTracks.forEach(function(trackId, track) {
track.disable();
});
};
document.getElementById("audio-toggle-on").onclick = function() {
console.log("enabling this users audio");
room.localParticipant.audioTracks.forEach(function(trackId, track) {
track.enable();
});
};
But on clicking these, I get the error that:
VideoChat.js:241 Uncaught TypeError: track.enable is not a function
at VideoChat.js:241
at Map.forEach (<anonymous>)
at HTMLButtonElement.document.getElementById.onclick (VideoChat.js:240)
Any ideas? For reference, I'm including the full roomJoined function below:
function roomJoined(room) {
window.room = activeRoom = room;
log("Joined as '" + identity + "'");
if (hide) {
return;
}
// document.getElementById("button-join").style.display = "none";
// document.getElementById("button-leave").style.display = "inline";
// Attach LocalParticipant's Tracks, if not already attached.
var previewContainer = document.getElementById("local-media");
if (previewContainer && !previewContainer.querySelector("video")) {
attachParticipantTracks(room.localParticipant, previewContainer);
}
// Attach the Tracks of the Room's Participants.
room.participants.forEach(function(participant) {
log("Already in Room: '" + participant.identity + "'");
var previewContainer = document.getElementById("remote-media");
attachParticipantTracks(participant, previewContainer);
});
// When a Participant joins the Room, log the event.
room.on("participantConnected", function(participant) {
log("Joining: '" + participant.identity + "'");
});
// When a Participant adds a Track, attach it to the DOM.
room.on("trackAdded", function(track, participant) {
log(participant.identity + " added track: " + track.kind);
var previewContainer = document.getElementById("remote-media");
attachTracks([track], previewContainer);
});
// When a Participant removes a Track, detach it from the DOM.
room.on("trackRemoved", function(track, participant) {
log(participant.identity + " removed track: " + track.kind);
detachTracks([track]);
});
// When a Participant leaves the Room, detach its Tracks.
room.on("participantDisconnected", function(participant) {
log("Participant '" + participant.identity + "' left the room");
detachParticipantTracks(participant);
});
// Once the LocalParticipant leaves the room, detach the Tracks
// of all Participants, including that of the LocalParticipant.
room.on("disconnected", function() {
log("Left");
if (previewTracks) {
previewTracks.forEach(function(track) {
track.stop();
});
}
detachParticipantTracks(room.localParticipant);
room.participants.forEach(detachParticipantTracks);
activeRoom = null;
document.getElementById("button-join").style.display = "inline";
document.getElementById("button-leave").style.display = "none";
});
document.getElementById("audio-toggle-off").onclick = function() {
console.log("muting this users audio");
room.localParticipant.audioTracks.forEach(function(trackId, track) {
track.disable();
});
};
document.getElementById("audio-toggle-on").onclick = function() {
console.log("enabling this users audio");
room.localParticipant.audioTracks.forEach(function(trackId, track) {
track.enable();
});
};
}

Answer 1

So it looks like this was able to work:
document.getElementById("audio-toggle-off").onclick = function() {
room.localParticipant.audioTracks.forEach(function(
audioTrack,
key,
map
) {
console.log("muting this users audio");
audioTrack.disable();
});