Skip to content

Instantly share code, notes, and snippets.

@mebjas

mebjas/html-file.html

Last active January 28, 2023 10:45
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Demo code on using github.com/mebjas/html5-qrcode. This was used in https://blog.minhazav.dev/research/html5-qrcode.html
Raw
html-file.html
<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>
Raw
html5-qrcode-demo.js
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);
});
@apkc
Copy link

apkc commented Aug 30, 2022

I seem to have an issue when the qrcode scanner is kept in between the

. When the scanner starts it prompts the permission with REQUEST CAMERA PERMISSIONS button. but since the button is not having any type"button" attribute by default, it is posting the form automatically which is unintended. how can the type="button" be added to prevent it? Thanks

@Macof08
Copy link

Macof08 commented Oct 10, 2022

@mwambajoshua for now, you can do this

function validURL(str) {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return !!pattern.test(str);
}

function onScanSuccess(qrCodeMessage) {
  if (validURL(qrCodeMessage)) {
    window.location.href = qrCodeMessage;
  }
}

var html5QrcodeScanner = new Html5QrcodeScanner(
	"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

@mebjas how can i add this script only the back camara? html5QrcodeScanner.render({ facingMode: { exact:"environment" } }, onScanSuccess); i cant :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment