title: how to add zoom to HTML 5 Video renderring?
body: <p>i want to know how to add zoom to HTML5 video rendering, from this i mean to say is that i am able to render video already and i can capture images from the video streaming too, but what i wanna know is there an option to zoom the current rendered video?</p>
  
  <p>currently this is how i manage to capture images</p>
  
  <pre><code>jQuery('#enable_camera').on('click', function() {
      var video = document.querySelector("#vid");
      var onCameraFail = function(e) {
          console.log('Camera did not work.', e);
      };
      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;
          jQuery('#enable_camera').hide();
          jQuery('#search_image').show();
          jQuery('#take_picture').show();
      }, onCameraFail);
  
      jQuery('#take_picture').on('click', function() {
          if (localMediaStream != null) {
              ctx.fillRect(0, 0, w, h);
              document.getElementById('canvas_img').src = video.src;
              ctx.drawImage(video, 0, 0, w, h);
              jQuery('#show_canvas').show();
              jQuery('#show_vid').hide();
          }
      });
  
  });
  </code></pre>