javascript - 在 HTML 视频播放器中使用 JavaScript 应用水波纹效果

Question

我正在尝试在嵌入 HTML5 默认网络播放器的视频中创建 water ripple effect。

我在使用图像和覆盖 Canvas 方面做得很好，但我现在想做的是从视频中获取单帧并使用 this tutorial 每 1-5 毫秒将其输出到 Canvas 。

我卡在了这一点上，我可以使用
将帧输出到另一个 Canvas 中canvas.toDataURL() 函数。

我见过高级的基于网络的视频播放器，可以在视频上应用 Processing.js 草图，这是一个好的解决方案吗？

我的问题是:使用 JavaScript 将视觉效果(在本例中为水波纹)应用于 HTML5 媒体播放器中播放的视频的最佳和最可靠的解决方案是什么。

Answer 1

My question is: what would be the best and most reliable solution for applying visual effects (water ripples in this case) using JavaScript to a video playing in HTML5 media player.

在我看来，最好的方法是使用 WebGL 创建效果，使用视频作为输入纹理和使用动画凹凸贴图操作的简单平面几何体 - 或者 - 直接操纵顶点 - 或者 - 可能是着色器程序，然后将结果输出到 Canvas 。

我根本不会将视频放在 DOM 中，而是创建控制按钮并在 DOM 中显示那些和输出 [webgl-]canvas。

当在没有 GPU 的计算机上使用时，除了稍微复杂的代码之外，明显的缺点是(但无论如何这都是一个缺点，如果您使用常规的 2D Canvas 和像素操作，则更是如此) .

就代码示例而言，这当然非常广泛。但我假设您已经大致了解了。

一些注意事项:

[...] what I am trying to do now is to get single frames from a video and output it to a canvas every 1-5ms [...]

这在时间预算方面有点毫无意义，因为典型的显示器只能每 ~16.7 毫秒刷新一次图像，这意味着您至少浪费了 3-4 帧从未显示过的帧。

此外，典型视频源的运行速度永远不会超过 30 FPS(在美国，在欧洲为 25 FPS)，这意味着每 33.3 毫秒只有一个新帧(当然也有特殊情况的视频，例如 VR/AR、立体、游戏和“Mac”录制的视频等可能使用更高的 fps - 但在大多数情况下，任何大于 30 fps 的通常都是浪费周期)，这允许更高的时间预算来处理每帧.

I can output frame into another canvas using canvas.toDataURL() function [...]

滚! :) 这是一个巨大的开销。浏览器必须使用行过滤(在 PNG 的情况下——好吧，有些浏览器会跳过这个并使用过滤器 0)、压缩、base-64 编码，然后将源应用到图像元素、解码 base-64、解压缩、过滤...

您可以简单地使用 drawImage() 的源 Canvas 直接并且只需要处理内存中的位图(超快!)。

综上所述:如果简单性在代码方面很重要，您当然可以使用 2D Canvas 完成所有这些操作。您可以使用 drawImage() 来置换像素/ block 并因此在 GPU 上工作(但不一定比直接在位图上工作更快，具体取决于您如何应用实际置换)。

但仍有许多注意事项，例如视频源和目标分辨率对性能有指数级影响，GPU 的使用有限，因为您仍然需要执行多个串行操作而不是并行操作webgl/gpu 等等。本质上，与 webgl 解决方案相比，性能将受到影响。