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和{{ 1}}（在纵向模式下）。因此，现在我所有的图像处理都不再起作用，因为宽度和高度是相反的。

我的解决方案
因此，我认为，当页面处于“人像”模式（浏览器窗口的高度大于宽度）时，我只是将相机的height=320和width反转。这实际上可以在平板电脑上使用-但当然不能在台式机上使用。

这是我的实际问题 如果整个设备处于“人像”或“风景”模式，是否有一种方法可以查询“导航器”，而不依赖于浏览器的宽度和高度？

Answer 1

如果您确定它不一定需要在 safari 上运行。您可以使用 Screen API。

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

在该页面中，您有一个示例。

WebRTC网络摄像头约束不适用于设备方向

1 个答案: