captureStream from transferred canvas not working in firefox-CodePudding

Let's say I have a canvas:

<canvas height="500" width="500"></canvas>

I can capture a video from it using captureStream.

So if I have a video element, I can pass it the captured stream and see whatever I draw mirrored in the video:

<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();

I can also derive an OffscreenCanvas from this canvas, and transfer to another frame

const iframe = document.querySelector("iframe");
const offscreen = canvas.transferControlToOffscreen();

iframe.contentWindow.postMessage(
  {
    type: "canvasTransfer",
    canvas: offscreen
  },
  "*",
  [offscreen]
);

And perform the drawing operation from within a sandboxed iframe.

This seems to work fine in chrome but in firefox captureStream fails and I get following error:

[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]

Is there a known resolution ? Any help is highly appreciated.

Codesandbox

CodePudding user response：

There is an open bug in Firefox related to this. As for now, in Firefox, the captureStream will throw if the canvas context is not initialized. A getContext call, before invoking captureStream, fixes that error:

const canvas = document.querySelector("canvas");

canvas.getContext('2d');

const stream = canvas.captureStream(25);

<canvas height="500" width="500"></canvas>

But, the problem here is that the transferControlToOffscreen does not work if the canvas context is initialized, and vice-versa if transferControlToOffscreen was invoked first, then canvas context can be initialized only in offscreen.
Thus, the only resolution is to wait for that bug to be fixed.