html5-qrcode icon indicating copy to clipboard operation
html5-qrcode copied to clipboard

Stop after successful API response.

Open shankhadevpadam opened this issue 10 months ago • 1 comments

Describe the Question I want to stop the scan after a successful API response.

Context about your web application I am developing the event ticketing system where I want to scan the ticket on the door. After a successful ticket scan, it beeps a sound and then i want to stop scanning and restart the scanner. Like in movie hall.

<script>
    async function onScanSuccess(decodedText, decodedResult) {
        console.log(decodedResult);

        if (decodedText) {
            try {
                const response = await fetch('/api/scan/ticket', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        ticket_number: decodedText
                    })
                })

                const result = await response.json()

                if (response.ok) {
                    audio.play()
                } else {
                    throw result.message
                }
            } catch (error) {
                alert(error)
            }
        }
    }

    function onScanFailure(error) {
        //alert(error)
    }

    let html5QrcodeScanner = new Html5QrcodeScanner(
        "reader", {
            fps: 10,
            qrbox: {
                width: 250,
                height: 250
            }
        },
        /* verbose= */
        false);
    html5QrcodeScanner.render(onScanSuccess, onScanFailure);
</script>

Optional, Environment (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

shankhadevpadam avatar Aug 29 '23 12:08 shankhadevpadam