Skip to content

Instantly share code, notes, and snippets.

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

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

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

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


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
// ^ this will stop the scanner (video feed) and clear the scan area.

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

Copy link

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.

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

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="" 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?

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 camera showing

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?

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

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