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

Question

我正在测试HTML5的视频API.计划是让视频播放有效,就像制作黑白一样.我和使用缓冲区一起工作.我将当前的视频帧复制到临时缓冲区,我可以在其中处理它.问题是它运行的速度.

HTML5的Video API具有'timeupdate'事件.我尝试使用这个处理程序处理帧,每帧一次,但它的运行速度比视频慢.

有什么想法加快处理帧？

Answer 1

您可以通过使用requestAnimationFrame来确定何时更新画布而不是依赖timeupdate,只能每200-250ms更新一次,从而获得更频繁的重绘.帧精确动画绝对不够.requestAnimationFrame最多每16ms更新一次(大约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已经出局,任何拥有旧的或奇怪的视频驱动程序的机器都是如此.大多数移动浏览器都不支持它.您可以在此处和此处获得良好的统计数据.但是你可以在相当大的视频上获得非常高的帧速率,即使是更复杂的效果.

(还有一个小问题与浏览器的bug,奇怪的是,在这两个显示出来的Chrome和Firefox的.你的画布,往往是视频,如果视频被暂停其仅仅是一个问题的背后一个框架,并且是最令人震惊如果您正在跳过.唯一的解决方法似乎是继续强制更新,即使您的视频暂停,效率也会降低.请随时将这些门票投票,以便得到一些关注.)