访问网络摄像头视频流的像素（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>

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