在移动浏览器中以 60 FPS 的速度捕获视频
Posted
技术标签:
【中文标题】在移动浏览器中以 60 FPS 的速度捕获视频【英文标题】：Video capture in mobile browser at 60 FPS 【发布时间】：2020-11-22 09:15:30 【问题描述】：我正在尝试从 Chrome android 中的网络应用程序以 60 FPS 的速度捕获视频。我为调用getUserMedia 设置了适当的video.frameRate 约束。 Chrome 识别 frameRate 设置并通过视频轨道设置报告它以 60 FPS 的速度捕获，但视觉上视频仅为 30 FPS 而不是 60。在同一设备上，通过股票 Android 相机应用程序它以 60 FPS 的速度捕获流畅的视频与我通过网络应用程序尝试的分辨率相同。
我正在 Pixel 3a 上使用 Chrome Android 84 对此进行测试。我还在其他手机上以这些手机支持 60 FPS 的分辨率进行了测试，而不管它仅以 30 FPS 的速度捕获。
以下是演示此行为的示例代码。
我怎样才能做到这一点？还是 Chrome Android 目前无法以 60 FPS 进行捕捉？
<html>
<head>
<title>frameRate</title>
<script>
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
var constraints =
video:
width: exact: 1920 ,
height: exact: 1080 ,
facingMode: ideal: "environment" ,
frameRate: exact: 60
;
navigator.mediaDevices.getUserMedia(constraints).then(function (stream)
var video = document.getElementById('video');
video.srcObject = stream;
video.play();
document.getElementById('frameRate').innerHTML = 'frameRate: ' + stream.getTracks()[0].getSettings().frameRate;
);
</script>
</head>
<body>
<p id="frameRate"></p>
<video id="video" ></video>
</body>
</html>
【问题讨论】：
Chrome Android 的刷新率好像是 30Hz。我的基础是我多久可以让一个函数调用自己。简单的函数 f() f(); 可以在 100s Hz 时调用自己，这没问题。但如果它使用“setTimeout”或“requestAnimationFrame”调用自己，我无法在笔记本电脑和三部不同的手机上低于 30 Hz。 你是如何确定“.. 视频只有 30 FPS”？ @AlexanderMathiasen 对我来说，60 FPS 的视频以超级流畅的运动而著称，一般没有明显的运动模糊。很难描述。我在移动设备上看到的显然不是那样，而且整体上也有很大的抖动。 【参考方案1】：它没有使用硬件加速的视频编码，因此由于编码受到可用 CPU 资源的限制，因此无法以这种速率进行捕获。通过一些基本测试，Pixel 3a 的所有 4 个内核都达到了 100%，导致视频捕捉不稳定。
Chrome Android 上的MediaRecorder 通常仅支持 VP8 和 VP9 视频编解码器进行编码。我用https://***.com/a/64656254/2281056 的代码对此进行了测试。作为一个古怪的行为，Chrome Android 似乎错误地报告它支持$type;codecs:$codec 格式的类型，所以我删除了这些。
在硬件方面，Pixel 3a 使用 Qualcomm Snapdragon 670。从specifications 开始，它仅支持 HEVC (h.265) 格式的视频捕获。
综上所述，Chrome Android 仅支持 VP8 或 VP9 的视频捕获，但大多数 Android 硬件不为这些格式提供硬件加速，导致捕获质量不佳。
【讨论】：
那么有什么解决方法吗？您提到大部分 Android 硬件不提供VP8/VP9 的硬件加速；您是否知道一些支持这些编解码器进行视频捕获的手机？我查看了高通网站，找不到支持该编解码器的处理器，至少不是流行的处理器。或者，是否有其他一些支持 HEVC 的移动浏览器？ @Anderson 我没有找到任何解决方法，也没有找到任何适用的 Android 手机。我的研究显示了与您类似的结果，即高通处理器仅支持 HEVC。本机应用程序确实具有此功能，因此使用本机或混合应用程序可以解决此问题，但在这种情况下我试图避免使用本机应用程序。以上是关于在移动浏览器中以 60 FPS 的速度捕获视频的主要内容，如果未能解决你的问题，请参考以下文章
使用 Core Graphics 以 30-60 fps 手动移动/旋转物体
60 FPS 是啥意思在 Flutter 中如何一个屏幕每秒有 60 帧
C、GTK：以 < 60 fps 的速度显示 RGB 图像流
如何解决使用 iphone 4s、ipad 2 以 60fps 录制视频时出现的问题？
在 Atom Electron 中以 60fps 将 <canvas> 图像从 BrowserWindow 复制到另一个