javascript - 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的相机。这实际上适用于平板电脑 - 但当然它不适用于台式电脑。

所以这是我的实际问题
如果整个设备处于“纵向”或“横向”模式而不依赖于浏览器的宽度和高度，有没有办法查询“导航器”？

Answer 1

如果您确定它不一定需要在 safari 上工作。您可以使用屏幕 API。
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
在该页面中，您有一个示例。