Last active
April 27, 2024 09:39
-
-
Save mebjas/729c5397506a879ec704075c8a5284e8 to your computer and use it in GitHub Desktop.
Demo code on using github.com/mebjas/html5-qrcode. This was used in https://blog.minhazav.dev/research/html5-qrcode.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Html-Qrcode Demo</title> | |
| <body> | |
| <div id="qr-reader" style="width:500px"></div> | |
| <div id="qr-reader-results"></div> | |
| </body> | |
| <script src="https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js"></script> | |
| <script src="html5-qrcode-demo.js"></script> | |
| </head> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| var html5QrcodeScanner = new Html5QrcodeScanner( | |
| "qr-reader", { fps: 10, qrbox: 250 }); | |
| function onScanSuccess(decodedText, decodedResult) { | |
| if (decodedText !== lastResult) { | |
| ++countResults; | |
| lastResult = decodedText; | |
| console.log(`Scan result = ${decodedText}`, decodedResult); | |
| resultContainer.innerHTML += `<div>[${countResults}] - ${decodedText}</div>`; | |
| // Optional: To close the QR code scannign after the result is found | |
| html5QrcodeScanner.clear(); | |
| } | |
| } | |
| // Optional callback for error, can be ignored. | |
| function onScanError(qrCodeError) { | |
| // This callback would be called in case of qr code scan error or setup error. | |
| // You can avoid this callback completely, as it can be very verbose in nature. | |
| } | |
| html5QrcodeScanner.render(onScanSuccess, onScanError); | |
| }); |
hi bro thanks for the solution but need one more help its working only in localhost and Https its not working on http please help please see the snipe
That has nothing to do with the library, it's a limit imposed by the browser.
What a great tool!
Like others, I keep wondering if there's a way to prioritize the back camera, I never have the QR code on my face, it's always in front of me so I want to use the back camera first.
Yes, as @tacman says, it would be nice to prioritize back camera so that I don't need camera selection list.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi bro thanks for the solution but need one more help its working only in localhost and Https its not working on http please help
please see the snipe