title: Image capture and oval crop/trim with HTML5 getUserMedia()
body: <p>I need to capture a users face via HTML5 with getUserMedia();  take a snapshot then save to to a cropped/trimmed png.</p>
  
  <p>I can achieve the first part of actually capturing the image, it's the next step of how to crop and trim to an oval shape I'm stuck on.</p>
  
  <pre><code>// 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);
  });
  </code></pre>