如何使用 Html5 QrCode 扫描仪 ASP.NET MVC 关闭模式内的相机

Question

您好，我正在使用 Html5 QrCode 库来使用扫描仪，并且我在模态中使用它，我遇到的问题是当我关闭模态时，相机不会停止并且继续运行，我想知道是否存在一个函数或某人做了同样的事情停止相机使用此库https://github.com/mebjas/html5-qrcode

在我的情况下，在关闭按钮中使用 onClick 是理想的选择。

模态

<div class="modal" id="livestream_scanner" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Search Barcode Scanner</h5>
                <button type="button" class="close" data-dismiss="modal" onclick="Close()" aria-label="Close"> -- >Here I would like to call some function to close the camera
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="qr-reader" style="width:450px"></div>


                <div id="qr-reader-results" style="margin-bottom: 25px;"></div>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

脚本

<script>


    function docReady(fn) {

            // see if DOM is already available
            if (document.readyState === "complete" || document.readyState === "interactive") {
                // call on next available tick
                setTimeout(fn, 1);
            } else {

                    document.addEventListener("DOMContentLoaded", fn);


            }
    }



    docReady(function () {

            var resultContainer = document.getElementById('qr-reader-results');
            var lastResult, countResults = 0;
            function onScanSuccess(decodedText, decodedResult) {
                if (decodedText !== lastResult) {
                    ++countResults;
                    lastResult = decodedText;
                    window.location.href = "@Url.Action("Run", "Search")?criteria=" + lastResult;
                    html5QrcodeScanner.clear();



                }
            }

        var html5QrcodeScanner = new Html5QrcodeScanner(

            "qr-reader", { fps: 10, qrbox: 250, rememberLastUsedCamera: false  });

            html5QrcodeScanner.render(onScanSuccess);
        
    });

  
</script>

Answer 1

的方法。

在 GitHub 库描述中，他们提到了停止停止扫描

要停止使用摄像头并停止扫描，请调用 Html5Qrcode#stop()，它会返回一个用于停止视频源和扫描的 Promise。

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

请注意，该类是有状态的，当扫描结束或用户打算继续前进时，在调用 start() 后，应调用 stop() 来安全地正确拆除视频和相机对象。 stop() 将停止取景器上的视频输入。

Answer 2

给出的答案对我来说在模式关闭/隐藏时不起作用。我尝试检查该元素并找到两个按钮，即开始按钮和停止按钮，然后当我在里面尝试此操作时 >关闭相机时的模态隐藏功能。

$('#html5-qrcode-button-camera-stop').click()