How to Capture Still Picture from WebCam using Javascript

In this tutorial I will show you how to capture still pictures using the webcam in javascript. HTML5 introduces WebRTC APIs that let you access the camera on the computer or mobile phone and take photos from it.

SEE DEMO

Here’s how it can be done.

Step 1: Add the required HTML

We are adding a video, canvas and button element to the page that will be used for our demo application. Here’s what you need to add.

<video id="video"></video>
<canvas id="canvas" style="display:none;"></canvas>
<div id="buttoncontent">

</div>
<button id="startbutton">CAPTURE</button>

Initially the canvas element’s display is set to none. Only the video frame is visible. When the user clicks on CAPTURE then the canvas is shown and video element is shown. The button content changes to RETAKE.

Step 2: Add the Javascript code to Capture Photos

Next add the following JS code to your page.

(function() {

  var streaming = false,
    video = document.querySelector('#video'),
    canvas = document.querySelector('#canvas'),
    buttoncontent = document.querySelector('#buttoncontent'),
    photo = document.querySelector('#photo'),
    startbutton = document.querySelector('#startbutton'),
    width = 320,
    height = 0;

  navigator.getMedia = (navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);

  navigator.getMedia({
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev) {
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth / width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    video.style.display = "none";
    canvas.style.display = "block";
    startbutton.innerText= "RETAKE";
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

  startbutton.addEventListener('click', function(ev) {
    if(startbutton.innerText==="CAPTURE")
    {
        takepicture();
    }
    else
    {
        video.style.display = "block";
        canvas.style.display = "none";
      startbutton.innerText= "CAPTURE";
    }
    ev.preventDefault();
  }, false);

})();

NOTE:
startbutton event listener checks the content of the button and accordingly captures a new photo or simply displays the video frame
takepicture methods sets the captured image to canvas

NOTE: The example runs only on a secure URL ie https so trying it run it locally wont work. You can see the working demo here.

DEMO

This content has been helpful to you?

Thanks for contributing!

Yes No