javascript - 改变 MediaRecorder 和 canvas.captureStream 的质量?
问题描述
我最近一直在尝试在浏览器中生成视频,因此一直在使用两种方法:
whammy 方法效果很好,但仅在 Chrome 中受支持,因为它是当前唯一支持 webp 编码 ( canvas.toDataURL("image/webp")
) 的浏览器。因此,我使用该captureStream
方法作为 Firefox 的备份(并将libwebpjs用于 Safari)。
所以现在我的问题是:有没有办法控制画布流的视频质量?如果没有,浏览器/w3c 是否考虑过这样的事情?
这是 whammy 生成的视频的其中一帧的屏幕截图:
这是该MediaRecorder/canvas.captureStream
方法生成的同一帧:
我的第一个想法是人为地增加我正在流式传输的画布的分辨率,但我不希望输出视频更大。
我已经尝试增加传递给该captureStream
方法的帧速率(认为可能会发生一些奇怪的帧插值),但这无济于事。如果我把它设置得太高,它实际上会降低质量。我目前的理论是浏览器根据它可以访问的计算能力来决定流的质量。这是有道理的,因为如果它要跟上我指定的帧速率,那么就必须付出一些代价。
所以下一个想法是我应该放慢我在画布上输入图像的速度,然后按比例降低我传入的 FPS 值captureStream
,但问题是即使我可能已经解决了质量问题,然后我会得到一个运行速度比预期慢的视频。
编辑: 这是我正在使用的代码的粗略草图,以防它对处于类似情况的任何人有所帮助。
解决方案
这些是压缩伪影,目前您无能为力...
视频编解码器的构建主要是为了显示真实的颜色和形状,有点像质量非常低的 JPEG。他们还将尽最大努力在关键帧之间保留尽可能少的信息(有些使用运动检测算法),以便他们需要更少的数据来存储。
这些编解码器通常具有一些可配置的设置,可以让我们提高编码的恒定质量,但是 MediaRecorder 的规范与编解码器无关,他们没有在 API 中为我们的 web 开发人员提供设置任何其他的选项比固定比特率的选项(在这里对我们没有更多帮助)。
有这个提案,虽然它要求这样一个功能。
推荐阅读
- python - 熊猫日期时间聚合
- reactjs - 在空检查后从不定义为类型的变量
- javascript - React boostrap 轮播不工作
- python - Keras LSTM XOR 门
- php - EXIF 定向 CodeIgniter
- macos - OS/X (Snow Leopard) 上最新 SSL/TLS 的清单是什么
- sql - 文本被截断或目标代码页中的一个或多个字符不匹配 ole db 源到平面文件目标
- python - 我需要帮助让 pandas 在数据框交互方面表现更好
- flutter - DrawerLayout:如何在颤动中制作这个自定义布局
- iis-7 - Octopusdeploy 从一个包部署多个站点