Question

我注意到一个性能问题，许多人正在向<video>写一个<canvas>图像，然后从<canvas>读取像素，然后将数据重写回{ {1}}在HTML5 / JavaScript中进行实时图像处理。

显然，正确的方法是阅读<canvas>图片数据，然后处理javascript 中的像素，并且只能写入<video>一次。

似乎getUserMedia <canvas> API不支持直接访问图像数据，即使是在某个事件上，也许是出于某种性能原因??！如果要读取实际像素信息，是否需要写入画布？我不介意数据是否压缩，以某种形式获得它会很好。我注意到有一个对video.src的引用，但似乎getUserMedia不包含可用的video.data。

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

以下是一些有效的示例代码，但我希望通过不写入<video>并直接从<canvas>数据中读取来加快速度：

<video>

无论如何将drawImage（）第一个问题简化为只有一行。

function DisplayCanvas (video) {
  var delay = 1500; // ms
  timer = setInterval(
    function () {
      // display is a canvas context
      display.drawImage(video, 0, 0, 640, 480);
      data = display.getImageData(0,0,640,480);
      idata = ImageProcessing(data);
      display.putImageData(idata,0,0);
    }, delay);
  }

Answer 1

我不认为你可以省去这一步，你需要将流转换成某种东西，这就是drawImage所做的事情。

我认为问题在于像素操作阶段。如果你想要速度，你必须在gpu上做。为此，您需要将视频渲染为webGL纹理并通过着色器对其进行操作。

这样你的瓶颈就是（我认为）浏览器将视频推送到gpu的速度。

Answer 2

Canvas＆＃39; .getImageData＆amp; .putImageData是在客户端操作实时视频标签上像素的唯一方法。

他们没有GPU加速所以他们很慢。

在合理的桌面上，您应该能够对图像进行采样+修改+重写，尽管您可能已丢帧。

在较小的机器上，该过程可能会失败。

HTML5 <video> <canvas>更快地直接访问以获取图像像素数据

2 个答案: