html5 getUserMedia（）肖像模式

在我的浏览器应用程序（使用AngularJS）我通过HTML5 getUserMedia API连接到摄像头。但由于某种原因，输出流总是在landscape mode而不是在portrait mode。所以我尝试了一些东西，但我无法弄清楚如何将它变成肖像模式。有任何想法吗？html5 getUserMedia（）肖像模式

规格：

AngularJS：1.6.5

IMAC：27" - MacOS的高塞拉利昂

铬：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描述或介绍如何使用在纵向模式下的网络摄像头在网络上的任何选项。

来源

2017-10-20 Mr.wiseguy

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

Chrome作物和缩放来自网络摄像头的视频以满足您的约束条件，因此如果您使用的分辨率高度不超过传感器的最大高度（例如，比传感器的最大高度小16倍的270x480） 1080x1980）

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

可以使用getUserMedia camera resolution finder来查找您的网络浏览器&组合支持的（横向）分辨率。

来源

2017-11-29 11:50:54

html5 getUserMedia（）肖像模式

回答

相关问题