<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); | |
}); |
This comment has been minimized.
This comment has been minimized.
@ThePlannerAffairs |
This comment has been minimized.
This comment has been minimized.
Hi, Uncaught ReferenceError: Html5Qrcode is not defined Thank you so much! |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
Thank you so much !!!!!! |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
First of all Thanks for answering.
I greet you from León Guanajuato Mexico.
My country is a great place to have vacation. I can set a few vacations in
the Huasteca Potosina for you verte cool place.
I am looking for a code pack all ready compiled just to upload yo a
website this code Will read a QR from my mobile phone camera and then send
a message saying., Your product is original or not original It reads from a
papper print.
Maybe sends to other page new browser Window It Will be great.
I don't have much money but I can donate a small amount to you.
I appreciate your reading time I really do.
It would be great if you could help me.
Thanks and have a great day or night I don't know what city or country you
are in.
El dom., 7 de junio de 2020 2:21 a. m., minhaz <notifications@github.com>
escribió:
… ***@***.**** commented on this gist.
------------------------------
sayin your product no original and your product is original
Where is this coming?
@DaSoulRed <https://github.com/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?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/729c5397506a879ec704075c8a5284e8#gistcomment-3333115>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/APSYOSOO6VOAUCWYSPVAO7DRVM5ZPANCNFSM4M45NG3Q>
.
|
This comment has been minimized.
This comment has been minimized.
@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?
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 :) |
This comment has been minimized.
This comment has been minimized.
UpdateI have just implemented a full scanner on top of [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 |
This comment has been minimized.
This comment has been minimized.
Updated the gist code as well! |
This comment has been minimized.
This comment has been minimized.
Mate is great Thank you very much.
A question asks what it does when it scans the QR code.
If the code is configured to open another page where it will open.
El dom., 7 de junio de 2020 10:44 a. m., minhaz <notifications@github.com>
escribió:
… ***@***.**** commented on this gist.
------------------------------
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
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/729c5397506a879ec704075c8a5284e8#gistcomment-3333437>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/APSYOSI6YVBY3L4OOF2ZEC3RVOYW5ANCNFSM4M45NG3Q>
.
|
This comment has been minimized.
This comment has been minimized.
You can define what should happen when QR Code is found by changing 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 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;
}
} |
This comment has been minimized.
This comment has been minimized.
Hi Minhaz, I hope you are well. Please see my code below:
Javascript
Could you kindly advise if I have missed anything? Thank you, SOLVED: Updated: |
This comment has been minimized.
This comment has been minimized.
Hello! |
This comment has been minimized.
This comment has been minimized.
@tiborpt - which browser and OS? |
This comment has been minimized.
This comment has been minimized.
@CalvinFuss thanks for sharing, updated the demo code. |
This comment has been minimized.
This comment has been minimized.
Update: Added this example to mebjas/html5-qrcode/examples/html5I am planning to add more examples on how to use the library with different frameworks, so far:
|
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Hi thanks! |
This comment has been minimized.
This comment has been minimized.
@tiborpt Is your application |
This comment has been minimized.
This comment has been minimized.
@matiazar You can use the
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 |
This comment has been minimized.
This comment has been minimized.
The problem was resolved. The application was only http. I tried on a https server and worked. Thank you for help!!! |
This comment has been minimized.
This comment has been minimized.
@mebjas thanks... |
This comment has been minimized.
This comment has been minimized.
@matiazar If I recall correctly this can be achieved when you use the 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 If you wish for this in the |
This comment has been minimized.
This comment has been minimized.
Hello @mebjas Thank you for this useful tool so I had some questions if you could help me out I will be thankful. Thank you again after searching a lot your tool helped me out a lot with my QR project. |
This comment has been minimized.
This comment has been minimized.
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.) 3- Is there away to read even while the QR having a logo inside? |
This comment has been minimized.
This comment has been minimized.
Hello Mario or Julio @DaSoulRed Thank you for your answer tho, yeah giving more explanations here: Thank you :D |
This comment has been minimized.
This comment has been minimized.
Mario & Julio., contesta en español, que onda que ocupas... exactamente... |
This comment has been minimized.
This comment has been minimized.
hi , 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. |
This comment has been minimized.
This comment has been minimized.
Some answers
This is not supported at the moment, I recommend filing a feature request here.
This you can do using the 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.
|
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
Hello mebjas, i have try your code and tryin on android phone and iphone, thats working perfecly. Thats great. |
This comment has been minimized.
This comment has been minimized.
@secure-slikroad there has been a feature request around this - mebjas/html5-qrcode#65 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 |
This comment has been minimized.
This comment has been minimized.
How do I make the scanner to auto redirect the browser after decoding the qr? |
This comment has been minimized.
This comment has been minimized.
@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); |
This comment has been minimized.
This comment has been minimized.
Hi, same problem," unable to query supported devices" on AWS, How can you solve this? |
This comment has been minimized.
This comment has been minimized.
Make sure, you are on SSL mode.
…On Fri, Sep 11, 2020, 4:27 AM sensationpanda ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
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?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/729c5397506a879ec704075c8a5284e8#gistcomment-3449810>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQDVLKLDHFC77FILKIVIJ7DSFF4I3ANCNFSM4M45NG3Q>
.
|
This comment has been minimized.
This comment has been minimized.
how do i style this |
This comment has been minimized.
This comment has been minimized.
because I'm using it in one of my clients apps and was wondering how to make (no offence meant hear) not so ugly |
This comment has been minimized.
This comment has been minimized.
@mebjas plz read the above |
This comment has been minimized.
This comment has been minimized.
@Haz-MatPLz - |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
not working on iOS, permissions denied. edit: the website needs to be on HTTPS |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
Hi,
I copied from line 1 to line 201 into my site.
However it doesnt work.
Always state that document is undefined.
Any suggestion?