Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demo code on using github.com/mebjas/html5-qrcode. This was used in https://blog.minhazav.dev/research/html5-qrcode.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>
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);
});
@mebjas
Copy link
Author

mebjas commented Aug 9, 2020

@BryarGH @DaSoulRed

Some answers

1- How can I change the default type of starting, Like changing scan type from camera to file while loading the page.

This is not supported at the moment, I recommend filing a feature request here.

2- I want the camera to stop directly after finding the result not getting more results after that so if MATCH just stop.

This you can do using the Html5QrcodeScanner#clear() method. Here's an example:

var html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", { fps: 10, qrbox: 250 });
        
function onScanSuccess(qrCodeMessage) {
    // handle on success condition with the decoded message
    html5QrcodeScanner.clear();
    // ^ this will stop the scanner (video feed) and clear the scan area.
}

html5QrcodeScanner.render(onScanSuccess);

I have updated an example at https://blog.minhazav.dev/research/html5-qrcode as well. I will add one here as well.

3- Is there away to read even while the QR having a logo inside?

Yes this seems to be supported already

@mebjas
Copy link
Author

mebjas commented Aug 9, 2020

@shikhargilhotra This can be done very similar to the approach in comment above

var html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", { fps: 10, qrbox: 250 });
        
function onScanSuccess(qrCodeMessage) {
    // handle on success condition with the decoded message
    html5QrcodeScanner.clear();
    // ^ this will stop the scanner (video feed) and clear the scan area.

    // You can close the popup here with the message.
}

html5QrcodeScanner.render(onScanSuccess);

I think this SO answer could help with closing - https://stackoverflow.com/a/18894710/2614250

@secure-slikroad
Copy link

secure-slikroad commented Aug 13, 2020

Hello mebjas, i have try your code and tryin on android phone and iphone, thats working perfecly. Thats great.
When we request permission camera, why always front camera to be the first selection.
Can we make to use "back camera" as the default camera ?

@mebjas
Copy link
Author

mebjas commented Aug 29, 2020

@secure-slikroad there has been a feature request around this - mebjas/html5-qrcode#65
Just today I have sent a PR to add this support - mebjas/html5-qrcode#104

Once its merged (version 1.2.1) once can request the browser to open the front camera or back camera directly.

That said, this support is being added to Html5Qrcode class and not the Html5QrcodeScanner class. I'd recommend adding a comment to mebjas/html5-qrcode#65 on how you desire the user experience to be - based on response from different users I'll try to design a scalable way to handle this in the scanner code as well.

@mwambajoshua
Copy link

mwambajoshua commented Sep 4, 2020

How do I make the scanner to auto redirect the browser after decoding the qr?

@mebjas
Copy link
Author

mebjas commented Sep 4, 2020

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

@sensationpanda
Copy link

sensationpanda commented Sep 11, 2020

I tried on Chrome and Firefox on Windows10, Chrome and Firefox on Ubuntu, Chrome on Android. I guess it is because of server settings, since it is working on localhost also

Hi, same problem," unable to query supported devices" on AWS, How can you solve this?

@BryarGH
Copy link

BryarGH commented Sep 11, 2020

@Haz-MatPLz
Copy link

Haz-MatPLz commented Oct 8, 2020

how do i style this

@Haz-MatPLz
Copy link

Haz-MatPLz commented Oct 8, 2020

because I'm using it in one of my clients apps and was wondering how to make (no offence meant hear) not so ugly

@Haz-MatPLz
Copy link

Haz-MatPLz commented Oct 8, 2020

@mebjas plz read the above

@mebjas
Copy link
Author

mebjas commented Oct 10, 2020

@Haz-MatPLz - Html5QrcodeScanner is meant to provide a simple UI experience for QR code scanning. If you want to use your own UI, use Html5Qrcode library which provides all the necessary APIs to build so.

Reference: https://github.com/mebjas/html5-qrcode#for-using-inline-qr-code-scanning-with-webcam-or-smartphone-camera

@charmjo
Copy link

charmjo commented Nov 20, 2020

I'm glad that I was able to find this sample and opted for the end-to-end scanner. Is there a way to turn off the camera (from scanning to idle again) if it doesn't successfully scan for a certain amount of time?

@virtualvoid
Copy link

virtualvoid commented Dec 14, 2020

not working on iOS, permissions denied.

edit: the website needs to be on HTTPS

@hasalfernando
Copy link

hasalfernando commented Dec 23, 2020

image

Does anyone know whether there is any possible solution to change the default width of video from 300px? Though I have set the width of div to 100%, video and canvas width of 300px is being overridden and video is getting cornered to the left. I want to know whether there is any possible way to adjust this width?

@virtuosodelared
Copy link

virtuosodelared commented Jan 14, 2021

@matiazar If I recall correctly this can be achieved when you use the Html5Qrcode directly. In the demo I have consciously added logic for request permission every time - to both show demo and I think user should have control.

But at the API level, the permission is needed only once* (...)

Thanks for this great applicaction. I am using this qr reader in a pc with a webcam to read qrcodes, open urls from qr´s, and back again to the qr reader. So I would like to know if is possible to avoid give permissions again and also click in "start scanning" button. In this way, qr reader will be scanning automatically.
Please let me know if this is possible and how i can achieve it. Thanks in advance

@jmsousa
Copy link

jmsousa commented Jan 27, 2021

Hi, I am trying to use in Blazor with the following code:

Blazor Page:
<div style="width: auto" id="reader"></div>' @code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender) await _jsRuntime.InvokeVoidAsync("Html5QrCode", DotNetObjectReference.Create(this));
await base.OnAfterRenderAsync(firstRender);
}
}
`

Js:
`function Html5QrCode () {
var html5QrCode = new Html5Qrcode("reader");
Html5Qrcode.getCameras().then(devices => {

    if (devices && devices.length) {

        var cameraId = devices[1].id;
        
        alert("cameraId: " + cameraId);

        html5QrCode.start(
            cameraId,
            {
                fps: 10,    // Optional frame per seconds for qr code scanning
                qrbox: 250  // Optional if you want bounded box UI
            },
            qrCodeMessage => {
                // do something when code is read
                alert(qrCodeMessage);
            },
            errorMessage => {
                // parse error, ignore it.
                // alert(errorMessage);
            })
            .catch(err => {
                // Start failed, handle it.
            });
    }
}).catch(err => {
    // handle err
    alert(err);
});

};`

I can read the camera id, but then I have the following error:
Cannot set property 'innerHTML' of null

thanks,
João Sousa

@friendztech7
Copy link

friendztech7 commented Feb 26, 2021

when i run code on phone it's show
error :- unable to query supported devices

Please Help Sir

@Take51
Copy link

Take51 commented Mar 3, 2021

HI,
You code works super good. Anyway I need some help.
When I scanned the QR code, scanner was shutted down and give me a result from the scan.
Can I after this add some button like "Start a new scan" or "Scan another code"? Because now, when I want a new scan, I must reload the whole page..
Thanks,
Dominik

@snatcoinOfficial
Copy link

snatcoinOfficial commented Mar 18, 2021

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.

@Reza-kavian
Copy link

Reza-kavian commented Apr 13, 2021

In your site demo, in addition to qrcode, I can also scan barcodes. But when I transfer the source code to my project, it only reads qrcode but does not read barcodes

@viney-equinix
Copy link

viney-equinix commented Apr 25, 2021

Hi Everyone,

I am facing the issue with Html5Qrcode availability in global scope in my react typescript app. i am following this article (https://simbathesailor.dev/qrcode-scan-web-reactjs/) to implement as Hook in my react-typescript app, could you please help me to fix this issue. how can i declare in .d.ts file.

What exactly you want to say in below comment
// eslint-disable-next-line
const html5qrCodeScanner = new Html5Qrcode(qrcodeMountNodeID);

How can i fix this issue, i am not getting Html5Qrcode in global scope event after following the complete steps ?

Please help

@haspden
Copy link

haspden commented May 14, 2021

Hi Guys I have a lovely working example setup including some customisations of redirecting the user to a page with variables gathered from the QR code for processing, but I'm still stuck on how to enforce the rear camera...

Posted my general question here but could do with some input
https://stackoverflow.com/questions/67538983/navigator-mediadevices-getusermedia-reverse-camera-list-order-show-only-rear

I think the issue is I am using the simple version and applying my custom js inside resultContainer.innerHTML += and I need to be using the (start) method / PRO method instead, however I cant find any examples of this method?

@mebjas do you have any thoughts

Thanks

@davidcbittner
Copy link

davidcbittner commented May 19, 2021

This routine is working for my needs and I have my code in there to process the qrCodeMessage and the .clear() does clear it however wipes the widget completely from the body. What's the procedure to stop scanning once you have success and stop the video feed etc as if you hit the stop button on the demo? I want to scan the code, stop video feed etc, process the message then be able to scan a new code. I can't seem to figure out how to start it again after the .clear() without refreshing the page.

function onScanSuccess(qrCodeMessage) {
// handle on success condition with the decoded message
html5QrcodeScanner.clear();
// ^ this will stop the scanner (video feed) and clear the scan area.
}

@Jalil-Irfan
Copy link

Jalil-Irfan commented Jun 7, 2021

In your site demo, in addition to qrcode, I can also scan barcodes. But when I transfer the source code to my project, it only reads qrcode but does not read barcodes

Yes i too couldnt scan anything except QR

@mebjas
Copy link
Author

mebjas commented Jun 14, 2021

@Reza-kavian @Jalil-Irfan - Try latest version of the library (v2.0.9), it should read different formats listed in the readme.

@sergey-kukosh
Copy link

sergey-kukosh commented Aug 5, 2021

Hi mebjas
I found the one problem, I ecoded "1" to QR code, and this what I can't scan, it can't decode. Can you tell me where in the library I can see if I can fix it, thank you!
Screenshot 2021-08-05 at 11 08 57

@vyking60
Copy link

vyking60 commented Jan 3, 2022

Hi mebjas,
I am more or less new to web development. I tried your example but I get error:

scan:57 Uncaught ReferenceError: Html5QrcodeScanner is not defined

I have put in Handlebars layout:

<script src="https://unpkg.com/html5-qrcode" type="text/javascript">

and in handlebars view this:

QR Code Scanner

<script> var resultContainer = document.getElementById('qr-reader-results'); var lastResult, countResults = 0; function onScanSuccess(decodedText, decodedResult) { if (decodedText !== lastResult) { ++countResults; lastResult = decodedText; // Handle on success condition with the decoded message. console.log(`Scan result ${decodedText}`, decodedResult); } } var html5QrcodeScanner = new Html5QrcodeScanner( "qr-reader", { fps: 10, qrbox: 250 }); html5QrcodeScanner.render(onScanSuccess); </script>

I know it must be some 'basic' problem... Can you help?

@fopsycute
Copy link

fopsycute commented Jan 5, 2022

hi mebjas, I tried using all ur format, but anytime I display it on browser(localhost) everything is always blank....no camera showing

@bkmattias
Copy link

bkmattias commented Jan 25, 2022

Good evening. Is there a way to set it on image reader by default instead of scan first?

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