如何修复某些设备上相机流的“拉伸视图”（getUserMedia）答案

【问题标题】：How to fix "stretched view" of camera stream on some devices (getUserMedia)如何修复某些设备上相机流的“拉伸视图”（getUserMedia）
【发布时间】：2019-06-30 08:02:55
【问题描述】：

我使用 navigator.mediaDevices.getUserMedia 将我的“环境”相机流式传输到我的 DOM 上的视频元素。问题是在我的测试设备（三星标签）上，这个视频似乎被拉长了。在我的测试期间，我没有使用除 facesMode: "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//
}

预期行为：在所有设备上使用我的环境相机流以正确的纵横比获取视频元素。

实际行为：在我的平板电脑上，我的视频流“在横向握持设备时被拉伸，而在纵向握持时被“挤压”

【问题讨论】：

cordova 支持 css 吗？如果是这样，有一些 css 可以帮助你解决这个问题，我认为我们不需要 JS 来调整大小。
奇怪的是，我没有修改或设置视频流和视频元素的任何固定大小或纵横比，我应该只以流式传输的大小获取视频。我得到的是一个在你转动屏幕时被挤压/拉伸的视频。我的视频元素上没有 CSS，除了它的定位，没有大小。 Cordova 用于将我的代码构建到 Android/IOS 项目中，因此使用了我的本机代码的 css。这并非在所有设备上都会发生。
啊，谢谢你的解释。所以这似乎是科尔多瓦如何为视频的容器元素设置样式的问题？我想知道您是否至少可以破解一个将视频元素居中并包含到容器中的解决方案？
我已经尝试了一些“黑客”，使用视频容器来覆盖我的屏幕，所以我在我的应用程序中得到了一个裁剪视图，但是根据相机质量和屏幕尺寸，我得到了不可接受的结果。当它们与拍摄的照片匹配时，我使用我的应用程序将墙上的指示器映射到我的相机流。如果我将我的视频裁剪到我的视口，你可能需要用一台设备移动 5 米，使用另一台设备移动 10 米。当我使用我的视口宽度和高度来匹配我的约束时，我也会在视口尺寸与相机尺寸不匹配的设备上得到奇怪的结果。

标签： cordova ember.js getusermedia

【解决方案1】：

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

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

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

Android Camera Preview Stretched

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

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

【讨论】：