Question

我使用navigator.mediaDevices.getUserMedia将“环境”摄像机流式传输到DOM上的视频元素。问题在于，在我的测试设备（三星标签）上，该视频似乎被拉长了。在测试过程中，除了FaceingMode：“环境”之外，我没有使用任何其他约束。我的移动设备上没有这个问题。

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

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

实际行为：在平板电脑上，当设备横向放置时，我的视频流“拉伸”，而在纵向放置时则压缩了视频流

Answer 1

进一步测试后，我注意到将视频限制设置为全高清（1920 x 1080）时，我的视频没有受到拉伸/挤压。

使用我的视频容器缩小我的视频，并使用我的视频与容器的比例进行计算，我也设法使指标定位正确。

经过进一步的研究，我发现问题可能是由设备的比例与相机的比例之间的差异引起的。在指向有关此奇怪行为的其他帖子的链接下方：

Android Camera Preview Stretched

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

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

如何在某些设备（getUserMedia）上修复摄像机流的“拉伸视图”

1 个答案: