javascript - 访问网络摄像头视频流的像素 (JS/WebRTC/MediaStreamTrack)

Question

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

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

我需要跟踪视频图像的亮度。因此，我需要的是随时间变化的几个像素(它们的 RGB 值)的流。复制 <video> 似乎效率很低到 <canvas>每秒 30 次只是为了拥有静止图像并分析几个像素...

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

Answer 1

Is there any way to access the video content of a MediaStreamTrack more directly?

不是实时的，不。 W3C 已经讨论过在 workers 中添加这样的 API，但目前还没有。

MediaRecorder API 接近:它可以以毫秒为间隔为您提供数据 block (请参阅 start(timeslice) )，但它不是实时的。

It seems very inefficient...

现代浏览器有后台线程来完成缩小尺寸等繁重的工作，所以我要提醒大家不要过早优化。通常只有当位被大量暴露给主线程 JavaScript 时，事情才会变慢。因此，相比 Canvas 的大小，我更担心相机的分辨率。

如果您只需要几个像素的亮度，请让您的 Canvas 非常小。开销应该很低。 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>

如果开销仍然是一个问题，我会降低帧速率。