访问摄像头视频流的像素（JS / WebRTC / MediaStreamTrack）

Question

对于科学应用，我需要对使用JavaScript从网络摄像头接收到的视频流进行实时处理。

WebRTC使在网站上显示实时流变得简单，并且使用<canvas>也允许take and process screenshots。

我需要跟踪视频图像的亮度。因此，我需要的是随时间流过几个像素（它们的RGB值）的流。每秒仅将<video>复制到<canvas> 30次以获取静止图像并分析几个像素似乎效率很低...

有什么方法可以更直接地访问MediaStreamTrack的视频内容？

Answer 1

  

有什么方法可以更直接地访问MediaStreamTrack的视频内容？

不是实时的，不。 W3C讨论了在工作者中添加这样的API，但是今天不存在。

MediaRecorder API接近了：它可以在几毫秒的间隔内为您提供大量的数据（请参阅start(timeslice)），但这不是实时的。

  

效率似乎很低...

现代的浏览器具有后台线程来执行繁重的工作，例如缩减规模，因此我要提防过早的优化。通常，只有将比特全部暴露给主线程JavaScript时，事情才会放慢速度。因此，我不用担心您的相机分辨率，而只需担心画布的大小。

如果您只需要几个像素的亮度，则使画布真正很小。开销应该很低。 E.g.：

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>

如果仍然需要开销，我会降低帧速率。