javascript - How to close camera inside the modal using Html5 QrCode Scanner ASP.NET MVC - Stack Overflow

admin管理员组

文章数量:1394389

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

Share Improve this question Follow edited Mar 2, 2022 at 17:00 Michaelweston asked Mar 1, 2022 at 13:52 MichaelwestonMichaelweston 15911 gold badge33 silver badges1111 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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()

本文标签： javascriptHow to close camera inside the modal using Html5 QrCode Scanner ASPNET MVCStack Overflow