How to open web cam in JavaScript ? Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to open a webcam and show a live video using JavaScript. For this, we are going to use Navigator Media Devices.Navigator Media DevicesIt is a read-only property that returns a Media Devices object, which helps us to access the connected media input devices like the camera and microphone.Syntax:let mediaDevices = navigator.mediaDevices;Return value:The singleton object MediaDevices. The members of this object are typically used directly, such as by executing navigator.mediaDevices.getUserMedia().Example: In this example, we will use a navigator.mediaDevices to open a webcam. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 500px; height: 400px; border: 2px solid black; position: relative; } video { width: 500px; height: 400px; object-fit: cover; } </style> </head> <body> <div> <video id="vid"></video> </div> <br /> <button id="but" autoplay> Open WebCam </button> </body> <script> document.addEventListener("DOMContentLoaded", () => { let but = document.getElementById("but"); let video = document.getElementById("vid"); let mediaDevices = navigator.mediaDevices; vid.muted = true; but.addEventListener("click", () => { // Accessing the user camera and video. mediaDevices .getUserMedia({ video: true, audio: true, }) .then((stream) => { // Changing the source of video to current stream. video.srcObject = stream; video.addEventListener("loadedmetadata", () => { video.play(); }); }) .catch(alert); }); }); </script> </html> Output : Comment More infoAdvertise with us Next Article How to Open URL in New Tab using JavaScript? I iamabhishekkalra Follow Improve Article Tags : JavaScript JavaScript-Questions Similar Reads How to open URL in a new window using JavaScript? In HTML, the anchor tag (<a>) is used to open new windows and tabs in a very straightforward manner. However, there are situations where you need to achieve the same functionality using JavaScript. This is where the window.open() method becomes useful.The window.open() method is used to open a 3 min read How to enable JavaScript in Windows ? Whenever you are browsing through some websites, you can observe that some of the blocks are not displayed properly. Instead of behaving dynamic, they are just standstill like any other static page which is very undesirable to the user. This behavior is mainly because of not enabling JavaScript on y 2 min read How to Make a Beep Sound in JavaScript? To make a beep sound in JavaScript, you can use the Audio object to play a sound file.Approach: Using Audio FunctionUse the Audio function in Javascript to load the audio file. This HTML document creates a simple web page with a heading and a button. When the button is clicked, the play() function i 1 min read How to Open URL in New Tab using JavaScript? To open a URL in a new tab using JavaScript, we can use the window.open() method. The window.open() method is used to open a new browser window or tab. It can also be used to load a specific URL in a new tab. Syntaxwindow.open(URL, '_blank');window.open(): Opens a new tab or window.First Parameter: 3 min read How to record and play audio in JavaScript ? JavaScript is a very flexible language and it provides many API support to do many useful things. Here one important thing is that record audio or video in web pages is also done using JavaScript. In this case, it will ask the user for microphone access to the browser and record the audio through th 4 min read How to get the width of device screen in JavaScript ? Given an HTML document that is running on a device and the task is to find the width of the working screen device using JavaScript. Example 1: This example uses window.innerWidth to get the width of the device screen. The innerWidth property is used to return the width of the device. HTML<!DOCTYP 2 min read Like