Open In App

How to get Camera Resolution using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn to find the maximum resolution supported by the camera. We need to request camera access from the user and once access is given we can check the resolution of the video stream and find out the resolution given by the camera.

The .getUserMedia() method asks the user for permission to use a media input that produces a MediaStream of the requested types of media. It includes video (produced by a camera, video recording device, screen sharing service), audio, and other media tracks.

Syntax:

stream = await navigator.mediaDevices.getUserMedia(params);
.then(function (stream) {
    /* use the stream */
}).catch(function (err) {
    /* error */
});

Example: This example will illustrate how to get Camera Resolution using JavaScript:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <button id="start">Start Camera</button>
  
    <script>
        document.querySelector("#start").addEventListener(
            'click', async function () {
  
                let features = {
                    audio: true,
                    video: {
                        width: { ideal: 1800 },
                        height: { ideal: 900 }
                    }
                };
  
                let display = await navigator.mediaDevices
                    .getUserMedia(features);
  
                // Returns a sequence of MediaStreamTrack objects 
                // representing the video tracks in the stream
  
                let settings = display.getVideoTracks()[0]
                    .getSettings();
  
                let width = settings.width;
                let height = settings.height;
  
                console.log('Actual width of the camera video: '
                    + width + 'px');
                console.log('Actual height of the camera video:'
                    + height + 'px');
            });
    </script>
</body>
  
</html>


Output:

 



Last Updated : 14 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads