How to open a webcam using JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn about the procedure to open a webcam using JavaScript. So, this can be done using WebRTC. WebRTC is a short form of Web Real-Time Communication. Using this object, we can access and capture the Webcam and Microphone devices that are available there in the user device.

How to Access Webcam?

We can access the user device Webcam and microphone using an ECMAScript object navigator.mediaDevices.getUserMedia(constraints).

So, the getUserMedia() function by default seek user permission to use your Webcam. This function returns a promise and once you click ok and give the permission then the promise then function got triggered and it enables the webcam in your system; else in case you don’t allow then it also has a catch method which turned off the Webcam.

We can also pass the parameters to the function getUserMedia() function which could of like we want a picture of some specific width or height.

The process of opening a Webcam

We could follow the below steps to open a webcam using JavaScript.

STEP 1 − Adding HTML elements like the video for showing the webcam stream and a Button.
STEP 2 − Check if the webcam is available to use and resolve the promise returned by the getUserMedia function.
STEP 3 − Pass the parameter to getUserMedia() function such as audio and video as true as we will use them
STEP 4 − In the case of smartphones we have to use the facingMode option as both cameras are available and by default, we use the front camera to be open.

Example

Below is a simple program to open a webcam. We have followed the above steps to complete our task.


<html>
<head>
   <title>Open webcam using JavaScript. </title>
</head>
<body>
   <h1>Open WebCam Using JavaScript</h1>
   <br/>
   <button id="startBtn" onclick="openCam()">Open Webcam</button>
   <br/><br/>
   <video id="videoCam"></video>
   <script>
      function openCam(){
         let All_mediaDevices=navigator.mediaDevices
         if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
            console.log("getUserMedia() not supported.");
            return;
         }
         All_mediaDevices.getUserMedia({
            audio: true,
            video: true
         })
         .then(function(vidStream) {
            var video = document.getElementById('videoCam');
            if ("srcObject" in video) {
               video.srcObject = vidStream;
            } else {
               video.src = window.URL.createObjectURL(vidStream);
            }
            video.onloadedmetadata = function(e) {
               video.play();
            };
         })
         .catch(function(e) {
            console.log(e.name + ": " + e.message);
         });
      }
   </script>
</body>
</html>

Designing Interface using CSS

First, let’s design our web interface using HTML and CSS.

We add component like webcam video area and applies its height and width using CSS as 400px with background color as black. It will show webcam video streaming.

Add a button named Open Camera and applied its CSS properties; this button will use to start the webcam.

Now we will add and embed our functional code into the main program.

We will call the function as OpenCamera button will be clicked and in the function, all the instructions will happen as discussed above.

Example

In the below example we have added some CSS to design the interface more interactive.


<html>
<head>
   <title>Open webcam using JavaScript.</title>
   <style>
      *{
         background-color: #658EA9;
      }
      #videoCam {
         width: 630px;
         height: 300px;
         margin-left: 0px;
         border: 3px solid #ccc;
         background: black;
      }
      #startBtn {
         margin-left: 280px;
         width: 120px;
         height: 45px;
         cursor: pointer;
         font-weight: bold;
      }
      #startBtn:hover{
         background-color: #647C90;
         color: red;
      }
   </style>
</head>
<body>
   <h1>Open WebCam Using JavaScript</h1>
   <br/>
   <video id="videoCam"></video>
   <br/><br/>
   <button id="startBtn" onclick="openCam()">Open Camera</button>
   <script>
      function openCam(){
         let All_mediaDevices=navigator.mediaDevices
         if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
            console.log("getUserMedia() not supported.");
            return;
         }
         All_mediaDevices.getUserMedia({
            audio: true,
            video: true
         })
         .then(function(vidStream) {
            var video = document.getElementById('videoCam');
            if ("srcObject" in video) {
               video.srcObject = vidStream;
            } else {
               video.src = window.URL.createObjectURL(vidStream);
            }
            video.onloadedmetadata = function(e) {
               video.play();
            };
         })
         .catch(function(e) {
            console.log(e.name + ": " + e.message);
         });
      }
   </script> 
</body>
</html>

As you can observe from the output screen when we are clicking on the open Camera button it’s asking for access to the webcam and when we allow that access it will start the webcam video streaming in the video area screen; if we don’t give the access, it will not show any output.

Kalyan Mishra

Updated on: 23-Aug-2022

17K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started