notes/Basic HTML5 webcam photo taker-E63nRyit.html

<html>

<head>
  <script>
    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas"),
        lastPhoto = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
          console.log("Video capture error: ", error.code); 
        };

      // Put video listeners into place
      if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
          video.src = stream;
          video.play();
        }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
          video.src = window.webkitURL.createObjectURL(stream);
          video.play();
        }, errBack);
      }
      else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
          video.src = window.URL.createObjectURL(stream);
          video.play();
        }, errBack);
      }
      // Trigger photo take
      document.getElementById("video").addEventListener("click", function() {
        var context = newCan();
        lastPhoto.drawImage(video, 0, 0, 640, 480);
        context.drawImage(video, 0, 0, 640, 480);
      });
    }, false);

    function newCan(){
      // Grab elements, create settings, etc.
      var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
          console.log("Video capture error: ", error.code); 
        };
      canvas.width = 640;
      canvas.height = 480;
      var photos = document.getElementById("photos");
      photos.appendChild(canvas);
      return context;
    }
  </script>
</head>
<body>
  <h1>Webcam App By Kris Occhipinti</h1>
  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="canvas" width="640" height="480"></canvas>
  <div id="photos"></div>
  <hr>
  <p>Tap Video to take a photo.  Right Click/Long Hold to "save image as"</p>
  <p>Based on code by David Walsh https://davidwalsh.name/browser-camera</p>
</body>
</html>
syntax highlighted by Code2HTML, v. 0.9.1