QR Code Reader / Scanner with JavaScript (Html5-QRCode.js)

👉 Source code: openjavascript...
‍🎓 NEW: Earn a professional certificate in web development from Meta Inc. (course links in card below) 👇
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to read / scan QR codes in JavaScript using the Html5-QRCode library.
#qrcode #reader #scanner #javascript #tutorial #javascript_tutorial #webdevelopment #nodejs
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡Web development professional certificates from Meta Inc.⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript

[@OpenJavaScript]

Thanks for watching! 👉 Source code with live working example: openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/ 👉 How to implement in React: kzbin.info/www/bejne/nJauqGh4htJ-f9U

[@gircsi117]

Hello, this module is very useful, but it doesn't allow activating the camera over HTTP, and our website doesn't have HTTPS. Could you help with this?

[@adexitum]

You are my saver. Only god knows how much time I spend trying to do this. Just made it in few minutes with you eventhough I used Angular

[@mallikarjuntr3515]

Works man, two minutes job, that too with these modern frameworks and libraries ,it is made easy ,i would recommend everyone to try this.

[@arthursallier4045]

works, just copy the code example from the website if you want to be faster

[@TeacherKaris]

Works! Thank you for the effort you put in sharing this knowledge and skill. Be blessed!

[@sofiatachmatzidou175]

This is exactly what I needed. Thank you!!

[@OpenJavaScript]

Glad to hear it - and you're weclome!

[@yousifky]

Mannnn you are awesome thank you so much for this video you are the best bro

[@Kleiner9Partizane]

This works perfectly! Thanks a lot !!!

[@HiddenAway-j6s]

this will be really helpful thank youuu

[@rashmikadeshan2710]

Thank you so much for sharing code.

[@jerbparagas3924]

The scanner was great. Although it lack some styling customization

[@jumpsiyx7106]

omg dude, i fkn love you some much thank you for your help

[@Cincinnatistorm]

Great video 👍, I was looking for information about this type of tools and also RFID and NFC would be great for my project in the future now is just on paper because there are no many Devs interested in so many complexity of combined technologies

[@tagyenblaisetechwi2069]

Thanks , you are the best

[@OpenJavaScript]

Thanks, not the best I think, but appreciate the comment and glad you liked the video!

[@chillywilly314]

This is exactly what I was looking for! Sucks that the barcode scanner API doesn't support iOS.

[@AcePortgaz-s1o]

great video

[@skygrace4300]

Thanks for this useful tut'.

[@dewdrops5497]

how i can add input text to print qr code scan result as user id and a button for login

[@piuniverse9306]

Thank you you're a life saver, now may you please point me in the direction where I can learn how to customize the UI 🙏 🙏

[@piuniverse9306]

Oops I digress it ain't working 😢😢😢

[@Lymphater]

Nice. But I'd like to start scanning by click on my button. Without UI by library. Any idea?

[@tolgaaymaz2017]

so good :) thanks for share video

[@OpenJavaScript]

Welcome :)

[@lasithadulshan7357]

Thank you !

[@iamfyrus]

Live sample works but how to rescan another QR? Theres no scan button after the first scan

[@Arief_programmer]

Successfully to get the result. but after that, camera still in use on the background. How to turn it off after get the result?

[@pesgameryt1]

And pls what is inside the qr scanner folder

[@pesgameryt1]

Sorry please I want to ask how did he get the qr scanner folder?

[@rutchanontv4815]

I've tried running the code on my machine. And it turns out that the camera works for a few seconds and then disappears. and up but the word that the camera is working please help me

[@OpenJavaScript]

Have you tried running the source code?' There's the code to copy and a live working example here: openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/ If that's still not working for you, let me know and I'll do my best to reply.

[@rutchanontv4815]

@@OpenJavaScript I have installed the source code runner and followed in the video. To test run the program on the test web that you have attached can be used. But when I run the program on my computer The camera works for a few seconds and then turns off. But in terms of importing images from the machine to read, it can be used. I use Visual Studio to run the program. please help me

[@OpenJavaScript]

​@@rutchanontv4815 If the live example in the blog post is working then that would rule out a hardware or browser-specific issue. A possibility is that it works in a HTTPS environment (like in the blog) but not locally via a HTTP server. You could try setting up VS Code LiveServer to run HTTPS as a test server.

[@rutchanontv4815]

@@OpenJavaScript Now I have uploaded the code to the server, it appears that it works normally, thank you.

[@OpenJavaScript]

@@rutchanontv4815 Great!

[@invtrk1046]

When using this on Samsung smartphones, it defaults to using the wide-screen camera which results in bad performance scanning QR codes. Is there a way to fix this? Change the default camera to normal lense?

[@drenyl6491]

Would this work using a real scanner? Like a honeywell xenon for scanning qr codes. Not using a phone camera

[@OpenJavaScript]

This library does also read QR codes from file so if you are getting the data from your scanner as a QR code in image format, you could feed it in that way. But often a QR code scanner will decode the QR code for you already and send you the data in text format. For this use case, I'd consider working in Node.js rather than in browser as it would be useful to run a server with access to the file system. If you do go down the Node.js route, you should check out the node-hid library because it's designed to allow you to connect to/get data from these kind of devices.

[@colbr6733]

@@OpenJavaScript Really appreciate you taking the time to respond to this, very useful answer.

[@OpenJavaScript]

@@colbr6733 You're welcome, good luck with the project!

[@onlyInMirzapur]

Thankyou for the help but when the result pops up I want it to directly go to the website rather than showing the link of result? Is it possible??

[@OpenJavaScript]

Yes, for this you can call 'window.location.href = result' inside the success function.

[@onlyInMirzapur]

@@OpenJavaScript thankyou for your help your work is amazing!

[@OpenJavaScript]

@@onlyInMirzapur You're welcome!

[@diegomiranda5781]

Good afternoon! I'm trying to generate the data from the bill that was scanned, such as amount, expiration date, etc. For the user to make the payment. Can you tell me how to get this data using the number generated in the scanner?

[@aodhan2011]

Possible to create a react tutorial using it?

[@OpenJavaScript]

Hi Andy, thanks for this suggestion, this tutorial has been pretty popular so I'll try to get around to making a React-specific version soon. UPDATE: Here's how you can implement it in React: kzbin.info/www/bejne/nJauqGh4htJ-f9U

[@valofeeofficial9343]

Thanks

[@rahulmule1272]

Your awesome 🎉🎉

[@OpenJavaScript]

Thanks! ❤

[@junjungaming855]

can I use it with Laravel?

[@PROTECHRAHUL]

Why there is a watermark, powered by scanapp

[@portfedh]

Would this work on a mobile phone?

[@jayvinf2p782]

I tried to run this in my vs code but its not working the camera idk why but it can work tho in online compiler lol

[@andreykachur3827]

good library, but it's a pity that you can't change styles and manage them more flexibly

[@OpenJavaScript]

Certainly a nice advantage (and quite rare) that the library implements its own UI. Easy if you haven't done QR code reading before but that does raise issues of customization. If you haven't already, you might want to check out Html5-QRCode on GitHub: they have a pro mode implementation that is quite different from this tutorial. They suggest this alternative if you want to build your own UI.

[@andreykachur3827]

@@OpenJavaScript Thanks, I'll read the description of this library in more detail and try to come up with something!

[@HEiiZENBERG]

Tried running on android web page, it is asking for me to choose a camera but unable to access it. How do I fix this? @OpenJavaScript

[@ramussdev]

Does it works in an android device? I mean, I wanna make an app for android but web, like this, so I was thinking if it really works for android.

[@metechantalya]

First of all thank you for your video. I found this source code and this is the first time I have understood how to do that. Thank you for that. But I have a question (need some help) I have an inventory management system. And I want to add products with qr codes. So I have decided to add a button for a pop up window (or can something else applied if you have an advice) to get the code from qr code and add it as a code to product. So later I can scan qr code and get the code and product with it. Any chance to help me with that?

[@OpenJavaScript]

It seems to me you have the first step down with this tutorial. For the sending of information on read QR codes, you'll want to send that using Fetch or similar and store that it in whatever storage/database solution you opt for (JSON data, SQL or maybe MongoDB). Then, it's just a case of retrieving that information by its storage ID from the database. For interactions with the database, you'll want to be doing that on the backend. You can use Node.js for that if you want to use JavaScript.

[@amrithanshu3478]

Can we usei t in angular /typescript Code in typescript

[@chan3ce450]

How can i set my barcode reader to scan only a few numbers? Example: -123456788 -and i wamt it to read only 23456?

[@OpenJavaScript]

I don't think it's possible to selectively scan some numbers but what you can do is to create a new value from the value you have scanned. For example, you could get the desired result in the example you gave using the substring method: function success(result) { const result = "123456788"; const resultSub = result.substring(1, 6); console.log(resultSub); // 23456 }

[@chan3ce450]

@@OpenJavaScript Thank you for your answer sir :D

[@OpenJavaScript]

@@chan3ce450 you're welcome 😊

[@user-ub7ku7gi9e]

There's an error of uncaught cameraIdOrConfig

[@NABILAHBINTISALLEHSTUDENT]

May I know how you create the folder (qr-scanner) at the beginning video which is at 1.54 minutes

[@jerrymarchermoso8168]

can the default UI be changed to just a button to trigger the camera? specifically the back camera

[@OpenJavaScript]

Yes, it's possible. It's more syntax than using the default UI but you can do it. For this, check out the documentation: github.com/mebjas/html5-qrcode

[@jerrymarchermoso8168]

@@OpenJavaScript i tried it but it only works on android devices. Iphones always on front cam even if the cameras[1] name says back camera

[@jerrymarchermoso8168]

I've done it. lol its in the docs already hehe thank you!

[@testaccount-fx7sq]

I added the source code to my project of Angular Dart, and in the html view i can see the UI of the scanner, but when i load the project i cannot see the scanner UI . can you please suggest me something?

[@OpenJavaScript]

My guess would be you have some content that dynamically overwriting the scanner UI. If so, probably you need to integrate it into whatever component is overwriting it.

[@piuniverse9306]

its throwing a cameraIDOrConfig is required

[@-RohanFukat]

Hi brother, I have got cameraIdOrConfig error, I don't know what's exactly the problem

[@OpenJavaScript]

There's a live working example here: openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/ If it works for you, try copying the source code.

[@-RohanFukat]

Thanks brother the error is solved. I am trying to run this code in . ejs file as but i am getting error that Refuse to execute html5-qrcode.min.js file because its MIME type is (text/html) is not executable, and strict mime type checking is enabled. Please tell me I got stuck on this error from 3-4 days.

[@OpenJavaScript]

@@-RohanFukat OK, glad to hear you found a solution!

[@premkumars1281]

QR code parse error, error = D: No MultiFormat Readers were able to detect the code. How to resolve this?

[@OpenJavaScript]

I'm not sure but you could try removing the CSS setting height and width for the video. Sometimes this can cause some interference.

[@Tanmaygaming0406]

@@OpenJavaScript Not sure, it didn't resolved too.

[@thanakornnithipatarpa8790]

I found this error too

[@darimoprom2580]

Jesus Man you save my life

[@garimasingh3073]

throw "cameraIdOrConfig is required"; yeh error aa rha js mai

[@OpenJavaScript]

This error can occur when you try to run the QR reader from the file system (not on a server). See if the live example in the blog post works for you: openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/ If so, this is likely the issue. To fix when testing, try running it on a server you are running locally (if you are using VS Code, the Live Server extension will do this for you).

[@masyas860]

can this work for android camera? it shows NotAllowedError: Permission Denied even if it didn't ask for permissions

[@OpenJavaScript]

This is usually due to general browser settings blocking access to the camera or blocking access for a specific domain. Then it won't ask and immediately reject permission. I did just test a live example in Android (openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/) and confirm that it is at least working here. When I blocked the domain I got the same error you did. Hope this helps to solve your problem.

[@ibrahimelalami6524]

Working for code barre ??

[@OpenJavaScript]

Yes, it can also read a bar code if you feed one into it.

[@Rabatata_Extreme]

Im actually getting an error... "Qr code parse error, error = D: No MultiFormat Readers were able to detect the code.

[@Rabatata_Extreme]

I mean it works... But i get a lot off spam in console while i dont read. Is that supposed to happen?

[@OpenJavaScript]

@@Rabatata_Extreme Yes, that's actually normal. The error function is fired every time it can't read the QR code (quite a lot!). From the official documentation: function onScanFailure(error) { // handle scan failure, usually better to ignore and keep scanning. // for example: console.warn(`Code scan error = ${error}`); }

[@fredwanderley]

Tks !!

[@OpenJavaScript]

Welcome!

[@shrikanttiwari1297]

not working at all , not allowederror:permission denied

[@pablomansilla2497]

I tried to replicate the qr scanner, but mine's not working ;-;

[@pablomansilla2497]

im using html only btw

[@OpenJavaScript]

​@@pablomansilla2497 No JavaScript? Because you'll need to use at least some to get this library working. If you haven't already, you may want to copy the live working example I posted on the blog post for this video here: openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/

[@pablomansilla2497]

@@OpenJavaScript obviously I'm using js xD, but even copying and pasting the code doesn't work for me ;-;. I also tried different versions of the library but still nothing

[@OpenJavaScript]

@@pablomansilla2497 Does the live example on the blog work? Are you getting an error?

[@bascbrims]

source code please

[@OpenJavaScript]

Now here with live working example: openjavascript.info/2022/12/10/qr-code-scanner-with-html5-qrcode-js/

[@spreadItWide]

The only thing that doesn't work in your app is the corona test 😂😂

[@Arush-qz4dn]

Not working 🥲