Skip to content

Courses
Tutorials
Practice
Contests

JS Tutorial
JS Exercise
JS Interview Questions
JS Array
JS String
JS Object
JS Operator
JS Date
JS Error
JS Projects
JS Set
JS Map
JS RegExp
JS Math
JS Number
JS Boolean
JS Examples
JS Free JS Course
JS A to Z Guide
JS Formatter

How to get the Width of Scroll bar using JavaScript?

How to get Camera Resolution using JavaScript ?

Last Updated : 14 Jun, 2022

Comments

Improve

Suggest changes

Like Article

Like

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:

How to get the Width of Scroll bar using JavaScript?

P

priddheshinternship

Improve

Article Tags :

JavaScript
Web Technologies
JavaScript-Questions

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 Detect Network Speed using JavaScript?

Network speed detection in JavaScript involves measuring the time it takes to download a known file or resource and calculating the download speed. To calculate the speed of the network a file of known size is chosen from a server to download. The time taken to start and complete the download is rec

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 convert image into base64 string using JavaScript ?

In this article, we will convert an image into a base64 string using Javascript. The below approaches show the methods to convert an image into a base64 string using Javascript. ApproachHere we will create a gfg.js file which will include JavaScript code and one gfg.html file.Now we will put onchang

How to get the position of scrollbar using JavaScript ?

JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below: Approach 1: Whenever the function getScroll() is encountered,

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, th

How to convert a pixel value to a number value using JavaScript ?

In this article, we will see how to convert the string value containing 'px' to the Integer Value with the help of JavaScript. There are two approaches to converting a pixel value to a number value, these are: Using parseInt() MethodUsing RegExpApproach 1: Using parseInt() Method This method takes a

How to Create an Image Element using JavaScript?

We will dynamically create an <img> element in HTML using JavaScript. When a button is clicked, we'll generate the <img> element and append it to the document. Using createElement() methodCreate an empty img element using document.createElement() method.Then set its attributes like (src,

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences