我正在使用HTML5视频创建一个应用程序，并在其上面绘制一个画布（640x480像素）。目标是将画布绘图与编码视频一起记录，以将其生成为单个视频。我能够使用FFMPEG完成所有这些工作。但我面临的问题是，当HTML5视频运行时，它需要大约50％的CPU。由于在画布上绘图也要求CPU，浏览器在一定时间后冻结并且铬上该标签的CPU使用率连续显示＆gt; 100.我试图优化html5画布渲染。但没有任何帮助。有没有办法以更少的CPU使用率运行此视频？或任何其他可能的优化？
答案 0 :(得分：6)
如果硬件需要使用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);
})();
确保画布大小和CSS大小完全相同。或者说简单：不要使用CSS来设置画布的大小。
您可以在某些浏览器中禁用画布的alpha合成，以获得更快的速度。消费者视频永远不会带有alpha频道。
// disable alpha-composition of the canvas element where supported
var context = canvas.getContext("2d", {alpha: false});
确保使用大小和解压缩负载之间的平衡对视频进行编码。压缩的视频越多，需要花费更多的时间进行重建。使用不同的编码器设置进行编码，以找到适用于您的方案的天平。
还要考虑颜色深度等方面，即16比24比特。
H264编解码器是首选，因为它在各种显示接口硬件中具有广泛的支持。
如果视频的内容允许，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 - 实验！）。然后使用drawImage()方法的缩放参数绘制：
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, 640, 480);
这有助于减少需要加载和解码的数据量，但当然会降低质量。结果如何取决于内容。
您还可以在上下文中使用imageSmoothingEnabled设置为false来关闭插值（注意：某些浏览器中的属性需要前缀）。为此，您可能不希望将尺寸减小多达50％，但只是略微减小（在这种情况下类似于600x420）。
注意：即使你＆＃34;减少＆＃34;画布仍以60 FPS重新绘制的帧速率，但由于它在中间帧上没有做任何实际工作，它仍然会卸载CPU / GPU，从而使您的性能预算不那么紧张所有
希望这能提供一些意见。