HTML5视频和画布CPU优化

Question

我正在制作一个带有HTML5视频的应用程序以及一个在其上面的画布绘图(640x480像素).目标是将画布绘图与编码视频一起记录,以将其生成为单个视频.我能够使用FFMPEG完成所有这些工作.但我面临的问题是,当HTML5视频运行时,它需要大约50%的CPU.由于在画布上绘图也要求CPU,浏览器会在一段时间后冻结,并且chrome上该选项卡的CPU使用率连续显示> 100.我尝试优化html5画布渲染.但没有任何帮助.有没有办法以更少的CPU使用率运行此视频？或任何其他可能的优化？

Answer 1

如果硬件需要使用CPU来解码和显示视频,那么您就无法做到.关键字是妥协.

可以做一些事情,但这可以消除额外的障碍.这些必须被视为一般提示:

有效的循环

requestAnimationFrame()如果不是,请务必使用调用循环.

setTimeout()/ setInterval()性能相对较高,无法与显示器刷新率正确同步.

减少更新负载

此外,如果您还没有这样做:画布通常以60 FPS更新,而视频很少超过30/29.97 FPS(欧洲25 FPS).这意味着您可以跳过每隔一秒的帧更新,并仍然以最佳速率显示视频.使用切换来实现此目的.

25 FPS的视频将重新同步到30 FPS(监视器通常以60 Hz运行,即使是内部电子重新同步的欧洲型号,这也意味着浏览器需要在内部处理掉线/双帧等 - 没有我们可以在这里做).

// draw video at 30 FPS
var toggle = false;

(function loop() {
    toggle = !toggle;
    if (toggle) { /* draw frame here */ }
    requestAnimationFrame(loop);
})();

避免缩放canvas元素

确保画布大小和CSS大小完全相同.或者说简单:不要使用CSS来设置画布的大小.

禁用Alpha通道合成

您可以在某些浏览器中禁用画布的alpha合成以获得更快的速度.消费者视频从未带有alpha频道.

// disable alpha-composition of the canvas element where supported
var context = canvas.getContext("2d", {alpha: false});

在编码阶段调整设置

确保使用大小和解压缩负载之间的平衡对视频进行编码.压缩的视频越多,需要花费更多的时间进行重建.使用不同的编码器设置进行编码,以查找适用于您的方案的天平.

还要考虑颜色深度等方面,即16比24比特.

H264编解码器是优选的,因为它在各种显示接口硬件中具有广泛的支持.

减少视频FPS

如果视频的内容允许,f.ex.几乎没有移动或变化,使用15 FPS而不是30 FPS进行编码.如果是这样,也可以使用MODULO而不是切换(如上所示),您可以跳过3帧并仅在4处更新画布:

// draw video at 15 FPS
var modToggle = 0;

(function loop() {
    if (modToggle++ % 4 === 0) { /* draw frame here */ }
    requestAnimationFrame(loop);
})();

以较小的源大小编码视频

将视频编码为稍微小一些,可分为8(在这种情况下,我甚至会建议半尺寸320x240 - 实验!).然后使用方法的scale参数绘制drawImage():

context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, 640, 480);

这有助于减少加载和解码所需的数据量,但当然会降低质量.结果如何取决于内容.

您还可以imageSmoothingEnabled在上下文中使用set to false 关闭插值(注意:属性在某些浏览器中需要前缀).为此,您可能不希望将尺寸减小多达50%但仅略微减小(在这种情况下类似于600x420).

注意:即使您"降低"帧速率,画布仍然以60 FPS重新绘制,但由于它不对中间帧执行任何实际工作,因此它仍然会卸载CPU/GPU,从而降低性能预算总体.

希望这会给出一些意见.