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 { constraintName: "height" }出错。

我在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查找网络摄像头支持的（风景）分辨率。浏览器组合。

html5 getUserMedia（）纵向模式

1 个答案: