在HTML视频播放器中用JavaScript实现水波效果

Question

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

我使用图像和覆盖画布做得很好，但我现在尝试做的是从视频中获得单帧，并使用this tutorial每隔1-5ms将其输出到画布。

我被困在这一点上，我可以使用以下命令将帧输出到另一个画布中

canvas.toDataURL()函数。

我见过一些先进的基于web的视频播放器，允许在视频之上应用Processing.js草图，这是一个好的解决方案吗？

我的问题是:在HTML5媒体播放器中使用JavaScript对视频播放应用视觉效果(在这种情况下是水波)，最好和最可靠的解决方案是什么？

Answer 1

我的问题是:使用JavaScript对HTML5媒体播放器中的视频播放应用视觉效果(在这种情况下是水波)，最好和最可靠的解决方案是什么？

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

我根本不会将视频放在DOM中，而是创建控制按钮并将它们与输出的webgl-canvas一起显示在DOM中。

当在没有GPU的计算机上使用时，除了稍微复杂的代码之外，明显的缺点是(但这在任何情况下都是一个缺点，如果你使用常规的2D画布和像素操作，更是如此)。

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

以下是几个注意事项：

...我现在尝试做的是从视频中获取单帧，并每隔1-5ms将其输出到画布上……

这在时间预算上是没有意义的，因为典型的显示器每隔16.7ms才能刷新一次图像，这意味着你浪费了至少3-4帧从未显示过的帧。

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

I可以使用canvas.toDataURL()函数将帧输出到另一个画布中...

Outch！:)这是一个巨大的开销。浏览器将不得不使用行过滤(在PNG的情况下，一些浏览器跳过这一点并使用过滤器0)，压缩，base-64编码，然后将源应用到图像元素，解码base-64，解压缩，解过滤...

相反，您可以直接使用drawImage()的源画布，并且只需处理内存中的位图(超级快！)。

话虽如此:如果简单性在代码方面很重要，那么您当然可以使用2D画布来完成所有这些工作。您可以使用drawImage()来置换像素/块，并因此在图形处理器上工作(但不一定比直接处理位图更快，这取决于您如何应用实际的置换)。

但仍然有许多警告，例如视频源和目标分辨率对性能有指数影响，限制GPU的使用，因为您仍然必须使用webgl/gpu进行多个串行操作而不是并行操作，等等。从本质上讲，与webgl解决方案相比，性能会有所下降。

Answer 2

如果你想获得高性能，你可以使用WebGL。下面是一个水波项目的github reop。

https://github.com/sirxemic/jquery.ripples/

下面是一个关于jQuery WebGL涟漪的破坏性示例

http://sirxemic.github.io/jquery.ripples/

我觉得这可能会有帮助

Answer 3

您可以通过几种方式来完成此操作。您可以使用canvas编写核心javascript代码。但我认为最好使用Jquery插件。有几个插件可用于水的涟漪。

您可以查看以下链接：

https://github.com/virtyaluk/paper-ripple

https://github.com/sirxemic/jquery.ripples

https://github.com/andyvr/water-ripple