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