Firefox canvas.captureStream captures black frames as was inactive

Question

I'm trying to create a singature pad with https://github.com/szimek/signature_pad, capture the stream of the canvas and create a video of the signature from it. In Chrome works like a charm but in Firefox captures black frames instead (like if the MediaRecoder was inactive or muted).

I made a StackBlitz demo: https://stackblitz.com/edit/js-kbbicy

You can draw in the first canvas and when you press the "Make Video" button Firefox reproduces a black screen video.

I test it in:

• FireFox 78.0.2 for Linux: Black Frames
• Chromium 84.0.4 for Linux: Work well
• Chrome 84.0.4147 for Linux: Works well

Answer 1

The problem is simply that Firefox can't record transparent videos, so all the transparent background is converted to black in the video.

Simply set a white background to your SignaturePad:

signaturePad = new SignaturePad(canvas, {
  backgroundColor: "white"
})