改变MediaRecorder和canvas.captureStream的质量?

问题描述 投票:2回答:1

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

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

现在问我的问题:有没有办法控制画布流的视频质量?如果没有,浏览器/ 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我正在使用的代码的粗略草图,以防它在类似的情况下帮助任何人。

javascript canvas web-mediarecorder
1个回答
3
投票

这些都是压缩工件,现在你可以做的不多了......

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

这些编解码器通常具有一些可配置的设置,可以让我们提高编码的恒定质量,但是MediaRecorder的规范与编解码器无关,他们没有在API中为我们的web-devs设置任何其他设置。选项比固定比特率(这对我们不会有更多帮助)。

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

© www.soinside.com 2019 - 2024. All rights reserved.