title: Capture high resolution video/image html5
body: <p>I use geUserMedia() to capture image from webcam <a href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/" rel="noreferrer">Intro</a>.</p>
  
  <p>Best resolution that I get is <strong>640 X 480</strong>, but I have HD webcam that 
  records video with <strong>1280 X 720</strong>,
  takes a picture <strong>2592 X 1944</strong>.</p>
  
  <p>How can I capture High Resolution photos?</p>
  
  <p>Here is one sample of code. It doesn't care about canvas size:</p>
  
  <pre><code>&lt;video autoplay id="vid" style="display:none;"&gt;&lt;/video&gt;
  &lt;canvas id="canvas" width="1280" height="720" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;&lt;br&gt;
  &lt;button onclick="snapshot()"&gt;Take Picture&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
      var video = document.querySelector("#vid");
      var canvas = document.querySelector('#canvas');
      var ctx = canvas.getContext('2d');
      var localMediaStream = null;
  
      var onCameraFail = function (e) {
          console.log('Camera did not work.', e);
      };
  
      function snapshot() {
          if (localMediaStream) {
              ctx.drawImage(video, 0, 0);
          }
      }
  
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia({video:true}, function (stream) {
          video.src = window.URL.createObjectURL(stream);
          localMediaStream = stream;
      }, onCameraFail);
  
  &lt;/script&gt;
  </code></pre>