Get ReadableStream from Webcam in Browser

Question

I would like to get webcam input as a ReadableStream in the browser to pipe to a WritableStream. I have tried using the MediaRecorder API, but that stream is chunked into separate blobs while I would like one continuous stream. I'm thinking the solution might be to pipe the MediaRecorder chunks to a unified buffer and read from that as a continuous stream, but I'm not sure how to get that intermediate buffer working.

mediaRecorder = new MediaRecorder(stream, recorderOptions);
mediaRecorder.ondataavailable = handleDataAvailable;

mediaRecorder.start(1000);

async function handleDataAvailable(event) {
  if (event.data.size > 0) {
    const data: Blob = event.data;
    // I think I need to pipe to an intermediate stream? Not sure how tho 
    data.stream().pipeTo(writable);
  }
}

Kaiido · Accepted Answer · 2021-04-03T03:42:56.767

Currently we can't really access the raw data of the MediaStream, the closest we have for video is the MediaRecorder API but this will encode the data and works by chunks not as a stream.

However, there is a new MediaCapture Transform W3C group working on a MediaStreamTrackProcessor interface doing exactly what you want and which is already available in Chrome under the chrome://flags/#enable-experimental-web-platform-features flag.
When reading the resulting stream and depending on which kind of track you passed, you'll gain access to VideoFrames or AudioFrames which are being added by the new WebCodecs API.

if( window.MediaStreamTrackProcessor ) {
  const track = getCanvasTrack();
  const processor = new MediaStreamTrackProcessor( track );
  const reader = processor.readable.getReader();
  readChunk();
  function readChunk() {
    reader.read().then( ({ done, value }) => {
      // value is a VideoFrame
      // we can read the data in each of its planes into an ArrayBufferView
      const channels = value.planes.map( (plane) => {
        const arr = new Uint8Array(plane.length);
        plane.readInto(arr);
        return arr;
      });
      value.close(); // close the VideoFrame when we're done with it

      log.textContent = "planes data (15 first values):\n" +
        channels.map( (arr) => JSON.stringify( [...arr.subarray(0,15)] ) ).join("\n");
      if( !done ) {
        readChunk();
      }
    });
  }
}
else {
  console.error("your browser doesn't support this API yet");
}

function getCanvasTrack() {
  // just some noise...
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const img = new ImageData(300, 150);
  const data = new Uint32Array(img.data.buffer);
  const track = canvas.captureStream().getVideoTracks()[0];

  anim();
  
  return track;
  
  function anim() {
    for( let i=0; i<data.length;i++ ) {
      data[i] = Math.random() * 0xFFFFFF + 0xFF000000;
    }
    ctx.putImageData(img, 0, 0);
    if( track.readyState === "live" ) {
      requestAnimationFrame(anim);
    }
  }
  
}

<pre id="log"></pre>
<p>
Source<br>
<canvas id="canvas"></canvas>
</p>

Get ReadableStream from Webcam in Browser

1 Answers1