Skip to content

Instantly share code, notes, and snippets.

@mebjas mebjas/html-file.html

Last active Aug 9, 2020
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(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.

Copy link

ThePlannerAffairs commented May 9, 2020

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.

Copy link
Owner Author

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.

Copy link

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.

Copy link
Owner Author

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.

Copy link

yumibb98 commented May 10, 2020

Thank you so much !!!!!!

@kaisermaza

This comment has been minimized.

Copy link

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.

Copy link
Owner Author

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.

Copy link

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.

Copy link
Owner Author

mebjas commented Jun 7, 2020

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.

Copy link

DaSoulRed commented Jun 7, 2020

@mebjas

This comment has been minimized.

Copy link
Owner Author

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.

Copy link
Owner Author

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.

Copy link
Owner Author

mebjas commented Jun 7, 2020

Updated the gist code as well!

@DaSoulRed

This comment has been minimized.

Copy link

DaSoulRed commented Jun 7, 2020

@mebjas

This comment has been minimized.

Copy link
Owner Author

mebjas commented Jun 8, 2020

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.

Copy link

CalvinFuss commented Jun 17, 2020

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.

Copy link

tiborpt commented Jun 25, 2020

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.

Copy link
Owner Author

mebjas commented Jun 27, 2020

@tiborpt - which browser and OS?

@mebjas

This comment has been minimized.

Copy link
Owner Author

mebjas commented Jun 27, 2020

@CalvinFuss thanks for sharing, updated the demo code.

@mebjas

This comment has been minimized.

Copy link
Owner Author

mebjas commented Jun 27, 2020

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.

Copy link

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.

Copy link

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.

Copy link
Owner Author

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.

Copy link
Owner Author

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.

Copy link

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.

Copy link

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.

Copy link
Owner Author

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

DaSoulRed commented Jul 4, 2020

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

@shikhargilhotra

This comment has been minimized.

Copy link

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.

Copy link
Owner 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

This comment has been minimized.

Copy link
Owner 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.