Tuesday, 29 September 2020

Video capture in mobile browser at 60 FPS

I am trying to capture video at 60 FPS from a web app in Chrome Android. I have the appropriate video.frameRate constraint set for the call to getUserMedia. Chrome recognizes the frameRate setting and reports through the video track setting that it is capturing at 60 FPS but visually the video is only 30 FPS and not 60. On the same device through the stock Android Camera app it captures smooth 60 FPS video at the same resolution as I am trying through the web app.

I am testing this with Chrome Android 84 on a Pixel 3a. I have also tested on other phones at resolutions that those phones support at 60 FPS and regardless it only captures at 30 FPS.

Below is example code that demonstrates this behavior.

How can I achieve this? Or is capturing at 60 FPS not currently possible with Chrome Android?

<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" width="1920" height="1080"></video>
</body>
</html>


from Video capture in mobile browser at 60 FPS

No comments:

Post a Comment