Hello I'm working with Html5 QrCode library to use a scanner, and I'm using it inside a modal the problem that I have is when I close the modal the camera does not stop and it keeps on, I want to know if exist a function or someone did something the same to stop the camera working with this library

In my case will be ideal using an onClick in the close button.

Modal

<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

<script>


    function docReady(fn) {

            // see if DOM is already available
            if (document.readyState === "plete" || 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>

Hello I'm working with Html5 QrCode library to use a scanner, and I'm using it inside a modal the problem that I have is when I close the modal the camera does not stop and it keeps on, I want to know if exist a function or someone did something the same to stop the camera working with this library https://github./mebjas/html5-qrcode

In my case will be ideal using an onClick in the close button.

Modal

<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

<script>


    function docReady(fn) {

            // see if DOM is already available
            if (document.readyState === "plete" || 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
• asp-mvc
• qr-code

2 Answers 2

on GitHub library description they mentioned method to stop

Stop Scanning

To stop using camera and thus stop scanning, call Html5Qrcode#stop() which returns a Promise for stopping the video feed and scanning.

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

Note that the class is stateful and stop() should be called to properly tear down the video and camera objects safely after calling start() when the scan is over or the user intend to move on. stop() will stop the video feed on the viewfinder.

The given answer is not working for me on modal dismiss/hide. I try to inspect the element and find two buttons , the start and stop button then when I try this inside > on modal hide function in close the camera.

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