How to open web cam in JavaScript ? Last Updated : 30 Jul, 2024 Comments Improve Suggest changes 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 Make a Beep Sound in 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 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 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 Like