假設我有一個畫布：
<canvas height="500" width="500"></canvas>
我可以使用captureStream從中捕獲視頻。
因此，如果我有一個視頻元素，我可以將捕獲的流傳遞給它，并查看我在視頻中繪制的鏡像：
<video autoplay height="500" width="500"></video>
const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const stream = canvas.captureStream(25);
video.srcObject = stream;
video.play();
我也可以從這個畫布中派生一個OffscreenCanvas，并轉移到另一個框架
const iframe = document.querySelector("iframe");
const offscreen = canvas.transferControlToOffscreen();
iframe.contentWindow.postMessage(
{
type: "canvasTransfer",
canvas: offscreen
},
"*",
[offscreen]
);
并從沙盒 iframe 中執行繪圖操作。
這似乎在 chrome 中作業正常，但在 firefox captureStream 失敗，我收到以下錯誤：
[Exception... "Component not initialized" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: https://2rlmz5.csb.app/src/index.js :: $csb$eval :: line 16" data: no]
有已知的解析度嗎？非常感謝任何幫助。
代碼沙盒
uj5u.com熱心網友回復：
Firefox 中有一個與此相關的開放錯誤。至于現在，在 Firefox 中，如果背景關系未初始化，captureStream則會拋出。canvas在getContext呼叫 之前，呼叫captureStream會修復該錯誤：
const canvas = document.querySelector("canvas");
canvas.getContext('2d');
const stream = canvas.captureStream(25);<canvas height="500" width="500"></canvas>但是，這里的問題是，transferControlToOffscreen如果畫布背景關系被初始化，則不起作用，反之亦然，如果transferControlToOffscreen首先呼叫，那么畫布背景關系只能在螢屏外初始化。
因此，唯一的解決辦法是等待該錯誤被修復。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/515467.html