I am trying to allow my users to decrease bandwidth usage if their call is choppy by disabling video. The documentation says:
"Mute or Pause a Single Media Track
To control the muted/unmuted or the paused/unpaused state of a single LocalAudioTrack of LocalVideoTrack, you can use the LocalTrack#enable and LocalTrack#disable methods. "
However when I use this, the local media element goes black (ie it stops rendering) but the remote stream (open in a different window) still recieves video. The code I am using is included below.
createLocalVideoTrack().then(track => {
var localMediaContainer = document.getElementById(self.local_vid_id);
var title = document.createElement('span')
title.innerText = "Me";
localMediaContainer.appendChild(title);
var videoIcon = document.createElement('span')
videoIcon.className = 'glyphicon glyphicon-facetime-video';
videoIcon.title = 'Disable Video';
videoIcon.videoTrack = track;
videoIcon.onclick = (event) => {
if (event.target.videoTrack.isEnabled) {
event.target.videoTrack.disable();
event.target.title = 'Enable Video';
} else {
event.target.videoTrack.enable();
event.target.title = 'Disable Video';
}
}
localMediaContainer.appendChild(videoIcon);
localMediaContainer.appendChild(track.attach());
});
Has anyone else come across this, is there a simple fix?
Answering my own question here but hopefully others will find it useful.
You need to remove the videoTrack to stop it being sent. The final version of the code I used is
videoIcon.onclick = function(event) {
if (event.target.videoTrack){
self.room.localParticipant.videoTracks.forEach( (track) => {
self.room.localParticipant.removeTrack(track,true);
})
trackRemoved(event.target.videoTrack);
event.target.videoTrack.stop();
event.target.title = 'Enable Video';
event.target.videoTrack = undefined;
} else {
// Totally reconnect to the room
self.stop();
self.reconnect();
self.startPreview();
}
}