-
-
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.
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 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.