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:


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