如何修复某些设备上的 "stretched view" 相机流 (getUserMedia)

Question

我使用 navigator.mediaDevices.getUserMedia 将 "environment" 相机流式传输到 DOM 上的视频元素。问题是在我的测试设备（三星标签）上，这段视频似乎被拉伸了。在我的测试期间，除了 facingMode: "environment"，我没有使用任何约束。我的移动设备上没有这个问题。

我已经尝试设置宽度和高度限制，这仅在我静态设置我的平板电脑摄像头的值时有效，但我的应用程序必须支持所有设备。注意：我的应用程序被锁定为纵向。使用 cordova 为 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//
}

预期行为：在所有设备上使用我的环境摄像机流获取具有正确宽高比的视频元素。

实际行为：在我的平板电脑上，我的视频流在纵向

时被"stretched when the device is held landscape and "挤压”

Answer 1

经过进一步测试后，我注意到当我将视频限制设置为全高清 (1920 x 1080) 时，我的视频没有得到 stretch/squeeze。

使用我的 videocontainer 缩小我的视频并计算我的视频与容器的比率，我也设法让我的指示器定位正确。

经过进一步研究，我发现我的问题可能是由设备比率和相机比率之间的差异引起的。下面一个 link 到另一个 post 关于这个奇怪的行为：

Android Camera Preview Stretched

使我的约束高于我的设备约束解决了我的问题，因为使用了最近的可用约束。我仍然想知道为什么空的宽度和高度约束也会产生奇怪的 stretch/squeeze 行为。

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

如何修复某些设备上的 "stretched view" 相机流 (getUserMedia)

How to fix "stretched view" of camera stream on some devices (getUserMedia)

ember.js

cordova

getusermedia