title: How can I detect width and height of the webcamera?
body: <p><strong>How can I detect width and height of the camera to use it on canvas and maintain the proportions??</strong></p>
  
  <p>I need to detect width and height of the camera and then use it on a canvas. In the new canvas I will show the live video with some filters. The size of the camera should be the same as the video.</p>
  
  <p>The code I use to get access to the camera:</p>
  
  <pre><code>navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || naviagor.msGetUserMedia);
  
      var options = {video: true};
      var videoWidth, videoHeight;
  
      var onFail = function(e) {
        alert('Failed to get camera');
        alert(e);
      };
      var onSuccess = function(stream) {
  
          if(navigator.mozGetUserMedia) {
              video.mozSrcObject = stream;
          } else {
              var url = window.URL || window.webkitURL;
              video.src = url.createObjectURL(stream);
          }
  
          // Wait 1000 ms before starting the loop
          setTimeout(function(){
  
              //rest of functions ...
              //Here I need to use: videoWidth, videoHeight
              //that are obtained from the image data of the camera
  
          },1000);
      };
  
      navigator.getUserMedia(options, onSuccess, onFail);
  </code></pre>