Camera and Video Control with HTML5

Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API, providing developers access to the user's camera.  Let me show you how to get simple camera access from within your browser!

The HTML

<!--
 Ideally these elements aren't created until it's confirmed that the 
 client supports video/camera, but for the sake of illustrating the 
 elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

The JavaScript

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
 // Grab elements, create settings, etc.
 var canvas = document.getElementById("canvas"),
  context = 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);
 }
}, false);

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
 context.drawImage(video, 0, 0, 640, 480);
});