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?

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?

• javascript
• camera

• 7 views without a dislike. this is insane! – Quality Content Commented Jan 10, 2017 at 17:47
• May visit online tutorials. Simply google.it its not that difficult – Jonas Wilms Commented Jan 10, 2017 at 17:52

1 Answer 1

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