使用 canvas.captureStream() 使用 alpha 通道捕获视频

Question

我正在尝试使用 Alpha 通道捕获 canvas 元素的内容。当我这样做时，我正确地获得了 RGB 值，但是在播放生成的视频时 Alpha 通道似乎被丢弃了。有办法实现吗？

我是运行以下代码：

var stream = canvas.captureStream(60);
var recorder = new MediaRecorder(stream);

recorder.addEventListener('dataavailable', finishCapturing);
recorder.addEventListener('stop', function(e) {
    video.oncanplay = video.play;
    video.src = URL.createObjectURL(new Blob(blobs, {type:"video/webm; codecs=vp9"}));
});
startCapturing();
recorder.start();

这里有一个 plnkr 演示了这个问题： http://plnkr.co/edit/z3UL9ikmn6PtVoAHvY0B?p=preview

Answer 1

目前没有从 MediaRecorder API.
启用（VP8/9 透明通道）的选项可以在 W3C Mediacapture-Record git repo 上提出一个问题。

为此，我可以猜出几个原因：

据我了解，webm alpha 通道完全是 chrome 的黑客攻击，并没有真正在编解码器本身中实现，也没有完全稳定。
MediaRecorder 应该能够以多种格式进行编码，即使当前的实现仅支持视频 webm/VP8 和 webm/VP9（仅 chrome）。所以这意味着他们将不得不以某种方式将 alpha 通道保留在原始流中，仅用于这种新的 canvas.captureStream 方法。过去，MediaStream 主要来自 getUserMedia 接口，没有必要从那里获取透明度。
[编辑：Specs 自撰写此答案以来已更改，MediaStreams 现在应保留 alpha 通道，即使消费者可能无法使用它，Chrome 现在也支持更多视频编解码器。]
Chrome，这是唯一在其稳定频道支持YUVA webm显示的（FF在nightly 54支持），is still not able to include the duration在他们录制的文件中，让我们他们在添加 hackish alpha_mode=true.
之前解决了这个问题

但是，您可以自己实现有点 :

如果你真的想要一个透明的 webm 文件（只能在 chrome 和 FF nightly 中读取），你可以使用第二个 canvas 来录制，设置它的背景（使用 fillRect) 到不会出现在您的绘图中其他地方的色度，在其上绘制原始色度并记录其流。录制完成后，使用 ffmpeg 重新编码录制的视频，这次使用 alpha 通道：

// all #00FF00 pixels will become transparent.
ffmpeg -i in.webm -c:v libvpx -vf "chromakey=0x00ff00:0.1:0.1,format=yuva420p" -auto-alt-ref 0 out.webm

^{我个人需要 -auto-alt-ref 0 标志，但不确定每个人都需要它}

但是因为这个 other chrome bug，你实际上必须在屏幕上附加另一个 canvas，并用 css 隐藏它（opacity: 0; width:0px; height:0px; 应该做).

TL;DR

这个API的实现还远没有稳定下来，还没有人提出这样的功能要求，不过可能在不久的将来，并且可以完成server-side暂时.

使用 canvas.captureStream() 使用 alpha 通道捕获视频

Capture video with alpha channel using canvas.captureStream()

javascript

html

google-chrome

canvas

mediarecorder-api

TL;DR