QR and barcode scanner using HTML and Javascript | Minhaz’s Blog #21

utterances-bot · 2021-06-15T14:14:16Z

QR and barcode scanner using HTML and Javascript | Minhaz’s Blog

The little QR code scanning library I have been maintaining since 2015 has been getting more attention recently. And with power came responsibilities, bugs, and feature requests. Some of the key features requested by developers were more reliable scanning and the ability to scan different types of bar codes. With version 2.0.0 onwards developers can scan different types of 1D codes (bar codes) and 2D codes (like QR codes or AZTEC). This article lists out everything new in version 2.x.x. I’ll also list out the new APIs and capabilities that developers can use to integrate a more powerful code scanning capability to their web pages or apps.

https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/

qwertz1958 · 2021-10-22T08:44:28Z

Hello,

is there a way to use the barcode scanner without ssl ?
I will test under windows with xampp.

Your sincerly

Stephan

mebjas · 2021-10-25T06:45:40Z

@qwertz1958

is there a way to use the barcode scanner without ssl ?

The browsers don't support showing camera feed without SSL. It should work with localhost though.

hungpham-cb · 2021-10-26T21:07:33Z

I tested this code and it only scan qr code, but not for barcode 39 and 128. Should I load barcode library or just this script is enough?

Bryan-snw · 2021-11-15T15:02:24Z

hello, i need helpp, i dont get any result back when it's scanned, also when im uploading image, but when i try in this demo website it's work fine, but not in my code/..

Blattinum · 2021-11-20T03:35:33Z

Sorry, I'm being stupid. I put the <script> tag at the bottom of my html page and put the <div> in within the page <body>. But I'm not sure where to put the Initialize script.

mebjas · 2021-11-21T05:49:55Z

@Bryan-snw is there a place we can review your code?
@Blattinum

But I'm not sure where to put the Initialize script.

Put this after the <script> i.e.

<div id="reader" width="600px"></div>
<!-- rest of your code -->

<!-- include the library -->
<script src="https://unpkg.com/html5-qrcode" type="text/javascript">
<script type="text/javascript">
/** Initialisation code comes here */
</script>

gdolenc · 2021-11-22T22:15:53Z

I am testing on iPhone, after scanning nothing happens? What should happen in demo? Should there be an alert about the info scanned or what?

KinjallDodhiaa · 2022-01-06T10:24:28Z

Question - Run npm run-script build to build JavaScript output. The output JavaScript distribution is built to /dist/html5-qrcode.min.js. If you are developing on Windows OS, run npm run-script build-windows.

I am trying to build. Since i am working on windows, i tried the following command npm run-script build-windows. Now I am getting the following error:
'scripts\build-windows.sh' is not recognized as an internal or external command,
operable program or batch file.

akinga128 · 2022-02-10T09:27:25Z

i tried scanning a UPC-A code but it does not read the barcode. i have tested QR codes and they work. any reason why the UPC-A wont work? the barcode was printed using a Zebra barcode printer.

lemoon2 · 2022-03-20T19:59:08Z

How can I change the zoom of camera in js?
Please help me!

manas-singh19 · 2022-03-29T06:55:16Z

Im using this module for my project. its working fine with every Bar-Code. which length is smaller than 12 characters only work fine. but when I use industry standard Bar-Code of 19 characters nothing will happen.

dancsdavid · 2022-04-01T09:34:49Z

Hello Minhaz!

Congrats! This plugin works well, easy install and usage and very fast, i love it! Take all my appreciation!

But i have a question :] :
my code detects that someone is using a mobile phone, in this case is it possible to set the plugin to use the back camera by default? (I can't really imagine a scenario where someone would use the front camera on a mobile phone to scan barcode :> )

BR,
David

dancsdavid · 2022-04-01T09:42:27Z

I am testing on iPhone, after scanning nothing happens? What should happen in demo? Should there be an alert about the info scanned or what?

see the console tab in developer tools or put this code to the souce:
`$(document).ready(function() {
let last = '';
function onScanSuccess(decodedText, decodedResult) {
if(last !== decodedText) {
last = decodedText;
alert(decodedText);
}
}

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

});`

jackfmaxwell · 2022-05-08T22:34:51Z

Using the demo embedded here on my iphone X its unable to read some of the barcodes on my laptop screen from the supported codes section including UPC_A and UPC_E. It does work with QR codes and some other barcodes on that page. Is that expected for the demo? Would it work for UPC_A UPC_E in a full implementation?

Thanks

jkwyeung · 2022-05-12T19:58:32Z

Same here - not able to scan UPCs on iOS or macOS. Seems to work on Chrome on Android.

jackfmaxwell · 2022-05-16T23:00:54Z

I implemented it in my webapp running it on safari iPhone X I find that it doesnt work with UPC_A (the label used for food and retail products in my country (canada). Tested on physical products with UPC_A label as well as online generated UPC_A label https://barcode.tec-it.com/en/UPCA?data=72527273070

A note aswell, the example UPC_A included in this page does not look the same as UPC_A 's i find on physical products and generated online

ranjeshprasad · 2022-06-03T14:02:25Z

I have implemented locally. But After giving camera permission. Not showing list of camera in select Camera. So please let me know how can i resolve this?

Hasan-Alomar-10 · 2022-06-07T11:48:24Z

hello master please when i scan barcode
the value not appear
please give the all code same the demo in this page please 🙏

shrawank039 · 2022-06-22T15:55:20Z

Hello,
Can i use barcode scanner device instead of camera using this library?
I'm building a website where I'll use my barcode reader device to read barcode to fetch data. So can i use the reader device with this?

Thanks.

Bennitut · 2022-07-17T09:49:01Z

Can I use the Barcode Scanner for commercial reasons? And is there a way to make the scanning processes in the whole camera view and not only the marked section?

firmadani · 2022-09-06T04:02:35Z

I thinks QR code and Barcode format is different, I'm succesfully implement QR code scanner in web based with ease, but still struggling make barcode scanning works.

As far as I know, QR code using 2D matrix data to easily read by the reader/camera while barcode using font to generate barcode, different in read handling. CMIIW

TestMyAcc945 · 2022-09-08T10:40:20Z

Some QR Code scan gives different-different results

REIMEDIA-TR · 2022-10-12T08:28:28Z

Hi,

i've problems with scanning colored qr. p.e. white qr on black ground.
Is there an option to generalize the color settings?

Kind regards,
Thomas

Anguian0 · 2022-10-21T01:41:40Z

If you want the result to come out as shown in the example, replace:

This:
html5QrcodeScanner.render(onScanSuccess);

For this:
html5QrcodeScanner.render(document.getElementById(onScanSuccess));

I hope it works for you.

karincaceres · 2022-10-23T22:52:30Z

Hi,
I tried to scan a PDF_417 from an Id card and the camera doesn't focus, like its too little, is there a way to zoom it?
Regards
Karin

juanski · 2022-11-01T13:44:37Z

Hi Minhaz, Great write-up thanks for making this available. Scanning a standard 13-digit barcode works as expected on Android devices but just can't get it to scan on iOS devices. The camera comes on, no issue there, but it just won't capture/read the barcode.

serkanunal34 · 2023-02-07T10:49:04Z

iPhone11 not working. not reading why?

DakkeOG · 2023-02-17T10:11:10Z

It works in the demo, but when I try to set it up in an HTML-file with a script section, it doesn't find camera options. The light of my camera goes on, though, after clicking 'ask camera permission' but the dropdown of camera's only has one option with an empty text and value (so ).

After calling Html5Qrcode.getCameras(), I get an empty id and empty label. How is it possible that it works in the demo, but not in my own html and .js file?

SanSoftInfoTech · 2023-03-25T08:52:42Z

this is working in the browser , but not showing up in the webview.. have anyone used this in the webview ???

niloyrudra · 2023-04-05T21:41:29Z

A good one. Great article Minhaz.

ashvejnov · 2023-05-19T12:31:46Z

Game changing solution, works perfectly. I'm stuck only with long C128 codes like this:

BJ0WX0E9500V1NAQ0186

try to code into Code-128 barcode - this barcode can't be recognized, however barcode scanning iOS/Android apps regognize it well((

AndreyMikhalevich · 2023-07-10T13:05:00Z

Hi, are there any plans to add DPM Data Matrix reading

avinash2dec · 2023-09-15T19:12:12Z

Hi, I am trying to scan Texas Driver's License, which is in PDF417 format but it is not scanning. Did any body successfully any PDF417 barcode?

Repository owner deleted a comment from Vikas-jk Jul 6, 2021

Repository owner deleted a comment from Anvilewis1 Nov 5, 2021

Repository owner deleted a comment from Anvilewis1 Feb 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QR and barcode scanner using HTML and Javascript | Minhaz’s Blog #21

QR and barcode scanner using HTML and Javascript | Minhaz’s Blog #21

utterances-bot commented Jun 15, 2021

qwertz1958 commented Oct 22, 2021

mebjas commented Oct 25, 2021

hungpham-cb commented Oct 26, 2021

Bryan-snw commented Nov 15, 2021

Blattinum commented Nov 20, 2021

mebjas commented Nov 21, 2021

gdolenc commented Nov 22, 2021

KinjallDodhiaa commented Jan 6, 2022

akinga128 commented Feb 10, 2022

lemoon2 commented Mar 20, 2022

manas-singh19 commented Mar 29, 2022

dancsdavid commented Apr 1, 2022

dancsdavid commented Apr 1, 2022

jackfmaxwell commented May 8, 2022

jkwyeung commented May 12, 2022

jackfmaxwell commented May 16, 2022

ranjeshprasad commented Jun 3, 2022

Hasan-Alomar-10 commented Jun 7, 2022

shrawank039 commented Jun 22, 2022

Bennitut commented Jul 17, 2022

firmadani commented Sep 6, 2022

TestMyAcc945 commented Sep 8, 2022

REIMEDIA-TR commented Oct 12, 2022

Anguian0 commented Oct 21, 2022

karincaceres commented Oct 23, 2022

juanski commented Nov 1, 2022

serkanunal34 commented Feb 7, 2023

DakkeOG commented Feb 17, 2023

SanSoftInfoTech commented Mar 25, 2023

niloyrudra commented Apr 5, 2023

ashvejnov commented May 19, 2023

AndreyMikhalevich commented Jul 10, 2023

avinash2dec commented Sep 15, 2023

QR and barcode scanner using HTML and Javascript | Minhaz’s Blog #21

QR and barcode scanner using HTML and Javascript | Minhaz’s Blog #21

Comments

utterances-bot commented Jun 15, 2021

QR and barcode scanner using HTML and Javascript | Minhaz’s Blog

qwertz1958 commented Oct 22, 2021

mebjas commented Oct 25, 2021

hungpham-cb commented Oct 26, 2021

Bryan-snw commented Nov 15, 2021

Blattinum commented Nov 20, 2021

mebjas commented Nov 21, 2021

gdolenc commented Nov 22, 2021

KinjallDodhiaa commented Jan 6, 2022

akinga128 commented Feb 10, 2022

lemoon2 commented Mar 20, 2022

manas-singh19 commented Mar 29, 2022

dancsdavid commented Apr 1, 2022

dancsdavid commented Apr 1, 2022

jackfmaxwell commented May 8, 2022

jkwyeung commented May 12, 2022

jackfmaxwell commented May 16, 2022

ranjeshprasad commented Jun 3, 2022

Hasan-Alomar-10 commented Jun 7, 2022

shrawank039 commented Jun 22, 2022

Bennitut commented Jul 17, 2022

firmadani commented Sep 6, 2022

TestMyAcc945 commented Sep 8, 2022

REIMEDIA-TR commented Oct 12, 2022

Anguian0 commented Oct 21, 2022

karincaceres commented Oct 23, 2022

juanski commented Nov 1, 2022

serkanunal34 commented Feb 7, 2023

DakkeOG commented Feb 17, 2023

SanSoftInfoTech commented Mar 25, 2023

niloyrudra commented Apr 5, 2023

ashvejnov commented May 19, 2023

AndreyMikhalevich commented Jul 10, 2023

avinash2dec commented Sep 15, 2023