改变 MediaRecorder 和 canvas.captureStream 的质量？

Question

我最近一直在尝试在浏览器中生成视频，因此一直在使用两种方法：

• 使用whammy js 库将 webp 帧组合成 webm 视频。更多详情请点击这里。
• 使用MediaRecorder和canvas.captureStream. 更多详细信息请参见此处。

whammy 方法效果很好，但仅在 Chrome 中受支持，因为它是当前唯一支持 webp 编码 ( canvas.toDataURL("image/webp")) 的浏览器。所以我使用该captureStream方法作为 Firefox 的备份（并使用libwebpjs在 Safari 中

现在我的问题是：有没有办法控制画布流的视频质量？如果没有，浏览器/w3c 是否考虑过类似的事情？

这是 whammy 生成的视频的其中一帧的屏幕截图：

这是该MediaRecorder/canvas.captureStream方法生成的相同框架：

我的第一个想法是人为地增加我正在流式传输的画布的分辨率，但我不希望输出视频更大。

我尝试增加传递给该captureStream方法的帧速率（认为可能会发生一些奇怪的帧插值），但这没有帮助。如果我把它设置得太高，它实际上会降低质量。我目前的理论是，浏览器根据它可以访问的计算能力来决定流的质量。这是有道理的，因为如果它要跟上我指定的帧速率，那么就必须做出一些牺牲。

因此，下一个想法是，我应该放慢向画布提供图像的速度，然后按比例降低传递给 的 FPS 值captureStream，但问题是，即使我可能已经解决了由于质量问题，我最终会得到一个比预期运行速度慢的视频。

编辑： 这是我正在使用的代码的粗略草图，以防它对遇到类似情况的任何人有所帮助。

Answer 1

这些是压缩工件，目前您无能为力......

视频编解码器的构建主要是为了显示真实的颜色和形状，有点像质量非常低的 JPEG。他们还将尽最大努力在关键帧之间保留尽可能少的信息（有些使用运动检测算法），以便需要存储更少的数据。

这些编解码器通常具有一些可配置的设置，使我们能够提高编码的恒定质量，但 MediaRecorder 的规格与编解码器无关，他们（尚未）在 API 中提供选项供我们网络开发人员设置任何其他选项而不是固定比特率（这对我们在这里没有更多帮助）。

有一个提案，它要求这样的功能。