title: Getting the real HTML5 video width and height
body: <p>I have a video element:</p>
  
  <pre><code>var video = window.content.document.createElement("video");
  video.width = width;
  video.height = height; 
  video.style.backgroundColor = "black";
  window.content.document.body.appendChild(video);
  </code></pre>
  
  <p>And I'm retrieving it's source via <a href="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia" rel="noreferrer">getUserMedia()</a> on Firefox:</p>
  
  <pre><code>window.navigator.getMedia = ( window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);
  
  window.navigator.getMedia( //constraints, sucessCallback, errorCallback
      {video: true, audio: false},
      function(stream) {
          if (window.navigator.mozGetUserMedia) 
              video.mozSrcObject = stream;
          else 
          {
              var vendorURL = window.URL || window.webkitURL;
              video.src = vendorURL.createObjectURL(stream);
          }
          video.play();
      },
      function(err) {
          console.log("Error: " + err);
      }
  );
  </code></pre>
  
  <p>The problem is I need to know the "active area" of video, and it's returning me 0:</p>
  
  <pre><code>video.onloadedmetadata = function(){
  
      console.log(this.width + "x" +this.height); 
      console.log(this.videoWidth + "x" +this.videoHeight);
  }
  </code></pre>
  
  <p>So, how can I retrieve the REAL values?:
  <img src="https://i.stack.imgur.com/U8vca.jpg" alt="enter image description here"></p>