Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 371
Ed Plese Avatar asked Aug 01 '20 21:08

Ed Plese


Video Answer


1 Answers

It is not using hardware accelerated video encoding so it is not able to capture at this rate due to the encoding being limited by available CPU resources. With some basic tests this maxed out all 4 cores of the Pixel 3a at 100%, leading to the choppy video capture.

MediaRecorder on Chrome Android in general supports only VP8 and VP9 video codecs for encoding. I tested this with the code at https://stackoverflow.com/a/64656254/2281056. As a bit of quirky behavior Chrome Android seems to incorrectly report that it supports types in the format ${type};codecs:${codec} so I removed these.

On the hardware side the Pixel 3a uses the Qualcomm Snapdragon 670. From the specifications it only supports video capture in the HEVC (h.265) format.

In summary Chrome Android only supports video capture in VP8 or VP9 but most Android hardware does not provide hardware acceleration for these formats, leading to poor quality capture.

like image 144
Ed Plese Avatar answered Sep 30 '22 19:09

Ed Plese