视频背景透明使用canvas / svg(Video background transparent using canvas / svg)

视频背景透明使用canvas / svg(Video background transparent using canvas / svg)

我正在尝试将视频背景更改为透明。 我有红色和使用几个解决方案，但他们不能用我在youtube上使用的视频。

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

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

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

这是我得到的结果。

I am trying to change the background of video to transparent. I have red and use couple of solution but they did not work quite will with video I use from youtube.

The solution I use are 1) https://github.com/m90/seeThru 2) https://jakearchibald.com/scratch/alphavid/

The both the solution is working fine with their demo video but not with the video I use.

If someone can explain about how is it working. So might be I can able to fix the issue.

Here is the result which I am getting.

最满意答案

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

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

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

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

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

There are several methods that are used. The best effect is the use of a precomputed mask (done during post production) that is added to the bottom half of the video. The video is then rendered to a canvas and the two half's combined to create the transparent frame by getting the pixel data and moving the a colour channel to the alpha channel.

The process is very CPU (for Javascript) intensive and only good for low resolution video. Plus you need to create the animated mask and double the size of the video. If you view the second example in the standard player you will see the other half.

The Second method used by the first example is to compute the alpha on the fly. This is even more CPU intensive but very simple to do. Again if you have low resolution video and a fast device it is practical. You are then faced with the problem of setting the thresholds for transparency, because videos use lossy compression you will have trouble with edges and the threshold colour.

Your best bet is to use a WebGL solution (if you don't want to do it in post production) and do the masking on the GPU where you can have a more complex algorithm and some chronological filtering as well. Though it will depend on the video quality, the type of background (single colour or static background). You could also find a asm.js solution that will work better. I remember seeing one some time ago, I will provide the link if I can find it.

Unfortunately JavaScript is not up to the job of high quality matte effects in realtime for the time being. It is a shame as the 2D API would only need a single additional global composite operation, "chroma-alpha" (move the mean source RGB to the destination alpha) that would open up so many addition canvas effects (which god do I pray to for that to happen?). For now you have to move every pixel in javascript