Capture Using WebCam Implementation using HTML / Javascript

A very simple and straight forward approach.

<!DOCTYPE html>
<html>
  <head>
  <title>Capture Using WebCam Implementation using HTML / Javascript</title>
  </head>
  <body onload="initilize();">
    
<h1>Take a snapshot of the current video stream</h1>

   Click on the Start WebCam button.
     

    <button onclick="startCam();">Start WebCam</button>
    <button onclick="stopCam();">Stop WebCam</button> 
       <button onclick="snapshot();">Take Snapshot</button> 
    

    <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
  


        Screenshots : 

      <canvas id="myCanvas" width="400" height="350"></canvas>  
  </body>
  </html>
 

Javascript Code

  
      //--------------------
      // GET USER MEDIA CODE
      //--------------------
          navigator.getUserMedia = ( 
									  navigator.getUserMedia ||
									  navigator.webkitGetUserMedia ||
									  navigator.mozGetUserMedia ||
									  navigator.msGetUserMedia
								   );

      var video;
      var webcamStream;

      function startCam() {
        if (navigator.getUserMedia) {
           navigator.getUserMedia (

              // constraints
              {
                 video: true,
                 audio: false
              },

              // successCallback
              function(localMediaStream) {
                  video = document.querySelector('video');
                 video.src = window.URL.createObjectURL(localMediaStream);
                 webcamStream = localMediaStream;
              },

              // errorCallback
              function(err) {
                 alert("The following error occured: " + err);
              }
           );
        } else {
           alert("Error! getUserMedia not supported");
        }  
      }

      function stopCam() {
          webcamStream.stop();
      }
      //---------------------
      // TAKE A SNAPSHOT CODE
      //---------------------
      var canvas, ctx;

      function initilize() {
        // Get the canvas and obtain a context for
        // drawing in it
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
      }

      function snapshot() {
         // Draws current image from the video element into the canvas
        ctx.drawImage(video, 0,0, canvas.width, canvas.height);
      }

  

Credit goes to scaisedge

Leave a Reply

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