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.


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">

<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 ||

      video: true,
      audio: false
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
    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() { = "none"; = "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) {
    { = "block"; = "none";
      startbutton.innerText= "CAPTURE";
  }, false);


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.


This content has been helpful to you?

Thanks for contributing!

Yes No
  • dipti

    Hi i am working on codeigniter framework i use yuor code,it work fine on simple corephp but when i use it on codeigniter it shows an error localhost Says Webcam.js Error: Could not locate DOM element to attach to. can you help me to solve this.