javascript - html5 getUserMedia() 纵向模式

Question

在我的浏览器应用程序(使用 AngularJS)中，我通过 HTML5 getUserMedia API 连接到网络摄像头。但出于某种原因，输出流始终处于 landscape mode 而不是 portrait mode。所以我尝试了一些东西，但我不知道如何让它进入肖像模式。有任何想法吗？

规范:

AngularJS:1.6.5

IMac:27"- MacOS high Sierra

Chrome:61.0.3163.100(64 位)

---

我的代码

private static readonly videoOptions = {
    mandatory: {
        minWidth: 1080,
        minHeight: 1920
    }
};

private startCamera(): void {
    navigator.mediaDevices.getUserMedia({video: MWWebcamController.videoOptions, audio: false})
        .then((stream: MediaStream) => {
            this.webcam = new WebcamStream(window.URL.createObjectURL(stream), stream);
         })
         .catch((exception) => {
             console.error("Could not load the stream. due to: ", exception);
         });
}

---

我试过了

• 通过 CSS 旋转视频。这种方法有效，但流不会随之旋转。
• 将 videoOptions 的 mendatory 属性设置为 { height:1920, width: 1080 }，但这会导致 API 出错，ConstraintNotSatisfiedError {约束名称:“高度”。

---

我在 API 描述或网络上找不到任何描述如何在纵向模式下使用网络摄像头的选项。

Answer 1

iMac(和所有桌面设备)具有横向定位的网络摄像头图像传感器，因此您只能在横向模式下以传感器的最大分辨率(例如 1920x1080)进行捕捉。

Chrome 会裁剪和缩放来自网络摄像头的视频以满足您的限制，因此如果您使用高度不超过传感器最大高度的分辨率(例如 270x480，比 1080x1980 小 16 倍)，您应该会得到一个纵向图像)

var constraints = {
  audio: false,
  video: {
    width: { min: 270, max: 270 },
    height: { min: 480, max: 480},
  },
};

您可以使用 getUserMedia camera resolution finder找到您的网络摄像头和浏览器组合支持的(横向)分辨率。