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现在也支持更多视频编解码器。] < / EM>

Chrome是唯一支持YUVA webm显示的稳定频道（FF在夜间支持54），is still not able to include the duration在其录制的文件中，让他们在添加hackish之前修复此问题{ {1}}。

但是，您可以轻松地实现种类：

如果你真的想要一个透明的webm文件（只能在Chrome和FF中每晚读取），你可以使用第二个画布进行录制，将其背景（使用alpha_mode=true）设置为不会出现的色度出现在图纸的其他地方，在其上绘制原始图像并记录其流。录制完成后，使用ffmpeg重新编码录制的视频，这次使用alpha通道：

fillRect

^{我个人需要// 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
标志，不确定每个人都需要它}

但是由于这个other chrome bug，你实际上还必须在屏幕上附加其他画布，并用css隐藏它（-auto-alt-ref 0应该这样做。）

TL; DR

这个API的实现远未稳定，没有人提出这样的功能请求，但它可能在不久的将来出现，并且可以暂时在服务器端完成。

使用canvas.captureStream（）使用Alpha通道捕获视频

1 个答案:

TL; DR