从 HTML5 视频中获取原始像素数据答案

【问题标题】：Get raw pixel data from HTML5 video从 HTML5 视频中获取原始像素数据
【发布时间】：2012-08-21 06:17:10
【问题描述】：

我想从视频元素中获取原始数据（TypedArray 之类的）并使用 JavaScript 对其进行操作。

目前我新建了一个画布，将视频绘制到画布中，然后获取图像数据。

ctx.drawImage(myVideo);
var data = ctx.getImageData(0, 0, w, h).data;

它工作正常，但它会消耗 CPU（将视频放到画布上并从画布复制回来）并且会产生大量垃圾（每秒大约 50 MB）。还有其他更简单的解决方案吗？如果我可以将自己的缓冲区传递给 getImageData(...)，那就太好了。

顺便说一句。使用 WebGL 绘制视频并从 GPU 加载回来并不快 :( http://jsperf.com/getting-raw-data-from-video

【问题讨论】：

这是最简单的方法。您也许可以通过 WebGL 获得更多性能。您可以看到github.com/brianchirls/Seriously.js 是如何处理视频过滤器的。
嘿，谢谢你的链接。该库在片段着色器中编辑原始数据。但我需要从 JavaScript 编辑它:(

标签： html video canvas

【解决方案1】：

请阅读

https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

因为您实际上并没有显示任何代码、提及浏览器或提供有关视频的信息（分辨率、FPS、编码），所以无法说明您的代码为何缓慢或为什么它创建显示很多垃圾。在某些分辨率限制下，可以使用 Javasrcipt 实现实时视频效果。

这是一个使用 Mozilla 进行实时视频过滤的示例。

https://developer.mozilla.org/samples/video/chroma-key/index.xhtml https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

如果不首先在<canvas> 上传输视频帧，您将无法获得对视频数据的任何原始访问权限。但是，我相信这个操作应该是硬件加速的，因为它发生在 GPU 内存中。从 GPU 下载像素并在 Javascript 中对其进行操作，然后上传回显存可能是高分辨率的最慢步骤。

优化提示

考虑跳帧（较低 FPS 的处理效果）
服务器端HTML5视频渲染Rendering HTML5 animation server-side?

【讨论】：

我的问题不是关于 Bowser，而是关于 W3C 规范。我给你看了代码。问题是，HTML5 画布上下文函数 getImageData 生成一个新的 ArrayBufferView，每个像素有 4 个字节。这就是我寻找其他解决方案的原因。
嘿，我正在获取对视频数据的原始访问权限 - 我什至编写了我如何做到这一点的代码......
顺便说一句。 Mozilla 示例读取原始数据的方式与我相同（getImageData(...)）。那里没有改进。
Chrome 实现了增量垃圾收集器，有助于快速创建对象；您还可以调整其他浏览器上的垃圾收集器设置。您仍然没有提及使用哪种浏览器消耗 50 MB / sec 以及使用哪种帧。是的
我更新了问题。对于原始视频数据访问，我的意思是直接访问 video.getImageData() ，而不是先将其传送到画布上。如您所见， getImageData() 是当前操作数据的唯一方法。但是你是对的，API 没有让你能够回收你自己的缓冲区，但它也不应该创建一个新的缓冲区。您确定垃圾来自像素数据而不是来自您的其他代码吗？也许您在 Javascript 中保留了像素数据指针的副本（范围定义错误），并且像素数据引用永远不会被回收。

【解决方案2】：

clearRect() 是我认为你正在寻找的。p>

据我所知，在画布上上传图像会占用空间，但 clearRect() 会删除画布上的所有内存。

我在 JS 代码上做了什么：

在下面的代码中，我在视频标签上设置了一个流。有关更多网络摄像头信息，请参阅https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm。
我设置一秒的时间间隔（每秒调用一次函数）来清除画布，然后在该帧上绘制流。
现在轮到你了。最小化视频或画布应该对做什么没有影响。现在您可以随时抓取网络摄像头或视频上的像素颜色。

这是工作代码：

注意：我发现此示例不适用于内置 Web 查看器。这个例子需要它自己的网页。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
  
<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
#canvas {
  background-color: #666;
}
</style>
</head>
  
<body>
    <video autoplay="true" id="videoElement"></video>
    <canvas id="canvas" onclick= canvasOnclick()></canvas>

<script>
var video = document.querySelector("#videoElement");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (navigator.mediaDevices.getUserMedia) {       
    navigator.mediaDevices.getUserMedia({video: true})
  .then(function(stream) {
    video.srcObject = stream;
  })
  .catch(function(err0r) {
    console.log("Something went wrong!");
  });
}



var myVar = setInterval(intervalTimer, 1000);

function intervalTimer() {
  ctx.clearRect(0,0,400,400);
  ctx.drawImage(video,0,0,400,400);

}

//var data = ctx.getImageData(0, 0, w, h).data;
</script>
</body>
</html>

【讨论】：

谢谢！但我不想在 Canvas 上绘制视频。我想获取像素数据（当前视频帧的每个像素的红色、绿色和蓝色的值），所以我可以用我的代码循环像素，计算平均颜色等。

【解决方案3】：

canvas{display:none} 可能有助于减少一些开销。 js 仍然可以访问 Canvas。

【讨论】：

谢谢！我用 JS 做画布，并没有将它们添加到文档中。