html5-video - 如何快速处理 HTML5 中的视频帧？

Question

我正在测试 HTML5 的视频 API。计划是让视频播放有效果，比如把它变成黑白的。我有并使用缓冲区一起工作。我将当前视频帧复制到可以处理它的暂存缓冲区。问题在于它的运行速度。

HTML5 的视频 API 有 'timeupdate' 事件。我尝试使用它让处理程序处理帧，每帧处理一次，但它的运行速度比视频慢。

有什么加快处理帧的想法吗？

Answer 1

使用 requestAnimationFrame 可以更频繁地重绘确定何时更新您的 Canvas ，而不是依赖于 timeupdate，后者仅每 200-250 毫秒更新一次。对于精确到帧的动画来说，这绝对不够。 requestAnimationFrame 最多每 16 毫秒更新一次(大约 60fps)，但浏览器会根据需要限制它并与视频缓冲区绘制调用同步。对于这类事情，这几乎正是您想要的。

即使帧速率更高，使用 2D Canvas 处理视频帧也会非常慢。一方面，您在 CPU 中按顺序处理每个像素，运行 Javascript。另一个问题是您正在复制大量内存。无法直接访问视频元素中的像素。相反，您必须先将整个框架复制到 Canvas 中。然后，您必须调用 getImageData，它不仅会第二次复制整个帧，而且还必须再次分配整个内存块，因为它会创建一个新的 ImageData每次。如果您可以复制到现有缓冲区中，那就太好了，但您不能。

事实证明，您可以使用 WebGL 进行极其快速的图像处理。我编写了一个名为 Seriously.js 的库正是为了这个目的。查看wiki获取常见问题解答和教程。您可以使用色相/饱和度插件 - 只需将饱和度降至 -1 即可让您的视频变为灰度。

代码看起来像这样:

var composition = new Seriously();
var effect = composition.effect('hue-saturation');
var target = composition.target('#mycanvas');
effect.source = '#myvideo';
effect.saturation = -1;
target.source = effect;
composition.go();

使用 WebGL 的最大缺点是并非所有浏览器或计算机都支持它 - Internet Explorer 已经过时，任何带有旧的或奇怪的视频驱动程序的机器也是如此。大多数移动浏览器不支持它。您可以获得良好的统计数据 here和 here .但是你可以在相当大的视频上获得非常高的帧速率，即使有更多 complex effects .

(还有一个浏览器错误的小问题，奇怪的是，它同时出现在 Chrome 和 Firefox 中。您的 Canvas 通常会比视频落后一帧，这只是视频出现时的问题已暂停，如果您四处跳过，那将是最令人震惊的。唯一的解决方法似乎是继续强制更新，即使您的视频已暂停，但效率较低。请随意投票给这些票，以便他们得到一些关注.)