Firefox canvas.captureStream 捕获处于非活动状态的黑框答案

【问题标题】：Firefox canvas.captureStream captures black frames as was inactiveFirefox canvas.captureStream 捕获处于非活动状态的黑框
【发布时间】：2020-07-20 11:29:33
【问题描述】：

我正在尝试使用https://github.com/szimek/signature_pad 创建一个签名板，捕获画布流并从中创建签名视频。在 Chrome 中就像一个魅力，但在 Firefox 中则捕获黑帧（就像 MediaRecoder 处于非活动状态或静音时一样）。

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

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

我测试它：

FireFox 78.0.2 for Linux：黑框
适用于 Linux 的 Chromium 84.0.4：运行良好
适用于 Linux 的 Chrome 84.0.4147：运行良好

【问题讨论】：

标签： javascript firefox canvas html5-video signaturepad

【解决方案1】：

问题很简单，火狐无法录制透明视频，所以视频中的透明背景全部转为黑色。

只需为您的 SignaturePad 设置一个白色背景：

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

【讨论】：