Firefox canvas.captureStream 捕获非活动的黑帧

Question

我正在尝试使用 https://github.com/szimek/signature_pad 创建签名板，捕获 canvas 的流并从中创建签名视频。在 Chrome 中工作起来很有魅力，但在 Firefox 中改为捕获黑帧（就像 MediaRecoder 处于非活动状态或静音时一样）。

我制作了一个 StackBlitz 演示： https://stackblitz.com/edit/js-kbbicy

您可以在第一个 canvas 中绘制，当您按下“制作视频”按钮时，Firefox 会再现黑屏视频。

我在以下时间测试它：

Answer 1

问题很简单，就是Firefox无法录制透明视频，所以视频中所有的透明背景都变成了黑色。

只需为您的 SignaturePad 设置白色背景即可：

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

Firefox canvas.captureStream captures black frames as was inactive