In my browser application (with AngularJS
) I am making a connection to the webcam via the HTML5 getUserMedia API
. But for some reason the output stream is always in landscape mode
and not in portrait mode
. So I've tried a few things, but I cannot figure out how to get it into portrait mode. Any idea's?
Specs:
AngularJS: 1.6.5
IMac: 27" - MacOS high Sierra
Chrome: 61.0.3163.100 (64-bit)
My code
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);
});
}
I've tried
- Rotating the video via CSS. This kind of works, but the stream won't be rotated with it.
- Settings the
mendatory
property on the videoOptions to{ height:1920, width: 1080 }
, but this results in an error from the API,ConstraintNotSatisfiedError { constraintName: "height" }
.
I Cannot find any option in the API description or on the web that describes how to use the webcam in portrait mode.