Skip to content
Related Articles

Related Articles

How to get Camera Resolution using JavaScript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Jun, 2022

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:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!