移动端网页点击按钮重请求相机权限方案（支持iOS/Android）

核心结论 #

无法自动获取相机权限——所有现代浏览器出于安全规范，要求相机权限请求必须由用户主动交互（如点击按钮）触发，这是iOS和Android端浏览器的统一规则。

实现方案 #

1. 权限状态检测与请求逻辑 #

使用navigator.mediaDevices.getUserMedia()发起相机权限请求，结合navigator.permissions.query()检测当前权限状态，以此展示对应UI提示。用户拒绝权限后，需通过按钮触发重新请求（Android端可直接再次弹出授权窗，iOS端需引导用户到系统设置手动开启）。

2. 跨平台兼容处理 #

• iOS Safari：用户拒绝权限后，再次调用getUserMedia不会弹出授权窗，必须引导用户前往「设置-Safari-相机」手动开启权限。
• Android 浏览器/Chrome：拒绝权限后，用户点击按钮重新调用getUserMedia，浏览器会再次弹出授权请求窗。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码扫描相机权限</title>
</head>
<body>
    <button id="cameraRequestBtn">请求相机权限</button>
    <div id="permissionTip"></div>
    <video id="cameraPreview" autoplay playsinline style="display: none; width: 100%;"></video>

    <script>
        const requestBtn = document.getElementById('cameraRequestBtn');
        const tipElement = document.getElementById('permissionTip');
        const videoElement = document.getElementById('cameraPreview');

        // 检测当前相机权限状态
        async function checkPermissionState() {
            try {
                const permission = await navigator.permissions.query({ name: 'camera' });
                updateTip(permission.state);
                // 监听权限状态变化（用户在设置中修改权限后触发）
                permission.onchange = () => updateTip(permission.state);
            } catch (err) {
                // 旧版浏览器不支持permissions API时的提示
                tipElement.textContent = '点击按钮尝试请求相机权限';
            }
        }

        // 更新权限提示文本
        function updateTip(state) {
            switch(state) {
                case 'granted':
                    tipElement.textContent = '相机权限已授权';
                    requestBtn.style.display = 'none';
                    videoElement.style.display = 'block';
                    break;
                case 'denied':
                    tipElement.textContent = '相机权限已拒绝，请开启后重试';
                    requestBtn.textContent = '重新尝试请求';
                    // iOS专属提示
                    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
                        tipElement.textContent += '（iOS用户请前往「设置-Safari-相机」开启权限）';
                    }
                    break;
                case 'prompt':
                    tipElement.textContent = '点击按钮请求相机权限';
                    requestBtn.textContent = '请求相机权限';
                    break;
            }
        }

        // 请求相机权限并启动预览
        async function requestCameraAccess() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
                videoElement.srcObject = stream;
                updateTip('granted');
            } catch (err) {
                console.error(err);
                if (err.name === 'NotAllowedError') {
                    updateTip('denied');
                } else if (err.name === 'NotFoundError') {
                    tipElement.textContent = '未检测到可用相机';
                } else {
                    tipElement.textContent = '请求失败：' + err.message;
                }
            }
        }

        // 绑定按钮点击事件
        requestBtn.addEventListener('click', requestCameraAccess);

        // 页面加载时检测权限状态
        window.addEventListener('load', checkPermissionState);
    </script>
</body>
</html>

关键注意事项 #

• 所有权限请求必须由用户主动点击触发，页面加载时自动调用getUserMedia会被浏览器直接拦截。
• iOS端用户拒绝权限后，无法通过代码再次弹出授权窗，只能引导用户到系统设置操作。
• 使用facingMode: 'environment'可直接调用后置摄像头，适配二维码扫描场景。

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