captureStream from transferred canvas not working in firefox

Question

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

Answer 1

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.