-
-
Save mebjas/729c5397506a879ec704075c8a5284e8 to your computer and use it in GitHub Desktop.
<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> |
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); | |
}); |
Nice QR code reader.. but... Does anyone know what permissions you need to add to Android Studio to get this to work within an Android app (as a webview)? I've added the camera and write external permissions.. but within the app it says "NotAllowedError: Permission denied". Though if I load up the url within Chrome it works fine. (The url is https)
Thanks.are you able to use this in the web view ??
Hey did you find any solution? I am so confused.
I believe it has nothing to do with Android Studio, this plugin is somehow not interacting with the Web View. Still looking for answers.
Nice QR code reader.. but... Does anyone know what permissions you need to add to Android Studio to get this to work within an Android app (as a webview)? I've added the camera and write external permissions.. but within the app it says "NotAllowedError: Permission denied". Though if I load up the url within Chrome it works fine. (The url is https)
Thanks.
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
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.
Hey did you find any solution? I am still looking for the answer?