更改MediaRecorder和canvas.captureStream的质量?

时间:2018-09-17 16:16:18

标签: javascript canvas web-mediarecorder

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

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

现在开始我的问题:是否有一种方法可以控制画布流的视频质量?如果没有,浏览器/ w3c是否考虑过类似的事情?

以下是whammy生成的视频帧之一的屏幕截图:

using whammy js library to combine webp frames into webm video

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

using MediaRecorder and canvas.captureStream

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

我尝试提高传递给captureStream方法的帧速率(认为可能发生了一些奇怪的帧插值),但这无济于事。如果我将其设置得太高,它实际上会降低质量。我目前的理论是,浏览器根据访问量来决定流的质量。这是有道理的,因为如果要跟上我指定的帧速率,那么就必须付出一些努力。

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

编辑: Here's粗略地介绍了我正在使用的代码,以防万一类似情况的人受益。

1 个答案:

答案 0 :(得分:3)

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

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

这些编解码器通常具有一些可配置的设置,这些设置将使我们能够改善编码的恒定质量,但是MediaRecorder的规范与编解码器无关,它们尚未为我们的Web开发人员提供API中的选项(至今)设置固定比特率以外的任何其他选项(在这里不会为我们提供更多帮助)。

this proposal,但要求提供此功能。