Firefox中html5-qrcode二维码扫描器调用摄像头报AbortError求助

错误触发原因 #

• Firefox对媒体设备权限、资源占用的约束比Chrome严格，非HTTPS环境（localhost除外）会直接拒绝摄像头申请
• 未指定明确的视频流参数时，Firefox无法匹配到可用的摄像头配置
• 旧的扫描实例未释放摄像头资源时，新实例启动会被Firefox拦截

修复步骤 #

1. 前置配置检查 #

• 公网部署的站点必须使用HTTPS协议，本地开发可使用localhost测试
• 清理Firefox当前站点的摄像头权限缓存：点击地址栏左侧权限图标，将摄像头权限设置为允许，或在about:preferences#privacy的摄像头权限配置中删除当前站点的历史记录，重新访问后授权

2. 代码修改 #

新增视频流约束参数+实例复用逻辑，修改后的完整代码如下：

// 全局存储扫描实例，避免重复创建
let html5Qr = null;

function listcamera() {
    Html5Qrcode.getCameras().then(cameras => {
        if (cameras && cameras.length) {
            // 优先选后置环境摄像头，适配Firefox和Chrome的摄像头排序差异
            const cameraId = cameras.find(cam => cam.label.toLowerCase().includes('back'))?.id || cameras[cameras.length - 1].id;
            scan(cameraId);
        }
    }).catch(err => {
        alert(err);
    });
}

async function scan(cameraId) {
    // 先释放已有实例的摄像头资源
    if (html5Qr && html5Qr.isScanning) {
        await html5Qr.stop();
        html5Qr.clear();
        html5Qr = null;
    }
    html5Qr = new Html5Qrcode("reader");
    html5Qr.start(
        cameraId,
        {
            fps: 10,
            qrbox: 250,
            // 新增Firefox适配的视频约束，指定合理的分辨率范围
            videoConstraints: {
                width: { min: 320, ideal: 1280, max: 1920 },
                height: { min: 240, ideal: 720, max: 1080 }
            }
        },
        qrCodeMessage => {
            console.log(`QR Code detected: ${qrCodeMessage}`);
            // 你的业务逻辑写在这里
        },
        errorMessage => {
            console.log(`QR Code no longer in front of camera: ${errorMessage}`);
        }
    ).catch(err => {
        console.log(`Unable to start scanning, error: ${err}`);
        // AbortError报错兜底：不指定cameraId，让浏览器自动选择默认摄像头
        if (err.includes('AbortError')) {
            html5Qr.start(
                { facingMode: "environment" },
                {
                    fps: 10,
                    qrbox: 250,
                    videoConstraints: {
                        width: { min: 320, ideal: 720, max: 1080 }
                    }
                },
                qrCodeMessage => { console.log(qrCodeMessage) },
                err => { console.log(err) }
            ).catch(e => console.log(e))
        }
    });
};

listcamera();

3. 其他注意事项 #

• 不要在DOM未加载完成时调用listcamera()方法，确保ID为reader的DOM元素已经渲染完成再执行初始化
• 如果是移动端Firefox，不要同时申请摄像头和麦克风权限，单独申请摄像头权限即可

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