如何使用 Html5 QrCode Scanner ASP.NET MVC 关闭模态内的相机答案

【问题标题】：How to close camera inside the modal using Html5 QrCode Scanner ASP.NET MVC如何使用 Html5 QrCode Scanner ASP.NET MVC 关闭模态内的相机
【发布时间】：2022-06-29 22:10:20
【问题描述】：

您好，我正在使用 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>

【问题讨论】：

标签： javascript html asp.net asp.net-mvc qr-code

【解决方案1】：

在 GitHub 库描述中他们提到了停止的方法

停止扫描

要停止使用相机并因此停止扫描，请调用 Html5Qrcode#stop()，它会返回一个 Promise 以停止视频馈送和扫描。

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

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

【讨论】：