How to Read and Create QR Codes with Ionic 4
HTML-код
- Опубликовано: 8 сен 2024
- In this tutorial we will build a QR Scanner with Ionic 4 and also create a QR code based on some input. Finally we will download and save the QR Image to our photo library!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
🎉 Get my Practical Ionic Book: devdactic.com/...
#############################
👨💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.c...
😱 NEW: Capacitor Crash Course!
ionicacademy.c...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.c...
🤷♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
#############################
Excelente, me funcionó para Ionic 5 con capacitor!
Man me puedes pasar el codigo??
May God bless you sir! We do appreciate your time, help and generosity!
You are welcome :)
Thanks for this tutorial. It is very helpful
As information for everyone interested: 'IMG' and 'URL' are the exact same, they share the identical case internally. :)
Thanks for the addition!
You can re-add the Cordova integration with the following command: ionic integrations enable cordova --add
Great attitude and content!
You always saves the day!
I try my best :)
Fantastic! I'm following your videos and just subscribed to your channel as well. Tell you what, you don't just write code in Ionic; you "think" in Ionic. Ionic is your native language!
Haha thanks Ruturaaj!
hi Simon,
I want to create RFID tag scanning application, which plugin can i use, kindly guide me.
the scan feature is not working for me..and I am using phonegap barcode-scanner plugin... couldn't get the camera view when clicked on 'scan'
Hi! Simon, is Top. *Brazil*
not getting the base 64 file..any suggetion???
thank you SO MUCH for this video, it really saved my life. One question tho, when I try using base64toGallery inside a forEach, where each element is a base64 string, although it console logs n-each times correctly ("saved"), only 1 or 2 elements are really saved to gallery. Any thoughts about this behaviour? Thanks!
answering to my own question, because I figured it out later: saving to gallery is a process that requires permission from your phone. Once you have it, you can save, but if you're attempting to save more than 1 base64 string at once, you need to do it slowly or you phone won't allow it. That being said, you may use a setTimeOut for example and it will work fine! :)
Hello from Brazil! Thanks for the tutorial.
Qrcode image was not being saved to my phone
The fix came by installing ionic native "android-permissions" and following the instructions on stackoverflow
"ionic3-base64-to-gallery-plugin-crashes-the-app"
** don't forget to add AndroidPermissions to providers
Thanks for the tutorial very helpful, only thing in Ionic 5 trying to import barcodescanner into the providers are throws the following error: Invalid provider for the NgModule ‘AppModule’ - only instances of Provider and Type are allowed. Any idea what this issue is?
Great video. But I have a question. How can I change the scanner UI for android. I found answers for ios but android.
I encoded an object in qrcode using stringify. While I am reading the value of qrcode null object is returned. Could you please provide the method of reading object from qr code.
Hi,
I am working on solution which need scanning solution to do:
1) decode QR Code/Barcode from image
2) Camera zoom to scan barcode/ QR code from long distance (like Paytm scanner)
any suggestions?
Great video, could you please share with us why you prefer using cordova over capacitor?
There are not too many capacitor plugins, but of course we could use Cordova through Capacitor but right now I find it easier to use the Cordova plugins like always. But that might very well change in the future!
Can you please make tutorial on how to use hardware back button in ionic 4, Thanks
I'll try to!
Thank you
Hi sir, great video. I am prioritizing to generate QR of different categories, like phone number, contact information, etc., which are not in the elementType of url, text or canvas. So, how should i proceed in this case.
Hi ... did you find solution for this? I think all other are simply Text, formatted in a specific manner to give it a meaning it has, like Phone Number or Contact Information. Please let me know if I'm correct here.
toDataURL is showing error please help
every time i run ionic serve i get
Refused to load the image 'localhost:8100/favicon.ico'
because it violates the following Content Security Policy directive: "default-src 'none'".
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
how to fix
I trust on this guy... But those dependencys broke my hole proyect... And if I try to build a new one, installing those dependencies, broke the proyect again...Cant follow the proyect
grat video, just one question if i'am doing this into a PWA application would be work on it? or what can i do? please i really apreciate your time, go far with full success my friend
Yes that should work if you don't use any Cordova plugins!
Visual Code also gives me following error for the link home page html when I try to set elementType for ngx-qrcode:
Can't bind to 'qrc-element-type' since it isn't a known property of 'ngx-qrcode'.
1. If 'ngx-qrcode' is an Angular component and it has 'qrc-element-type' input, then verify that it is part of this module.
2. If 'ngx-qrcode' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
Please help me with this...
How do I print something in ionic using a button and without a print dialog?
can ionic Qr scanner read barcode?
do you have sample code , using ionic + capacitor + vue.js ?
Thanks for tutorial, can you tell me plz how do you get focus image (green rectangle) on the camera screen?
That was automatically from the package/camera!
Hey Simon, is there a way to retain the camera view screen and have further functionality running over that screen. eg: I call a popup action sheet and I want it over the camerview screen right after the code is scanned. Thanks in advance. You are a great motivation to the community and keep up the great work.
I think the screen is automatically closed after a scan, so perhaps you might need a different package then :/
@@galaxies_dev Thanks for the reply. I will develop a workaround then :)
how can import qr from mobile gallary and read data
Great video! Just one question: is there anyway to hide the text displayed at the footer when it reads the QR code? It's something like 'Found text plain' and next to it the value it found.
I think you can pass some values to the scanner like described here: github.com/phonegap/phonegap-plugin-barcodescanner#using-the-plugin
I guess the "prompt" key is what you are looking for!
@@galaxies_dev Thanks for your answer! I believe the promp text changes the instruction message at the footer. I got to hide the scanned text by setting resultDisplayDuration to 0 in the barcode scanner options as it follows:
export class YourPage implements OnInit {
constructor(
private barcodeScanner: BarcodeScanner,
){}
scanQR(){
this.barcodeOptions={
prompt: 'Realiza un scan en el código QR del conductor',
resultDisplayDuration: 0,
}
this.barcodeScanner.scan(this.barcodeOptions).then(
// your code
)
}
}
I get the error:
Can't bind to '[qrc-value] && [qrc-element-type]' since it isn't a known property of 'ngx-qrcode'.
at 6:08.
Followed all previous steps with no issues.
tambien a mi, si lo pudiste resolver?
Hi Simon, at the time of saving QR I have the error 'error while saving image'.
ionic 4 and angular 8.3.22, thanks in advance
That's hard to say, but there must be a reason why you can't save it!
Hi Simon, I have issues using this plugin to scan densely populated PDF417 barcodes. Is there an alternative Ionic plugin to scan PDF417. I have tried the BlinkId plugin without luck. :(
There is also a Cordova plugin if you are building an app. If you want to rely on the web, I'm not really sure what package would be better but of course there might be more pure JS libs on this topic :/
Nice Mr. Simon, and i wanna ask how to upload QR n scan that qr from upload file? thx before...
Perhaps you could use a different QR scan library that directly accepts a file/image input!
@@galaxies_dev do you have a recomendation a library? thx before...
Good channel 😁
Can you plz make video how we can install libvlc with ionic ?
Tks
Sorry haven't used that before, not sure about it :/
Can you do a video of receipts scanning and extract the data using Firebase ocr api
Interesting Ethan, I'll add this to my list!
If i have to identify product by scanning barcode or qrcode what i have to do !!! Any suggestions???
Thanx...
Well when you use the plugin you should receive the barcode/qr data, and with that data you need to identify it using whatever backend you have!
Can I get the source code
great video but ngx-qrcode2 is deprecated =(.
I'll see if I can do something with a more up to date QR library!
Hi simon, can you suggest me a similar library to scan barcodes?
You can use the standard barcode library like this: ionicframework.com/docs/native/barcode-scanner
after scanning Result from scan:: {{scannedCode}} is [object object] , can you help why is it coming so ?
I'm not sure, just log it and inspect the object that you get back from the scanner, perhaps it's just a typings issue!
Hello simon,
can you please make video on how to enable background service even app killed by user like whats app ?
What would you like to do in the background?
@@galaxies_dev thanks for reply simon sir,
Actually i want to show pop up screen like whats app when any message come even our app is killed or play any sound when any request come from server
Till now im using push notifications but its not fullfil the client requirement
Can you please help me how to do that
Thanks in advance
Can I Use It with Ionic Vuejs
I think this was a specific Angular package, but there's a Vue package out there very likely as well!
Hi, thanks for the tuto.
> Anyone knows if there a way to do the same in a PWA (no cordova plugin...)?
Yeah no Cordova plugin there, I think there is currently no Capacitor plugin available for this yet, see here: capacitor.ionicframework.com/docs/community/plugins
Suppose I wanted to save this scanned Code variable to Firebase, how would I go about that?
Just like you would store any other value to a firebase document, right? After all it's just a string!
What software did you use to record your screen?
I always use Screenflow!
Do we need to import NgxQRCodeModule?
Yes I think so.
Hey Bro, How I ged this text return of the scanner?
It is inside the then() block where you get the result from the scanner!
Is this working on the mobile after installing that apk?
I think it should, yes!
After completing all the steps white screen occurs please help
I face the same problem. Tried various suggestions found from googling around making the ionic page transparent via css script but no luck. @Simon Grimm, do you face this problem as well? Any advice how to resolve this?
Does someone in here know how to convert his ionic 3 canvas drawing to ionic 4?
2nd
Que Dios nos perdone.