如何使用 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()