Search code examples
javascriptfirefoxcanvashtml5-videosignaturepad

Firefox canvas.captureStream captures black frames as was inactive

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
Solution

  • 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"
})