Html5 QRcode scanner库扫码成功后无法关闭摄像头问题求助

针对调用stop()后摄像头仍无法关闭的问题，可尝试以下几种解决方案：

方案1：添加扫描标记避免重复触发并手动清理容器 #

你的代码虽通过判断结果去重，但仍可能存在回调多次触发导致stop()执行异常的情况。新增标记确保仅处理一次扫码结果，同时在停止后清空扫描容器释放资源：

docReady(function () {
    var resultContainer = document.getElementById('qr-reader-results');
    var lastResult, countResults = 0;
    var hasScanned = false; // 标记是否已处理过扫码结果
    function onScanSuccess(decodedText, decodedResult) {
        if (decodedText !== lastResult && !hasScanned) {
            hasScanned = true;
            ++countResults;
            lastResult = decodedText;
            console.log(`Scan result ${decodedText}`, decodedResult);

            add_my_by_qr_code(decodedText);

            html5QrcodeScanner.stop()
                .then(() => {
                    // 清空扫描容器，强制释放相关资源
                    document.getElementById('qr-reader').innerHTML = '';
                })
                .catch((err) => {
                    console.error('停止扫描失败:', err);
                });
        }
    }

    var html5QrcodeScanner = new Html5QrcodeScanner(
        "qr-reader", { fps: 10, qrbox: 250 });
    html5QrcodeScanner.render(onScanSuccess);
});

方案2：手动关闭媒体流 #

若stop()方法无法正常释放摄像头流，可直接获取媒体流并手动终止：

// 修改onScanSuccess中的停止逻辑
html5QrcodeScanner.stop()
    .then(() => {
        // 获取所有视频轨道并停止
        navigator.mediaDevices.enumerateDevices()
            .then(devices => {
                devices.forEach(device => {
                    if (device.kind === 'videoinput') {
                        navigator.mediaDevices.getUserMedia({ video: { deviceId: device.deviceId } })
                            .then(stream => {
                                stream.getTracks().forEach(track => track.stop());
                            });
                    }
                });
            });
        document.getElementById('qr-reader').innerHTML = '';
    })
    .catch((err) => {
        console.error('停止扫描失败:', err);
    });

方案3：升级库到最新版本 #

部分旧版本的html5-qrcode存在stop()方法的bug，升级到最新版本后重新测试，大概率能解决该问题。

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