How to Build a PWA QR Code Scanner with Ionic for iOS & Android

[@harmmeijer6582]

Thank you for this video, I used it and was helpful. You forget to stop the stream when you have the qr code and the red dot stays in the browser tab.

[@galaxies_dev]

Thanks for the hint!

[@elilevi123]

thank you very much this is exactly what i was looking for !!!! you are the man !!!

[@galaxies_dev]

Glad I could help!

[@lestthatth]

Thanks a lot Simon, you are my sensei of ionic

[@JAMILDEJESUSENRIQUEZDECEANO]

Hi Simon, thank you for share with us. I have a issued, I copy this project following this videos. This project work ok on browser but in movil no is working. do you have any ideas?

[@JavierRodriguez-co2mv]

Hi Simon, nice information, it is very useful. But I have a big problem, hope me you can help me, I try this Scanner in a lot of phones (android) but it dosn´t work in Samsung s20+, would you please help me?

[@branforge]

Thank You So much for your Great Tutorial. I could Successfully implement this in my first App Trial.

[@galaxies_dev]

Happy to hear :)

[@mariembanney7037]

Thanks for sharing this with us . It's so helpful and easy to do . Can you share with us a video of how to Build a Bar Code Scanner with Ionic Please.

[@galaxies_dev]

I'm not 100% sure but most of the time QR scanners can also scan barcodes!

[@munamurad4266]

Hi, I use your code and it works, Thanks a lllllllooootttt Simon. :)

[@galaxies_dev]

You're welcome!

[@samuelkouassi8449]

great video, When I compile the application in my Android phone, the camera does not work, while on the computer everything works fine

[@raymondmok3017]

👍👍 Great Work 👍👍 Does the app / browser keep a history of what QR code I hv scanned or result of the scan? (i.e. in your video, the text "QR code video") 🙏🏼🙏🏼🙏🏼

[@galaxies_dev]

No don't think so, but you could store that information within localstorage or Ionic Storage!

[@franciscomarchan5438]

Thanks bro!

[@nicolascollovati1343]

Great video, the only problem is that when I build it, the app use the front camera instead of the back camera. Any suggestions??

[@galaxies_dev]

You should be able to change the "facingMode" when starting the stream to whatever you prefer!

[@pablomolina9452]

I have a problem with IPhone 13, after start the camera, the page is complete white, but if click on it, the video camera is shown. I an iPhone 11 is working well... any idea?

[@albertoinoogcorp230]

support pdf417? something similar that can read pdf417?

[@deryamhermosilla5612]

Thanks!! Operative in Angular 10 :)

[@galaxies_dev]

Great!

[@dusanjovanovski8605]

Its very lagging on my end. The camera is extremely slow! Using Safari on iOS iPhone 7

[@carlossalsoroji8348]

Hi! How can you read barcodes? thanks

[@galaxies_dev]

Well the scanner can read them and you get back the result like in the video?

[@jovillegas2983]

I have error (4:00 mark) at the line "@ViewChild("video", { static: false }) video: ElementRef;" part where the error says "Argument of static : boolean is not assignable to read: any" How do I solve this?

[@galaxies_dev]

You can add "read: ElementRef" inside the object where you also have static: false

[@jovillegas2983]

@@galaxies_dev Ok thank you so much. I have a question. My friend has already completed the entire page. The scanner works however after doing the first try and hitting the reset button, we tried again and it called an error saying "Maximum call stack size exceeded".

[@jovillegas2983]

also another error says "Cannot read property 'create' of null". how to fix?

[@tajourimedamine631]

Thank you Simon your tutos are very helpful and im using it to build my project. Can your shar with us a tuto of profile management with ionic ?

[@anroswell]

Simon you can do a tutorial working with zxing/library, please...

[@galaxies_dev]

Thanks for the idea - will check it out!

[@sviluppoprogettoautomazion2746]

Hi Simon, currently this does not work with various EAN code, can you suggest an alternative or make a video about it?

[@razerrage1898]

Hi after testing the code i am unable to stop scan

[@kudzanaigomera9778]

Hi Simon I'm getting the following error in the component.html Property 'files' does not exist on type 'EventTarget'. coming from the line below, I'm using angular 12 & ionic 5

[@kudzanaigomera9778]

l found a solution in .html in .ts handleFile(event: Event) { const target= event.target as HTMLInputElement; const file: File = (target.files as FileList)[0]; // const file = files.item(0); ........ }

[@mavillavishnu]

Awesomeeeeeee tut. Great explanation. Doesn’t seem to scan barcodes. Just tested with the live demo from library. Any suggestions for scanning barcodes as well?

[@galaxies_dev]

Is it a very specific code? usually should work just fine with a lot of code types!

[@gothicusdarkwoods]

Hello Simon! Upon trying this out, I came across an error saying "Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type '(MediaSourceHandle or MediaStream)'." My webcam lights up when using chrome though but it doesn't show any feed. What can I do around this?

[@gothicusdarkwoods]

I actually made it work by using the .then() instead of async. But now it doesn't work on mobile browsers

[@gothicusdarkwoods]

so it doesn't work because of ssl. it needs secure connection and serving it externally isn't secure.

[@19TheBluesMan85]

Thank you so much! N1!!

[@galaxies_dev]

You're welcome!

[@thirthankarpal6091]

6484 ERROR TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': Failed to convert value to 'MediaStream' getting this error

[@rolandjethrosuyom478]

can ionic Qr scanner read barcode?

[@hadilintar6398]

hi, i just wondering how can i turn on torchlight function while scanning for qr code?

[@galaxies_dev]

You could probably manually turn it on with a package like this before scanning: github.com/riderx/capacitor-flash

[@kront24]

Hello Grimm, thank you very much for your tutorial, well explained and it worked perfectly for me, one question, what are the steps to follow to test this application and my personal applications on android and ios devices, do you have any tutorial in your library? Thank you in advance friend.

[@gausmohammadshaikh3787]

you are great sir.

[@hovav906]

That was a great tutorial!! question - how do i scan regular barcode (not QR)?

[@galaxies_dev]

Perhaps you could use something like this instead: github.com/zxing-js/library

[@hovav906]

@@galaxies_dev I will try. Thank you very much!

[@hovav906]

@@galaxies_dev Hi, this package doesnt work (and it is depracted...). can you make a video about 1D barcode web scanner? or just the code that you used.... thanks!

[@zefred999]

Thanks

[@ricardomachado4018]

This work with data array??

[@vinaybakle6443]

How can we do this for flutter web?

[@harendraranasinghe898]

Hi, I want to use a barcode reader. Can I use this way?

[@galaxies_dev]

Yeah most QR readers should also support barcodes!

[@psetier1]

do you have any sample for ionic + capacitor + vue.jst ?

[@galaxies_dev]

No sorry, haven#t worked with Vue yet

[@vinodchavan9352]

Thank you for such a great video. Can we scan the barcode with this?

[@galaxies_dev]

Yes you can!

[@vinodchavan9352]

@@galaxies_dev I am unable to scan the barcode it's working for only QR code .

[@alfredoalmarales8228]

Hello the qr scanner does not work in android, someone knows the solution please

[@bohe03]

Hi Simon! i have 2 questions 1- Can i use this scanner with php to? 2- the scanner dosen't work when i try with my iphone x, do you have some solution this????

[@galaxies_dev]

I don't know about PHP :D iOS has still limitations inside a PWA so I guess it might not work 100% in there :(

[@bohe03]

@@galaxies_dev thank you for answer to fast :) i understand tha IOS has limitations but you have shared a link that work perfectly in iOS devdacticimages.firebaseapp.com/home so i will be very grateful if you can explain what is that i need to fix it :) Please i need to fix this project before next week :(

[@TeamDeliciousLP]

Thanks for the video, but i think there is a minor issue. If i install the app on a phone (android 7) and start the scanning, then go to the native camera app and then switch back to the deployed app the camera gets stuck. Even pressing startscan again does not help it gets stuck at the loading screen. Problem seems to be that the videoElement does not get to the HAVE_ENOUGH_DATA state. Any ideas?

[@galaxies_dev]

I'm already working on a new more robust Barcode scanning tutorial!

[@TeamDeliciousLP]

@@galaxies_dev Nice, can you give a approximation as to when this will be available?

[@nicolaslinares1879]

Hi Simon! thank you very much for the video, , very interesting! but i have a problem, the scan mode doesn't work in android and ios, i have followed all the steps and i have realized that don't ask me for the camera permissions. Can you (or anybody) help me?

[@nicolaslinares1879]

I found a solution! its because the app run over HTTP connection, but i tried with the command "ionic serve --external --ssl" to run in HTTPS, and everything works!

[@bohe03]

@@nicolaslinares1879 hi Nicolas i have the same problem and i tried with your solution *ionic server --external --ssl* but the camera dosen't work. is something more that i need to do? i will be very very grateful if you help me, i realy need a solution för this project kind regards :)

[@JuanManuelRomeroMartin]

@@bohe03, did you find the solution? I tried also to run the server with the --external and --ssl flags, but nothing. :-(

[@brunoreis8712]

hi Simon Grimm, i pass the last 5 days searching for a tutorial that i cant find even in your youtube channel, NADA!!! what Im looking is a personalized search input form not a search bar, in which return the item Im searching... PLEASE HELP?

[@galaxies_dev]

Perhaps you need the searchable select component?

[@brunoreis8712]

@@galaxies_dev first of all thanks a lot for responding, second It is not this component that I am looking for, sorry for my english im a portuguese and im using google translator, example: you have a list with objects and you have a click event on each item, to see a more detailed page. so my search page should have a text input field, below you have a button with name search, when the user fill the text field and hit that button it should search on that previous list item and give me only the detailed page, but if the text is noy equal with any item on that list it should say "cant find this item"... thats the idea im looking for

[@ЮрийКустов-ф4у]

Thanks for the video. It`s cool a way for my app. unfortunately qrScunner from the ionic native doesn`t work in capacitor v2-3 for android devices. I hope devs in future create qrScunner for scanning more one item for one time. Probably if you know how it`s possible for capacitor 3 you can make a video for it))) i will wait) or link to the instruction))

[@herickraposo1342]

error cannot find imageData

[@PardeepKumar-hm8hn]

will it work in android app if yes then how

[@galaxies_dev]

Yes it should work nicely within Android and PWA, just like described in the video :)

[@indrajatav2847]

Love you Simon 😀

[@Smartmetricai]

That's great ..

[@danielcollazos1076]

Ionic allows you to place a fingerprint scanner on the screen of the mobile device?

[@Fohlken]

I need help with Capacitor making getUserMedia work on Android, I've been trying for weeks. I understand that you need to serve in https for it to work, so I use: ionic capacitor run android --external --l --ssl But then my plugins dont work there since I'm serving in browser I presume. I dont know what I must do to dev and prod this on Android. Can someone help me on this one?

[@galaxies_dev]

You could simply build an APK, deploy it to your device and then remote debug it through Chrome!

[@keinermolina6837]

@@galaxies_dev Could you explain me in a more detailed way, please, I have had the same problem.

[@canhhung.nguyen]

Thank you for your video Could you give me your source code? Thank you so much!

[@galaxies_dev]

The written version is linked below the video!

[@bohe03]

is it some one that have fix the camera problem in iPhone?????

[@galaxies_dev]

It's not a problem, it's simply not possible due to Apples guidelines!

[@tiakocedric9580]

this solution don't give for ios I do how?

[@galaxies_dev]

I think since recent iOS versions this should work as well!

[@joserodriguezgarcia513]

The big problem with this code is that in the IOS browser you always have to accept camera permissions. On Android or pc browsers, just accepting the camera permissions once is enough. Does anyone have an alternative or solution?

[@nenadlazovic1178]

same problem. iOS always to accept camera permission. any luck with solving it ?

[@joserodriguezgarcia513]

@@nenadlazovic1178 No :(

[@nenadlazovic1178]

@@joserodriguezgarcia513 me neither. Spent few days. No luck.

[@zefred999]

my mac and android camera will stay on unless I refresh.

[@zefred999]

I used this solution from stack overflow: stackoverflow.com/questions/11642926/stop-close-webcam-which-is-opened-by-navigator-getusermedia

[@rolandjethrosuyom478]

good tutorial, but this project can't scan barcode

[@galaxies_dev]

If it's not working try this one instead: kzbin.info/www/bejne/bni7l516iqiMoLc

[@rolandjethrosuyom478]

@@galaxies_dev thank you very much. I hope all of the mentors are just like you, because others don't reply to a comment or questions. salute to you sir.

[@eduardocarvalho2157]

8:10

[@alexanderroland9078]

Simon Grimm

[@tanthu6814]

Omg.

[@galaxies_dev]

Good or bad?

[@dwighsonPavion]

the challenge starts when you're attempting to use capacitor :/

[@galaxies_dev]

But why?

[@faghottini4366]

​@@galaxies_dev Cause if u want to implement an authentication-flow through an (configurable) inappbrowser, u have to use a cordova-plugin, if u have cors requests (because of an authenitication service), u have to use a cordova-plugin and last but not least if u want to have a qr code scanner working on iOS u have to use, u guessed it right, a cordova-plugin. There is still missing to much functionality on capacitor.. :(