以部分透明度流式传输 HTML5 canvas 内容？

Question

我目前正在使用 canvas.captureStream() 通过 WebRTC 发送 canvas 流。这按预期工作，但我的 canvas 是另一个视频的叠加层，因此具有透明像素。

我知道通常的 H26x 或 VPx 格式不支持透明度（另见 Streaming video with transparent pixels using webrtc），所以我决定使用旧的色度键控（即 100% 绿色 == 透明） ).

为此，我目前在启动时用透明绿色填充 canvas：

// already tried various composite ops here, none seem to work
// context.globalCompositeOperation = "destination-out";
context.fillStyle = "rgba(0,255,0,0)";
context.fillRect(0, 0, canvas.width, canvas.height);

这在客户端看起来是正确的（canvas 是透明的，无论我在上面画什么都不是），但是在通过 WebRTC 输出的结果流中，浏览器中透明的背景是显然只是黑色，而不是绿色。我希望 alpha 值会下降？

当我将 alpha 值更改为 0 以外的任何值（例如 1 或 128）时，结果不再透明，而是完全不透明的亮绿色，无论是在传出流（好）还是在浏览器中（不好）。

我宁愿避免在 Javascript 中为隐藏 canvas 上的每一帧手动执行 RGBA -> RGB 转换，这是我现在能想到的唯一选择。其他想法非常欢迎:-)

编辑：在 Ubuntu 20.04 上使用 Chrome 96 和 Firefox 94 进行了测试。作为参考，这里是合成操作的描述：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example

Answer 1

根据Kaiido的评论（谢谢！），我想出了一个相对（？）有效的解决方案：我现在有两个画布，一个可见，一个隐藏，并且所有绘图命令都被复制在他们两个上。可见的使用透明黑色背景并覆盖在视频上，隐藏的使用亮绿色背景并用作流源。

以部分透明度流式传输 HTML5 canvas 内容？

Streaming HTML5 canvas content with partial transparency?

javascript

google-chrome

firefox

canvas

webrtc