我目前正在通過 WebRTC 發送畫布流，使用canvas.captureStream(). 這按預期作業，但我的畫布是另一個視頻的疊加層，因此具有透明像素。
我知道通常的 H26x 或 VPx 格式不支持透明度（另請參閱使用 webrtc 使用透明像素流式傳輸視頻），所以我決定使用舊的色度鍵控（即 100% 綠色 == 透明）。
為了到達那里，我目前在啟動時用透明綠色填充畫布：
// 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);
這在客戶端看起來是正確的（畫布是透明的，我在上面畫的不是），但是在通過 WebRTC 輸出的結果流中，瀏覽器中透明的背景顯然只是黑色，而不是綠色。我希望 alpha 值會下降？
當我將 alpha 值更改為 0 以外的任何值（例如 1 或 128）時，結果不再透明，而是在傳出流（好）和瀏覽器（不好）中完全不透明的亮綠色。
我寧愿避免在 Javascript 中為隱藏畫布上的每一幀手動執行 RGBA -> RGB 轉換，這是我現在能想到的唯一替代方法。非常歡迎其他想法:-)
編輯：在 Ubuntu 20.04 上使用 Chrome 96 和 Firefox 94 進行測驗。作為參考，這里是合成操作的描述：https : //developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example
uj5u.com熱心網友回復：
根據Kaiido的評論（謝謝！），我想出了一個相對（？）有效的解決方案：我現在有兩個畫布，一個可見，一個隱藏，并且所有繪圖命令都只是在它們上復制。可見的使用透明的黑色背景并覆寫在視頻上，隱藏的使用亮綠色背景作為流源。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/391616.html
標籤：javascript 谷歌浏览器 火狐 帆布 网页版