Html5 QRcode 扫描库扫描后不关闭相机

Question

我使用这个库进行二维码扫描https://github.com/mebjas/html5-qrcode

它工作正常，但成功扫描后我无法停止相机，并且相机在使用后一直保持打开状态。

这是我使用的代码，我也使用建议的停止功能，但不起作用。

docReady(function () {
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
function onScanSuccess(decodedText, decodedResult) {
    if (decodedText !== lastResult) {
        ++countResults;
        lastResult = decodedText;
        // Handle on success condition with the decoded message.
        console.log(`Scan result ${decodedText}`, decodedResult);

        

        add_my_by_qr_code(decodedText);

        html5QrcodeScanner.stop().then((ignore) => {
          // QR Code scanning is stopped.
        }).catch((err) => {
          // Stop failed, handle it.
        });

       

    }
}

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

Answer 1

我找到了触发库的“停止相机”按钮上的单击事件的解决方案，该按钮在相机处于活动状态时显示。

jQuery way 
$("#html5-qrcode-button-camera-stop").trigger("click");

Pure JS
document.getElementById("html5-qrcode-button-camera-stop").click();

但最好检查按钮是否处于活动状态以及扫描仪分区是否可见（如果单击按钮后显示扫描仪）

  if (
          $("#html5-qrcode-button-camera-stop").length 
          && 
          !$('#qr-reader').is(':visible')
    ) 
    $("#html5-qrcode-button-camera-stop").trigger("click");

Answer 2

停止摄像头的函数与scanner对象内的html5Qrcode对象相关联，因此处理程序内的代码应该是：

html5QrcodeScanner.html5Qrcode.stop()

这会停止相机，但会在屏幕上留下一些奇怪的元素，例如扫描区域所在的绿色边框。我不知道这是否不应该被调用或者这是否是一个错误。

就我而言，在获得结果后我不需要扫描仪，因此我通过调用 Html5QrcodeScanner#clear 函数调用通用函数从屏幕上删除整个扫描仪：

html5QrcodeScanner.clear(); 

参考：https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5QrcodeScanner#clear：