Last active
March 24, 2024 15:43
-
-
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 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 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
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am facing the same issue and having little progress with the solution provided here > https://stackoverflow.com/a/61609282/4679429
Basically you also need to further grant the camera permission {RESOURCE_VIDEO_CAPTURE} within webview. Include following code in the WebChromeClient().
@OverRide
public void onPermissionRequest(final PermissionRequest request) {
final String[] requestedResources = request.getResources();
for (String r : requestedResources) {
if (r.equals(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) {
request.grant(new String[]{PermissionRequest.RESOURCE_VIDEO_CAPTURE});
break;
}
}
}
It open the camera successfully now but then another issue comes, which is the camera view won't move (freeze) when I moving the phone and the camera view only update when I touch any place on phone screen. Does anyone has idea on this issue ?
Updated:
I found the solution for the aforementioned issue (camera freeze), basically just need to add an animated SVG into the background of the camera to keep the android webview updated > mebjas/html5-qrcode#659