JavaScript – Take Picture With Webcam on Browser

It is possible to take a picture with the webcam on a browser in JavaScript. So here in this tutorial, we are exactly going to do this.

Here, I am going to show you how to take picture with webcam on browser in javaScript. To follow this tutorial, you need a JavaScript library which is WebcamJS that is available on GitHub. I am going to use this library to take snapshot photo from using the webcam on the browser.

You need to get and attach the webcam.js file from WebcamJS JavaScript library that I already have mentioned:

<script src="webcam.min.js"></script>

Below is our HTML code that contains the webcam video container, button to take the picture and the container to display the photo:

<button onclick="take_snapshot()">Take Snapshot</button>
<div id="camContainer"></div>
<div id="picture_from_cam"></div>

Now apply some CSS style:

#camContainer {
  width: 600px;
  height: 450px;
}

#picture_from_cam {
  position: fixed;top: 0;right: 0;
}
#picture_from_cam img {
  border: solid 1px #000;
  width: 500px;
  height: auto;
}

Now here is the main part. below is our JavaScript code to add all the functionalities:

Webcam.attach( '#camContainer' );

function take_snapshot() {
  Webcam.snap( function(img_data_url) {
    document.getElementById('picture_from_cam').innerHTML = '<img src="'+img_data_url+'"/>';
  } );
}

That’s it. We have completed our task.

So what we did. We have set the onclick event listener on our button and call a function. Inside the function, we are using the method provided by WebcmJS to take the picture and display it on our web page.



 

Also, read:

 

The complete and final code to take picture from webcam

Now below is the complete and final code of our HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Webcam Snapshot</title>

  <style type="text/css">
    #camContainer {
      width: 600px;
      height: 450px;
    }

    #picture_from_cam {
      position: fixed;top: 0;right: 0;
    }
    #picture_from_cam img {
      border: solid 1px #000;
      width: 500px;
      height: auto;
    }
  </style>

</head>
<body>

  <button onclick="take_snapshot()">Take Snapshot</button>
  <div id="camContainer"></div>
  <div id="picture_from_cam"></div>

  <script src="webcam.min.js"></script>
  <script type="text/javascript">
    Webcam.attach( '#camContainer' );
    
    function take_snapshot() {
      Webcam.snap( function(img_data_url) {
        document.getElementById('picture_from_cam').innerHTML = '<img src="'+img_data_url+'"/>';
      } );
    }
  </script>

</body>
</html>

Now you can save the above final code and test it on your browser. But remember to get the WebcamJS from this GitHub repository. After that tale the webcam.min.js and use it in the HTML file.

 

Now if you test the code on your browser, you will see the browser asking to allow webcam. After you allow it on your browser, you will see the webcam camera taking the video. If you click the “Take Snapshot” button, it will then take a picture with webcam for that instance of time.

Also, read:

 

Leave a Reply

Your email address will not be published. Required fields are marked *