Skip to content

Instantly share code, notes, and snippets.

Last active January 28, 2023 10:45
What would you like to do?
Demo code on using This was used in
<title>Html-Qrcode Demo</title>
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
<script src=""></script>
<script src="html5-qrcode-demo.js"></script>
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) {
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
// 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);
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

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 });

@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