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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
