iPhone浏览器从主页恢复后摄像头宽高比异常变更问题

问题场景 #

• 我开发了一个网页应用，能够调用前置摄像头并实时显示画面
• 摄像头处于激活状态时，用户返回iPhone主屏幕（此时浏览器被后台挂起，页面变为不可见）
• 当用户重新打开浏览器回到应用时，摄像头画面的宽高比发生了变化——看起来像是在横屏和竖屏模式之间切换了

已尝试的解决方案（均无效） #

• 调用摄像头时指定特定的宽高比约束
• 调用摄像头时不设置任何约束
• 调用摄像头时设置固定的宽高比约束

示例代码 #

我制作了一个简单的摄像头测试应用来复现这个问题（因为JSFiddle无法调用摄像头，所以需要你在本地或者HTTPS环境下的iPhone上运行）。启动摄像头后观察宽高比，返回主屏幕再切回应用，注意摄像头画面和控制台打印的宽高比变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Aspect Ratio Test</title>
    <style>
        video {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <video id="cameraFeed" autoplay playsinline></video>
    <script>
        const video = document.getElementById('cameraFeed');
        
        async function startCamera() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: { facingMode: 'user' }
                });
                video.srcObject = stream;
                
                // 监听视频轨道的变化
                stream.getVideoTracks()[0].addEventListener('ended', () => {
                    console.log('Camera track ended');
                });
                
                // 打印初始宽高比
                video.onloadedmetadata = () => {
                    console.log('Initial aspect ratio:', video.videoWidth / video.videoHeight);
                };
            } catch (err) {
                console.error('Error accessing camera:', err);
            }
        }

        // 监听页面可见性变化
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
                // 页面重新可见时，检查当前摄像头宽高比
                if (video.srcObject) {
                    const track = video.srcObject.getVideoTracks()[0];
                    const settings = track.getSettings();
                    console.log('Resumed aspect ratio:', settings.width / settings.height);
                }
            }
        });

        startCamera();
    </script>
</body>
</html>

备注：内容来源于stack exchange，提问作者Ulhas Pawar