訪問攝像頭視頻流的像素（JS / WebRTC / MediaStreamTrack）

Question

對於科學應用程序，我需要對從網絡攝像頭接收的視頻流進行實時處理。

WebRTC使在網站上顯示實時流變得很簡單，並且使用<canvas>還可以獲取和處理屏幕截圖 。

我需要跟蹤視頻圖像的亮度。 因此，我需要的是隨時間流過幾個像素（它們的RGB值）的流。 每秒將<video>復制到<canvas> 30次只是為了獲得靜止圖像並分析幾個像素，似乎效率很低。

有什么方法可以更直接地訪問MediaStreamTrack的視頻內容？

Answer 1

有什么方法可以更直接地訪問MediaStreamTrack的視頻內容？

不是實時的，不。 W3C已經討論了在工作程序中添加這樣的API，但是今天還不存在。

MediaRecorder API接近了：它可以在幾毫秒的間隔內為您提供大量的數據（請參閱start（timeslice） ），但這不是實時的。

看來效率很低...

現代的瀏覽器具有后台線程來執行繁重的工作，例如縮小規模，因此，請注意不要過早優化。 通常，只有將比特全部暴露給主線程JavaScript時，事情才會放慢速度。 因此，我擔心的不是您的相機分辨率，而是畫布的大小。

如果您只需要幾個像素的亮度，則使畫布很小。 開銷應該很低。 例如 ：

video.srcObject = await navigator.mediaDevices.getUserMedia({video: true});
await new Promise(r => video.onloadedmetadata = r);
const ctx = canvas.getContext('2d');
requestAnimationFrame(function loop() {
  ctx.drawImage(video, 0, 0, 16, 12);
  requestAnimationFrame(loop);
});

<canvas id="canvas" width="16" height="12"></canvas>

如果仍然需要開銷，我會降低幀速率。