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

Question

我想从视频元素中获取原始数据(TypedArray或其他)并使用JavaScript操作它们.

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

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

它工作正常,但它耗尽CPU(将视频放入画布并从画布复制回来),它会产生大量垃圾(每秒大约50 MB).还有其他更简单的解决方案吗？如果我可以将自己的缓冲区传递给getImageData(...),那将会很棒.

BTW.用WebGL绘制视频并从GPU加载它并不是更快:( http://jsperf.com/getting-raw-data-from-video

Answer 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/Manipulated_video_using_canvas

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

优化技巧

• 考虑跳帧（较低 FPS 下的处理效果）

• 服务器端 HTML5 视频渲染在服务器端渲染 HTML5 动画？