從瀏覽器中的網絡攝像頭獲取 ReadableStream

Question

我想將網絡攝像頭輸入作為瀏覽器中的 ReadableStream 輸入到 pipe 到 WritableStream。 我嘗試使用 MediaRecorder API，但是 stream 被分塊成單獨的 blob，而我想要一個連續的 stream。 我在想解決方案可能是 pipe MediaRecorder 塊到一個統一的緩沖區，並作為一個連續的 stream 從中讀取，但我不確定如何讓該中間緩沖區工作。

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);
  }
}

Answer 1

目前我們無法真正訪問 MediaStream 的原始數據，我們擁有的最接近視頻的是 MediaRecorder API 但這將對數據進行編碼並按塊而不是 stream 工作。

但是，有一個新的MediaCapture Transform W3C 小組正在開發一個MediaStreamTrackProcessor接口，可以完全按照您的要求進行操作，並且該接口已經在 Chrome 中的chrome://flags/#enable-experimental-web-platform-features標志下可用。
在讀取生成的 stream 時，根據您通過的軌道類型，您將獲得對新WebCodecs API添加的VideoFrames或AudioFrames的訪問權限。

 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>