如何解决在某些设备上的相机流的“拉伸视图”（getUserMedia）

Question

我使用navigator.mediaDevices.getUserMedia流我的“环境”摄像头视频元素在我的DOM。问题是，我的测试设备（三星Tab键），对这部影片似乎被拉伸。我不使用超过facingMode其他任何限制：在我的测试“环境”。我没有我的移动设备上的这个问题。

我已经尝试设置宽度和高度的限制，如果我staticly设置我的平板凸轮的价值这只是工作，但我的应用程序必须支持的所有设备。注：我的应用程序被锁定为纵向。内置的Android使用科尔多瓦。

//码流

setup() {
    const constraints = {
      video: {
        facingMode: "environment",
        //tablet
        //width: {min:1280, ideal: width},
        //height: {min:720, ideal: height}
      },
      audio: false
    };

    navigator.mediaDevices.getUserMedia(constraints)
      .then(function (s) {
        video.srcObject = s;
        video.play();
      })
      .catch(function (err) {
        console.log("An error occured! " + err);
      });

    if(!this.get('streaming')) {
      video.addEventListener("canplay", function () {
        _this.set('videoReady', true);
        _this.processMedia();
      }, false);
    }
}
processMedia() {
    let _this = this;
    let video = document.getElementById('videoInput');
    if (!this.get('streaming')) {
      video.width = video.videoWidth;
      video.height = video.videoHeight;
      this.placeIndicators(video.width, video.height);
    }
   //process functionality//
}

预期的行为：获得视频元素与我的所有设备上的正确的长宽比环境摄像机流。

实际行为：在我的平板电脑我的视频流“捉襟见肘时设备保持景观和‘挤’时举行肖像

Answer 1

进一步的测试后，我注意到，当我把我的视频制约全高清（1920×1080）我的视频没有得到拉伸/挤压。

用我videocontainer缩减我的视频和我的视频容器比计算我也设法让我的指标定位的权利。

经过进一步研究，我发现我的问题可能已经造成设备的比例和相机的比例之间的差异。下面链接到另一篇文章关于这个奇怪的行为：

Android Camera Preview Stretched

使我的限制高于我的设备约束解决了我的问题，因为最近的一个可用来代替。我一直在想，为什么空的宽度和高度的限制也给了奇怪的拉伸/挤压行为。

const constraints = {
    video: {
      width:1920,
      height:1080,
      facingMode: {ideal:"environment"},
    },
    audio: false
  };