I am implementing a photo-taking application in html and javascript (actually Angular 1.x). The app is mostly used on Android tablets but also phones and Windows computers. 

**My Problem**  

when the user flips the tablet (*portrait / landscape*), the camera "flips" as well. Meaning, when you hold your tablet in landscape mode the camera is in landscape mode as well and when you flip the tablet, the camera is in portrait mode. **But** the system keeps the `width` and `height` parameters of the camera.

[![enter image description here](https://i.stack.imgur.com/GuckY.png)](https://i.stack.imgur.com/GuckY.png)

This wouldn't be much of a problem if I where to display the video only, but I need to copy the image, crop it, scale it etc. So I need to be sure that the camera's `width` is actually the `width`.

**My implementation**  

To give you an idea, I tried to extract the code that is responsible for the camera:

```js
// I have a static array with possible camera resolutions
private resolutions = [
    {width: 320, height: 240},
    {width: 600, height: 480}
];

// and the camera constraints that I initialize like this
this.constraints = {
    audio: false,                  // no audio needed
    video: {
        facingMode: "environment", // I want the back camera
        width: {
            exact: 4096            // initial width 
        },
        height: {
            exact: 2160            // initial height
        }
    }
};

// I use that array to query the system for a camera that fits these resolution constraints (it's recursive, so I call this function with the last index of my resolutions-array)
testCameraResolution(resolutionIndex: number) {
    if (this.checking) {
        this.constraints.video.width.exact = this.resolutions[resolutionIndex].width;    // overwrite the width value of the constraints
        this.constraints.video.height.exact = this.resolutions[resolutionIndex].height;   // overwrite the height value of the constraints
        navigator.mediaDevices.getUserMedia(this.constraints).then((stream: MediaStream) => {
            // when the navigator returns a camera with these constraints, I found my resolution and can stop testing.
            this.checking = false;  
            for (let track of stream.getTracks()) {
                track.stop();   // I stop the camera stream
            }
            this.videoResolution.width = this.constraints.video.width.exact;
            this.videoResolution.height = this.constraints.video.height.exact;
            this.startWebCam();  // and start the webcam
        }).catch((error) => {
            // no camera was found that matches these constraints, continue testing
            if (resolutionIndex > 0) {
                this.testCameraResolution(resolutionIndex - 1);
            }
        });
    }
}

```

**How it works**  

The page loads and my script will try to start the webcam with `{width: 600, height: 480}`, if the navigator cannot return a camera with these constraints, the script will continue and test `{width: 320, height: 240}`.

Let's say the navigator can return a camera with `320x240`, then the page will finish loading and I can display and manipulate the image. Nice. Always taking it for granted, that the video's `width` is the number of pixels from "left to right" and it's `height` spans from "top" to "bottom". 

But when I load the page on a tablet and I flip the tablet to "portrait" mode, the navigator still gives me the camera with `{width: 320, height: 240}`, although it displays it with `width=240` and `height=320` (in portrait mode). So now all my image manipulation doesn't work anymore because width and height are inversed.

**My Solution**  

So I figured, when the page is in "portrait" mode (the browser window is higher than it is wide), then I just inverse `width` and `height` of the camera. And this actually works on a tablet - but of course it doesn't work on a desktop computer.

**So here is my actual question**
Is there a way to query the "navigator" if the whole device is in "portrait" or "landscape" mode without relying on the browsers width and height?