Pause the stream returned by getUserMedia

Question

I have channelled the stream returned by getUserMedia to <video> element in html page, video now can be seen in that element. The problem is that if I pause the video from the controls of video element, and then resume after x seconds, then the timer being shown in video element will jump to pauseTime + x seconds. I guess this is because the stream is not getting paused as we pause the playback in video element. If so can we pause the stream too.

Answer 1

Looks like MediaStreamTrack.enabled can be toggled to temporarily pause the video stream.

The enabled property on the MediaStreamTrack interface is a Boolean value which is true if the track is allowed to render the source stream or false if it is not. This can be used to intentionally mute a track. When enabled, a track's data is output from the source to the destination; otherwise, empty frames are output.

Answer 2

// using `await`, remember to use `async function(){}` as needed, or switch to Promise().then() if desired...
const myStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true})
const myTracks = myStream.getTracks();
const myAudio = myTracks.filter(track => track.kind === "audio")[0];
const myVideo = myTracks.filter(track => track.kind === "video")[0];

function toggleTrackMute(track) {
  track.enabled = !track.enabled;
  console.log(`${track.enabled ? 'unmuted' : 'muted'} track.kind`);
}

toggleTrackMute(myAudio)