视频背景透明使用canvas / svg

Question

我正在尝试将视频背景更改为透明。我有红色并且使用了几个解决方案，但是我们使用来自youtube的视频并不能正常工作。

我使用的解决方案是 1）https://github.com/m90/seeThru 2）https://jakearchibald.com/scratch/alphavid/

这两个解决方案都可以正常使用他们的演示视频，但不适用于我使用的视频。

如果有人能解释它是如何运作的话。所以我可以解决这个问题。

以下是我得到的结果。

Answer 1

使用了几种方法。最佳效果是使用预先计算的掩码（在后期制作期间完成），该掩码被添加到视频的下半部分。然后将视频渲染到画布上，并通过获取像素数据并将颜色通道移动到Alpha通道来组合两个半部分来创建透明框架。

这个过程非常强大的CPU（适用于Javascript），只适用于低分辨率视频。另外，您需要创建动画蒙版并将视频大小加倍。如果您在标准播放器中查看第二个示例，您将看到另一半。

第一个示例使用的第二种方法是动态计算alpha。这更加耗费CPU，但操作非常简单。再次，如果你有低分辨率的视频和快速的设备，它是实用的。然后您面临设置透明度阈值的问题，因为视频使用有损压缩，您将遇到边缘和阈值颜色的问题。

您最好的选择是使用WebGL解决方案（如果您不想在后期制作中执行此操作）并在GPU上执行屏蔽，您可以在其中使用更复杂的算法和一些按时间顺序排列的过滤器。虽然它取决于视频质量，背景类型（单色或静态背景）。您还可以找到一个更好的asm.js解决方案。我记得前一段时间见过，如果能找到它，我会提供链接。

不幸的是，JavaScript暂时无法实时获得高质量的遮罩效果。令人遗憾的是，2D API只需要一个额外的全局复合操作，“色度-α”（将平均源RGB移动到目标alpha），这将打开如此多的附加画布效果（我祈祷上帝）为了那个发生？）。现在你必须移动javascript中的每个像素