CODEWITHSUNDEEP
javascriptcamera
Quality Content
Quality Content

Reputation: 41

How To Take An Image From The Webcam In Html

I just want to know how to take an image from the webcam using javascript and create that image onto a web page. I have seen other ways to do so, but none of them explain how to use it. Could Somebody Explain How To Do It?

Upvotes: 4

Views: 6770

Answers (1)

Shinoy Shaji
Shinoy Shaji

Reputation: 397

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.

working demo at codepen capture image using javascript

(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);

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video"></video>
<canvas id="canvas" style="display:none;"></canvas>
<div id="buttoncontent">

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

Upvotes: 4

Related Questions