javascript - html5 getUserMedia() portrait mode - Stack Overflow

admin管理员组

文章数量:1289891

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.

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.

• javascript
• css
• angularjs
• html
• google-chrome

Share Improve this question Follow asked Oct 20, 2017 at 11:36 Mr.wiseguyMr.wiseguy 4,2521111 gold badges3939 silver badges6868 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

The iMac (and all desktop devices) has a landscape positioned webcam image sensor so you'll only be able to capture at the sensor's max resolution in landscape mode (e.g. 1920x1080).

Chrome crops and scales the video ing from the webcam to fulfill your constraints so you should get a portrait image if you use a resolution where the height does not go over the sensor's max height (e.g. 270x480 which is 16 times smaller than 1080x1980)

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

You can use the getUserMedia camera resolution finder to find the (landscape) resolutions supported by your webcam & browser bo.

本文标签： javascripthtml5 getUserMedia() portrait modeStack Overflow