改变 MediaRecorder 和 canvas.captureStream 的质量?

Changing quality of MediaRecorder and canvas.captureStream?

我最近一直在尝试在浏览器中生成视频,因此一直在尝试两种方法:

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

现在回答我的问题:有没有办法控制 canvas 流的视频质量?如果没有,浏览器/w3c 是否考虑过这样的事情?

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

这里是 MediaRecorder/canvas.captureStream 方法生成的相同帧:

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

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

所以下一个想法是我应该放慢我向 canvas 提供图像的速度,然后按比例降低我传递给 captureStream 的 FPS 值,但是这样做的问题是,即使我可能已经解决了质量问题,我最终还是会得到一个运行速度比预期慢的视频。

编辑: Here's 我正在使用的代码的粗略草图,以防它能帮助处于类似情况的任何人。

这些是压缩伪影,您目前无能为力...

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

这些编解码器通常有一些可配置的设置,使我们能够提高编码的恒定质量,但 MediaRecorder 的规范与编解码器无关,它们没有在 API 中提供(还)一个选项让我们的网络开发者设置除固定比特率之外的任何其他选项(这在这里对我们没有更多帮助)。

虽然有 this proposal,它要求这样的功能。