多浏览器下摄像头页面显示异常排查求助

我用PHP和JavaScript开发了一个摄像头页面，测试代码如下。目前该页面仅在Firefox浏览器中可正常显示，其余浏览器虽已授予摄像头权限，仍会弹出权限错误提示。奇怪的是，将代码部署至其他服务器时，所有浏览器均能正常运行；但部署到我方Azure云服务器后，video和canvas元素无法显示，仅呈现空白区域。求告知需排查的方向以解决该问题。

<!DOCTYPE html>
<html>
<head>
    <title>test code</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <canvas id="canvas" style="display: none;"></canvas>

    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.min.js"></script>
    <script>
        // Check for camera support
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            console.log('Camera not supported.');
        } else {
            // Access the camera and capture video stream
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function(stream) {
                    var video = document.getElementById('video');
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function(error) {
                    console.log('Error accessing the camera:', error);
                });

            // Capture and decode QR code from video stream frames
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            function scanQRCode() {
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                var code = jsQR(imageData.data, imageData.width, imageData.height);

                if (code) {
                    console.log('Decoded QR Code:', code.data);
                }

                requestAnimationFrame(scanQRCode);
            }

            // Start scanning the QR code
            requestAnimationFrame(scanQRCode);
        }
    </script>
</body>
</html>

1. 安全上下文（HTTPS）检查 #

现代浏览器要求getUserMedia必须在HTTPS或localhost环境下运行。Azure服务器若使用HTTP访问，除Firefox可能有宽松策略外，其他浏览器会直接拦截摄像头权限请求。检查Azure站点是否配置了有效HTTPS证书，确保访问地址为HTTPS。

2. Azure 服务器安全策略配置 #

• 内容安全策略（CSP）：若Azure App Service配置了CSP，需确保允许media-src 'self'或相关摄像头资源访问，否则会阻止视频流加载。可通过浏览器开发者工具的Console面板查看是否有CSP相关报错。
• CORS策略：确认前端域名未被Azure的CORS规则限制，虽然摄像头访问是浏览器端本地操作，但反向代理或App Service的配置可能存在误拦截。

3. 浏览器权限与交互限制 #

• 部分浏览器即使用户授予权限，非安全上下文下仍会实际阻止流获取，务必确认Azure站点为HTTPS访问。
• 查看浏览器Console的具体错误信息（如NotAllowedError、SecurityError），这些错误能直接定位问题根源，比如权限被浏览器安全策略拦截，而非用户主动拒绝。

4. 页面元素初始化问题 #

• 代码中canvas未设置宽高属性，默认尺寸为300x150，与video的640x480不匹配，导致drawImage时画布内容异常。修改canvas标签：<canvas id="canvas" style="display: none;" width="640" height="480"></canvas>。
• 部分浏览器限制自动播放视频，即使设置了autoplay属性，仍需用户交互（如点击按钮）触发。可添加启动按钮，在点击事件中执行摄像头初始化逻辑。

5. 浏览器兼容性优化 #

• 不同浏览器对getUserMedia参数要求有差异，Chrome等浏览器可明确指定视频参数并关闭音频：navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 }, audio: false })。
• 兼容旧版浏览器的srcObject设置，可添加fallback逻辑：

.then(function(stream) {
    var video = document.getElementById('video');
    if ('srcObject' in video) {
        video.srcObject = stream;
    } else {
        video.src = window.URL.createObjectURL(stream);
    }
    video.play();
})

6. Azure 网络与WAF限制 #

检查Azure的Web应用防火墙（WAF）或出站网络规则，确认未误拦截浏览器端摄像头相关的API调用或请求头。

内容的提问来源于stack exchange，提问作者Heder