CODEWITHSUNDEEP
javascripthtmlhtml5-videogetusermedia
Rizvan
Rizvan

Reputation: 551

Pause the stream returned by getUserMedia

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.

Upvotes: 4

Views: 3628

Answers (2)

Kyle Baker
Kyle Baker

Reputation: 3712

// 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)

Upvotes: 1

Stan James
Stan James

Reputation: 2555

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.

Upvotes: 5

Related Questions