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

Question

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

WebRTC使在网站上显示实时流变得简单，并且使用<canvas>也允许拍摄和处理截图。

我需要跟踪视频图像的亮度。因此，随着时间的推移，我需要的是几个像素的流(它们的RGB值)。将<video>复制到<canvas>每秒30次似乎效率很低，仅仅为了获得一幅静止的图像和分析一个fews像素.

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

Answer 1

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

不是实时的，不是。W3C已经讨论过在工作人员中添加这样一个API，但是现在不存在。

MediaRecorder API非常接近:它可以以毫秒间隔(参见开始(时间))为您提供大量数据，但并不是实时的。

看起来效率很低..。

现代浏览器有后台线程，可以像向下缩放一样进行繁重的工作，所以我要提醒您不要过早地进行优化。通常情况下，只有当比特被大量暴露到主线程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>

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