我正在测试HTML5的视频API。计划是让视频播放有效，就像制作黑白一样。我和使用缓冲区一起工作。我将当前的视频帧复制到临时缓冲区，我可以在其中处理它。问题在于它的运行速度。
HTML5的视频API具有'timeupdate'事件。我尝试使用它来处理处理程序帧，每帧一次，但它的运行速度比视频慢。
加快处理帧的想法？
答案 0 :(得分：7)
您可以使用requestAnimationFrame来确定何时更新画布，而不是依赖timeupdate，每隔200-250毫秒更新一次，您可以更频繁地重绘。帧精确动画绝对不够。 requestAnimationFrame最多每16毫秒更新一次（约60fps），但浏览器会根据需要对其进行限制并与视频缓冲区绘制调用同步。这几乎就是你想要的东西。
即使帧速率较高，使用2D画布处理视频帧也会非常慢。首先，你在CPU中按顺序处理每个像素，运行Javascript。另一个问题是你正在复制大量内存。无法直接访问视频元素中的像素。相反，您必须先将整个框架复制到画布中。然后，您必须调用getImageData，它不仅会再次复制整个帧，而且还必须再次分配整个内存块，因为它每次都会创建一个新的ImageData。如果你可以复制到现有缓冲区，那就太好了，但你不能。
事实证明，您可以使用WebGL进行极快的图像处理。为此，我写了一个名为Seriously.js的库。查看wiki以获取常见问题解答和教程。您可以使用Hue / Saturation插件 - 只需将饱和度降低到-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中出现了一个浏览器错误的小问题。你的画布通常会在视频后面一帧，这只是一个如果视频暂停则会出现问题，如果您正在跳过，则最为严重。唯一的解决方法似乎是继续强制更新，即使您的视频已暂停，效率也会降低。请随时将这些故障单投票给所有人他们得到了一些关注。）