WebRTC Ограничения веб-камеры не адаптируются к ориентации устройства

Question

Я реализую приложение для фотосъемки в html и javascript (на самом деле Angular 1.x). Приложение в основном используется на планшетах Android, а также на телефонах и компьютерах с Windows.

Моя проблема
когда пользователь переворачивает планшет ( портрет / пейзаж ), камера также «переворачивается». Это означает, что когда вы держите планшет в ландшафтном режиме, камера также находится в ландшафтном режиме, а когда вы переворачиваете планшет, камера находится в портретном режиме. Но система сохраняет параметры width и height камеры.

Это не было бы большой проблемой, если бы я отображал только видео, но мне нужно скопировать изображение, обрезать его, масштабировать и т. Д. Поэтому я должен быть уверен, что width камеры на самом деле width.

Моя реализация
Чтобы дать вам представление, я попытался извлечь код, отвечающий за камеру:

// 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);
            }
        });
    }
}

Как это работает
Страница загружается, и мой скрипт попытается запустить веб-камеру с {width: 600, height: 480}, если навигатор не может вернуть камеру с этими ограничениями, скрипт продолжит работу и протестирует {width: 320, height: 240}.

Допустим, навигатор может вернуть камеру с 320x240, тогда страница завершит загрузку, и я смогу отобразить и управлять изображением. Ницца. Всегда считая само собой разумеющимся, что width видео - это количество пикселей "слева направо", а height охватывает "сверху" и "снизу".

Но когда я загружаю страницу на планшет и переворачиваю планшет в «портретный» режим, навигатор по-прежнему выдает камеру с {width: 320, height: 240}, хотя отображает ее с width=240 и height=320 (в портретном режиме). Режим). Так что теперь все мои манипуляции с изображениями больше не работают, потому что ширина и высота инвертированы.

Мое решение
Поэтому я решил, что когда страница находится в «портретном» режиме (окно браузера выше, чем оно широко), я просто инвертирую width и height камеры. И это действительно работает на планшете - но, конечно, это не работает на настольном компьютере.

Так вот мой актуальный вопрос Есть ли способ запросить «навигатор», если все устройство находится в «портретном» или «ландшафтном» режиме, не полагаясь на ширину и высоту браузера?