Skip to content

Instantly share code, notes, and snippets.

@mebjas

mebjas/html-file.html

Last active Jan 14, 2021
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(qrCodeMessage) {
if (qrCodeMessage !== lastResult) {
++countResults;
lastResult = qrCodeMessage;
resultContainer.innerHTML += `<div>[${countResults}] - ${qrCodeMessage}</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);
});
@ThePlannerAffairs

This comment has been minimized.

Sign in to view
Copy link

@ThePlannerAffairs ThePlannerAffairs commented May 9, 2020 •
edited

Hi,
I copied from line 1 to line 201 into my site.
However it doesnt work.
Always state that document is undefined.
Any suggestion?
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented May 10, 2020

@ThePlannerAffairs
Interesting, document is supposed to be global in browser, which browser are you using?
@yumibb98

This comment has been minimized.

Sign in to view
Copy link

@yumibb98 yumibb98 commented May 10, 2020

Hi,
Could you help me? I got this error when I run my page,

Uncaught ReferenceError: Html5Qrcode is not defined
at HTMLDocument.

​It pointed here:
// declaration of html5 qrcode
const html5QrCode = new Html5Qrcode("qr");

Thank you so much!
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented May 10, 2020

@yumibb98 looks like you have not included the library

Please download the library from https://github.com/mebjas/html5-qrcode/releases or https://github.com/mebjas/html5-qrcode/releases/tag/v1.0.9 which is the latest code. And include the minified js file in your code before using this sample.

<div id="qr" width="400px"></div>
<!-- use the appropriate path below -->
<script src="html5-qrcode.min.js"></script>

<!-- And then  -->
<script>
// declaration of html5 qrcode
const html5QrCode = new Html5Qrcode("qr");
//.. rest of code
</script>

https://github.com/mebjas/html5-qrcode/blob/master/README.md has better detail on how to use this library.

Or there is a writeup at: https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/

Hope this helps
@yumibb98

This comment has been minimized.

Sign in to view
Copy link

@yumibb98 yumibb98 commented May 10, 2020

Thank you so much !!!!!!
@kaisermaza

This comment has been minimized.

Sign in to view
Copy link

@kaisermaza kaisermaza commented May 30, 2020

Hi, is possible to set that on a smartphone it start with the correct camera: the back and not the front camera? Or must I use allways a select bottom to find the right camera? Tnx
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented May 31, 2020

@kaisermaza - from the API it's possible. Though I have to check how to make it general enough to work on PC as well. For example - if you request for front camera how should it behave when run from a PC / Mac.

I would suggest putting a feature request at: https://github.com/mebjas/html5-qrcode/issues
@DaSoulRed

This comment has been minimized.

Sign in to view
Copy link

@DaSoulRed DaSoulRed commented Jun 6, 2020

Hey people., any one can compile this one for me., please... it will be great... to have it im driving lost., arround here... im looking to read from html and then pop up a msg... sayin your product no original and your product is original...

Please if you can help... i can donate a few dollars... for the final html
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 7, 2020 •
edited

sayin your product no original and your product is original

Where is this coming?

@DaSoulRed - Please share more details, also I am working on making a much easy to use QR Code scanner, which is much easier to implement with the whole UI - would that be helpful to you?
@DaSoulRed

This comment has been minimized.

Sign in to view
Copy link

@DaSoulRed DaSoulRed commented Jun 7, 2020

@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 7, 2020

@DaSoulRed I think the library can do the task of scanning QR code and giving the decoded message.

I don't know how to decide whether the items is original or not, do you have a logic to determine that?

I don't have much money but I can donate a small amount to you.

This is alright, I don't mind writing code that helps other. If you end up using the library or liking it just share it to others that would do :)
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 7, 2020

Update

I have just implemented a full scanner on top of Html5Qrcode called Html5QrcodeScanner - it comes with default UI so you don't have to implement the user interface. You can use it like this:

[1] Create a container in HTML

<div id="qr-reader" style="width:500px"></div>

[2] Include the javascript

<script src="https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js"></script>

[3] Initialise the script

<script>
function onScanSuccess(qrCodeMessage) {
	// handle on success condition with the decoded message
}

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

This is what is done in the latest update to demo - https://blog.minhazav.dev/research/html5-qrcode

You can download the latest js from Github master branch or from here - https://github.com/mebjas/html5-qrcode/releases/tag/v1.1.0
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 7, 2020

Updated the gist code as well!
@DaSoulRed

This comment has been minimized.

Sign in to view
Copy link

@DaSoulRed DaSoulRed commented Jun 7, 2020

@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 8, 2020 •
edited

You can define what should happen when QR Code is found by changing onScanSuccess method

For example, assuming the code is url

function onScanSuccess(qrCodeMessage) {
	// check to make sure the message is a url - example: validURL(qrCodeMessage) below
       window.location.href = qrCodeMessage;
}

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

A method like this can check if a string is URL

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

reference: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url

So it sort of becomes

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

This comment has been minimized.

Sign in to view
Copy link

@CalvinFuss CalvinFuss commented Jun 17, 2020 •
edited

Hi Minhaz,

I hope you are well.
I managed to get your QR code reader working. The only thing is that it isn't displaying the result after a successful scan.

Please see my code below:
HTML

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
  <head>
    <title>Html-Qrcode Demo</title>
  <body>
    <div id="qr-reader" style="width:500px"></div>   
    <div id="qr-reader-results"></div>
  </body>
  <script src="script/html5-qrcode.min.js" type = 'text/javascript'></script>
  <script src="script/qrcode.js" type = 'text/javascript'></script>

  </head>
</html>

Javascript

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;
    function onScanSuccess(qrCodeMessage) {
        if (qrCodeMessage !== lastResult) {
            ++countResults;
            lastResult = qrCodeMessage;
            resultContainer += `<div>[${countResults}] - ${qrCodeMessage}</div>`;
        }
    }

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

Console output
image

Could you kindly advise if I have missed anything?

Thank you,
Calvin

SOLVED:
If anyone else if having trouble with the QR code content not showing the results on the page, please see the update I made below:
Original:
resultContainer += `<div>[${countResults}] - ${qrCodeMessage}</div>`;

Updated:
resultContainer.innerHTML += `<div>[${countResults}] - ${qrCodeMessage}</div>`;
@tiborpt

This comment has been minimized.

Sign in to view
Copy link

@tiborpt tiborpt commented Jun 25, 2020 •
edited

Hello!
Can somebody to tell why the QrCode scanner works on local machine but not works on server. It gives an error 'unable to query supported devices.'
Thanks.
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 27, 2020

@tiborpt - which browser and OS?
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 27, 2020

@CalvinFuss thanks for sharing, updated the demo code.
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jun 27, 2020 •
edited

Update: Added this example to mebjas/html5-qrcode/examples/html5

I am planning to add more examples on how to use the library with different frameworks, so far:
@tiborpt

This comment has been minimized.

Sign in to view
Copy link

@tiborpt tiborpt commented Jun 27, 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.
@matiazar

This comment has been minimized.

Sign in to view
Copy link

@matiazar matiazar commented Jun 30, 2020

Hi
How can i do to use it with out the render function... so i can made a different design?

thanks!
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jul 1, 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.

@tiborpt Is your application http only? Please note that you cannot have webcam access in http only sites - it only works with https. It should work on localhost though
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jul 1, 2020

@matiazar You can use the Html5Qrcode class for this. There is documentation an example at:

You can build any UI on top of this. I am sorry I don't have an example anymore on this - for more reference you could also look at implementation of Html5QrcodeScanner - it's basically built on top of Html5Qrcode - reference
@tiborpt

This comment has been minimized.

Sign in to view
Copy link

@tiborpt tiborpt commented Jul 1, 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.

@tiborpt Is your application http only? Please note that you cannot have webcam access in http only sites - it only works with https. It should work on localhost though

The problem was resolved. The application was only http. I tried on a https server and worked. Thank you for help!!!
@matiazar

This comment has been minimized.

Sign in to view
Copy link

@matiazar matiazar commented Jul 1, 2020

@mebjas thanks...
another question. there is any way to save the Camera Permissons on localstorage, cookie or some way.. to not ask every time I enter to the web?
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas mebjas commented Jul 2, 2020

@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* (depending on browser and what user allows, if they give always allow it should work). When you call Html5Qrcode#getCameras() it'd trigger the permission dialog or not based on whether you have permissions. So this can be used - although some research says asking permission on page load (for first time users) usually leads to rejections as this is a big permissions. So you can actually employ cookies or local storage for this.

If you wish for this in the Html5QrcodeScanner - please feel free to raise a feature request for this.
@BryarGH

This comment has been minimized.

Sign in to view
Copy link

@BryarGH BryarGH commented Jul 3, 2020

Hello @mebjas

Thank you for this useful tool so I had some questions if you could help me out I will be thankful.
1- How can I change the default type of starting, Like changing scan type from camera to file while loading the page.
2- I want the camera to stop directly after finding the result not getting more results after that so if MATCH just stop.
3- Is there away to read even while the QR having a logo inside?

Thank you again after searching a lot your tool helped me out a lot with my QR project.
@DaSoulRed

This comment has been minimized.

Sign in to view
Copy link

@DaSoulRed DaSoulRed commented Jul 3, 2020

Hello Mario or Julio @BryarGH

Could you be more spesific for yor question 1

(I want the camera to stop directly after finding the result not getting more results after that so if MATCH just stop.)
Give a try to "onScanSuccess" method., for that purpose...

3- Is there away to read even while the QR having a logo inside?
Qr personalized should work Okay...
@BryarGH

This comment has been minimized.

Sign in to view
Copy link

@BryarGH BryarGH commented Jul 3, 2020

Hello Mario or Julio @DaSoulRed

Thank you for your answer tho, yeah giving more explanations here:
The scanner having two type BY Camera Directly or Live and By File right? and it has a UI which is injected into the page, I want the default UI to be on scanning files not camera directly.

Thank you :D 😋
@DaSoulRed

This comment has been minimized.

Sign in to view
Copy link

@DaSoulRed DaSoulRed commented Jul 4, 2020

Mario & Julio., contesta en español, que onda que ocupas... exactamente...
@shikhargilhotra

This comment has been minimized.

Sign in to view
Copy link

@shikhargilhotra shikhargilhotra commented Jul 27, 2020

hi ,
I am trying to include this code int my acadamic project as a popup. I need to know that once you get the QR-number from qr-code, how to get out of that javascript code to the parent page ?
I mean to say that once i have my qr-number in qrCodeMessage (the variable defined in html), how can i Close (OR get rid) of scanning code of javascript running behind.
returning false; is not working for me.

When i do f12, i see continious reuest calls going in console window....i want to stop that since i have closed the popup now.
please reply.
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas 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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas 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

This comment has been minimized.

Sign in to view
Copy link

@secure-slikroad 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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas 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

This comment has been minimized.

Sign in to view
Copy link

@mwambajoshua mwambajoshua commented Sep 4, 2020

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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas 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

This comment has been minimized.

Sign in to view
Copy link

@sensationpanda 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

This comment has been minimized.

Sign in to view
Copy link

@BryarGH BryarGH commented Sep 11, 2020

@Haz-MatPLz

This comment has been minimized.

Sign in to view
Copy link

@Haz-MatPLz Haz-MatPLz commented Oct 8, 2020

how do i style this
@Haz-MatPLz

This comment has been minimized.

Sign in to view
Copy link

@Haz-MatPLz 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

This comment has been minimized.

Sign in to view
Copy link

@Haz-MatPLz Haz-MatPLz commented Oct 8, 2020

@mebjas plz read the above
@mebjas

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@mebjas 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

This comment has been minimized.

Sign in to view
Copy link

@charmjo 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

This comment has been minimized.

Sign in to view
Copy link

@virtualvoid virtualvoid commented Dec 14, 2020 •
edited

not working on iOS, permissions denied.

edit: the website needs to be on HTTPS
@hasalfernando

This comment has been minimized.

Sign in to view
Copy link

@hasalfernando 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

This comment has been minimized.

Sign in to view
Copy link

@virtuosodelared 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment