Pause the stream returned by getUserMedia

Question

I have channelled the stream returned by getUserMedia to element in html page, video now can be seen in that element. The problem is that if I pau

Answer 1

That is the very thing of Streams, you can't pause them...

But what you can do however, is to buffer this stream, and play what you've bufferred.

To achieve this with a MediaStream, you can make use of the MediaRecorder API, along with the MediaSource API.

But note that now, you'll obviously get more delay than when you were reading the stream directly.

navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(stream => {
    const mediaSource = new MediaSource();
    let data, sourceBuffer;
    vid.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen);

    const recorder = new MediaRecorder(stream, {
      mimeType: 'video/webm; codecs="vp8"'
    });
    const chunks = [];
    recorder.ondataavailable = e => push(e.data);

    function push(data) {
      if (mediaSource.readyState !== "open") return;
      let fr = new FileReader();
      fr.onload = e => sourceBuffer.appendBuffer(fr.result);
      fr.readAsArrayBuffer(new Blob([data]));
    }

    function sourceOpen(_) {
      recorder.start(50);
      sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
      vid.play();
    }

  });

<video id="vid" controls></video>

And as a fiddle since StackSnippets are not very gUM friendly.

Answer 2

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.