代码之家 › 专栏 › 技术社区 › user993683

改变MediaRecorder和canvas.captureStream?

web-mediarecorder canvas javascript

2

user993683 · 技术社区 · 7 年前

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

whammy方法工作得很好,但只在Chrome中受支持,因为它是目前唯一支持webp编码的浏览器( canvas.toDataURL("image/webp") ). 所以我用 captureStream libwebpjs 用于狩猎)。

以下是由whammy生成的视频其中一帧的截图:

MediaRecorder/canvas.captureStream 方法:

我试过提高传送到服务器的帧速率 捕获流

所以下一个想法是,我应该放慢速度,我喂画布与图像,然后成比例地降低FPS值,我传入 捕获流 ,但问题是,即使我很可能已经解决了质量问题,我最终还是会得到一个比预期运行速度慢的视频。

Here's 我正在使用的代码的一个粗略草图,以防在类似情况下对任何人都有帮助。

1 回复 | 直到 7 年前

1

3

Kaiido 7 年前

这些都是压缩工件,现在没有什么可以做的。。。

视频编解码器的构建主要是为了显示现实生活中的颜色和形状,有点像JPEG,但质量很低。他们也会尽最大努力在关键帧之间保留尽可能少的信息(有些使用运动检测算法),这样他们需要存储的数据就更少了。

这些编解码器通常有一些可配置的设置,允许我们提高编码的恒定质量,但MediaRecorder的规格与编解码器无关,它们在API中没有为我们web开发人员提供除固定比特率之外的任何其他选项(这在这里对我们没有更多帮助)。

有 this proposal ,它要求这样一个功能。