How to get Camera Resolution using JavaScript ?

How to get Camera Resolution using JavaScript ?

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:

How to get Camera Resolution using JavaScript ?

P

priddheshinternship

Improve

Article Tags :

Similar Reads

How to get the Width of Scroll bar using JavaScript?

Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth

How to get the div height using JavaScript ?

In this article, we will see How to get the div height using Javascript. We can do this by following ways: Using the offsetHeight property.Using the clientHeight property.Using getBoundingClientRect() Method. Method 1: Using the offsetHeight property: The offsetHeight property of an element is a rea

How to Take Screenshot of a Div Using JavaScript?

A screenshot of any element in JavaScript can be taken using the html2canvas library. This library can be downloaded from its official website. The below steps show the method to take a screenshot of a <div> element using JavaScript. ApproachIn this approach, we will create a blank HTML docume

How to detect touch screen device using JavaScript?

Sometimes you might be looking for some features to include into your web-app that should only be available to devices with a touch screen. You may need this detection while introducing newer smarter controls for touch screen users in the game app or a GPS and navigation application. While there are

How to detect virtual keyboard using JavaScript ?

This article, we are given an HTML document, the task is to detect a virtual keyboard if it pops up on the device's screen. A virtual keyboard is a tool that helps in the input of characters without the use of a physical keyboard. It is widely used in touchscreen devices.Approach: Unfortunately, the