gistfile1.js

/*var detectOrientation = function () {
    if (window.matchMedia('(orientation: landscape)').matches) {
      videoWidth = 135;
      videoHeight = 101;
      console.log('landscape mode');
    } else {
      videoWidth = 101;
      videoHeight = 135;
      console.log('portrait mode');
    }
  };

  detectOrientation();
*/
  if (navigator.getMedia) {
    svg = $('<svg class="progress" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 128 64" preserveAspectRatio="xMidYMid" hidden><path d="M0,0 " id="arc" fill="none" stroke="rgba(226,38,97,0.8)" /></svg>');

    footer.prepend(svg);

    gumHelper.startVideoStreaming(function callback(err, stream, videoElement, videoWidth, videoHeight) {
      if (err) {
        disableVideoMode();
      } else {
        detectOrientation();
        console.log('current width/height ', videoWidth, videoHeight);
        
        var finalWidth, finalHeight;
        
        finalWidth = 135;
            
        if(videoWidth > videoHeight) {
            finalHeight = finalWidth * videoHeight / videoWidth;
        } else {
            finalHeight = finalWidth * videoWidth / videoHeight;
        }
            
        videoElement.width = finalWidth;
        videoElement.height = finalHeight;
        
        footer.prepend(videoElement);
        videoElement.play();
        videoShooter = new VideoShooter(videoElement);
        composer.form.click();
      }
    });
  } else {
    disableVideoMode();
  }