In case someone has a same problem that I had. If the camera preview is not showing, try to delete DARK scheme in theme/variable.scss. These styles were somehow blocking my preview.
Hi Simon! Thanks for sharing your knowledge, I follow your instructions, but, a instruction: [style.--background]="scanActive ? '#00000000' : '#fff'" don't work, when I active scanner the background not stay transparent. Could you help with another instruction? Thanks a lot.
Hi Simon, Thanks for the wonderful demo, however I am facing an issue while implementing it on my app. Actually I have multiple ion-content with router-outlet. Can you suggest what would be the ideal way implementing this. Additionally, we have ion-tabs control
Thank for the tutorial. Although in more recent versions capacitor have added a method to remove the background but I'm still facing the issue and this how i came to your video 😅
Looking at the java implementation I guess the {force: true} is used to always show the alert dialog when permissions arent yet granted. This can be kind of annoying since it will be prompted every single time unless you grant it or press "never ask again". However, in my opinion it wouldnt make any sense avoiding this alert since you really need it in order to use the plugin. So we will need to stick to {force: true}. Otherwise when the user denies the permission, the alert wont be prompted and the user will need to open the app settings, which is a very bad ux in my opinion.
Hi Simon, thanks for wonderful tutorial. I followed this tutorial step by step. It is amazing that it worked for me. But it works for only first time. I could scan QR code. If i close the app and then open it, camera is not opening, i can see only dark screen. What could be wrong?
I found that when we start scanning from landscape mode it shows camera wrong and I don't know if it is fixable( I think this may have something to do with the way the camera orientation control itself is connected.
@@galaxies_dev Thanks for answering, I was using a paid template, and turns out I was working in a modal page, everything solved now! Keep up that great work, you have helped me a lot
Dude I created a blank ionic angular app and compiled it for android with capacitor , it was just a blank boiler plate of ionic 5 but still it took a lot of time to start , the device that I am using has a good amount of ram and is the latest version of android. What should I do , or rather what's going wrong
Hi Simon, I have developed an ionic app and it has the QR CODE SCANNER. But I want the code to get scanned from gallery. Can you please help me achieve this into the QR Scanner
Hi Simon, this works with ionic 4 but not with ionic 6. The backgrouns does not become transparent. In previous versions everything was ok. Do you have any suggest? Thanks so much!
I'm a bit biased but I only start new apps with Capacitor. I like the approach a lot more, and you are still able to use 99% of Cordova plugins if you need to!
Great video Simon, worked awesome! I have tried a few different scanning apps that perform faster identifying the barcode even from a greater distance and was wondering is there a way to increase the performance of this plugin or do you have to build your app using Xcode to unlock these features?
Well you can't do much about the plugin itself unless you want to fork it. But yes, inside a mobile app the Capacitor plugin will use the native SDKs which might indeed work faster!
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?
I followed step by step and it doesn't work for me. After check permissions, the camera never shows up I even used "BarcodeScanner.hideBackground();" from the documentation but the background is always white :(
error: package com.dutchconcepts.capacitor.barcodescanner does not exist import com.dutchconcepts.capacitor.barcodescanner.BarcodeScanner; please help me sir
Hey simon, i frame is not working on ios i dont want to use inApp brawser, working on android but not in ios its showing white screen please help me how i resolve this issue.
@@galaxies_dev I mean the lag in transition between pages, when I click a button I see the whole ripple effect of the button and there is a small duration before transition, I don't notice that when I am testing on PC (Web), but I can notice that on the android device...So I understood this is a performance issue, is there any way to optimize that.
as always you are the man, thanks a lot for the aport. Do you know how to upload a picture taken from the camera and get saved on FIREBASE? it would be great if you do something like that
I am big fan of your tutorials .. i am searching for mobile number authentication using firebase for ionic .. like me ..Many users are looking for this ..But not enough documentation is available.
the problem is that your body has a dark background const qrScanner: QRScanner = new QRScanner(); const preview = (show: boolean): void => { if (show) { (window.document.querySelector("ion-app") as HTMLElement).classList.add("yourcustomclass"); } else { (window.document.querySelector("ion-app") as HTMLElement).classList.remove("yourcustomclass"); } } #this code add a class to your body add a background: transparent none !important to yourcustomclass;
Hi, So i have a request to make Can you make a tutorial on how to use camera in web and then later on add this functionality to android as well And if its possible dont start with capacitor, maybe you can add capacitor to an existing ionic react project Is it possible to make ? I just wanted to check if its possible or not ? Fun fact i haven't really use ionic and capacitor I am just going to start android app development and i was looking for alternative of react native (just for knowledge) and i found ionic and capacitor And to be honest it interests me a lot Like for past few days i have been watching many many videos on ionic but all of them end up being and android/ios app So i was wondering if it is possible to add camera plugin (and others) in web And want to know that how much code needs to be changed to make camera work on Android Thats all. Thanks 😊.
I haven't worked with React but the Capacitor camera works great for both web and Android, with exactly the same code (and iOS as well ofc)! You can find a React tutorial here: ionicframework.com/docs/react/your-first-app/2-taking-photos
Ya no funciona para versión de ionic 6, @dutchconcepts/capacitor-barcode-scanner esta DEPRECATED, y mw sale un mensaje de error intentando con @capacitor-community/barcode-scanner: discoverCaptureDevices deprecated, me puedes ayudar por favor
hello, one question please how do you do to make the test in a real device and show the result in the emulator?
In case someone has a same problem that I had. If the camera preview is not showing, try to delete DARK scheme in theme/variable.scss. These styles were somehow blocking my preview.
Very interesting - thanks for sharing!
took me 4 days to realize that this comment solve my problem XD thank you
Hi Simon! Thanks for sharing your knowledge, I follow your instructions, but, a instruction: [style.--background]="scanActive ? '#00000000' : '#fff'" don't work, when I active scanner the background not stay transparent. Could you help with another instruction? Thanks a lot.
Hello, thanks for the tutorial, can this be configured to read MRZ code?
Simon, you are the best Ionic teacher ever! Really appreciate everything that you've done so far. Capacitor barcode scanner works flawlessly.
Thank you so much Fedor, and happy to hear it works for you :)
Does it work with qrCodes or barcodes?
Hi Simon, Thanks for the wonderful demo, however I am facing an issue while implementing it on my app. Actually I have multiple ion-content with router-outlet. Can you suggest what would be the ideal way implementing this. Additionally, we have ion-tabs control
Simon, its perfect the proyect but i have capacitor 3.0, how can i do....
Hi Simon, I hope you are well. Can you tell me how you use this video livereload? Thanks
hello....
What version of Angular did the project work in Angular 16?
I'm dying for Capacitor 3 support, though 🙃
Hi Simon, thanks for the video, but I have capacitor 3 and I can't import the BarcodeScanner can you comment with the link of the video you teach?
Thank for the tutorial.
Although in more recent versions capacitor have added a method to remove the background but I'm still facing the issue and this how i came to your video 😅
It works perfectly if you follow the tutorial step by step. Thanks a lot! 😃
Great to hear!
Hi Simon, how do I enable only the front camera to scan?
Now it works in web too!!!!
Nice!
Hello I really like the console log you used. Is it some plugin?
Looking at the java implementation I guess the {force: true} is used to always show the alert dialog when permissions arent yet granted. This can be kind of annoying since it will be prompted every single time unless you grant it or press "never ask again". However, in my opinion it wouldnt make any sense avoiding this alert since you really need it in order to use the plugin. So we will need to stick to {force: true}. Otherwise when the user denies the permission, the alert wont be prompted and the user will need to open the app settings, which is a very bad ux in my opinion.
Hi Simon, thanks for wonderful tutorial.
I followed this tutorial step by step. It is amazing that it worked for me. But it works for only first time. I could scan QR code. If i close the app and then open it, camera is not opening, i can see only dark screen. What could be wrong?
hey,I have the same problem(iOS), did you find any solution for that please?
I found that when we start scanning from landscape mode it shows camera wrong and I don't know if it is fixable(
I think this may have something to do with the way the camera orientation control itself is connected.
What if you have another page behind? I access the scanner from another page, when i set the ion content transparent, I can see the page from before
Why is that page still visible? But I guess you need to find a way to make that page transparent as well in that case!
@@galaxies_dev Thanks for answering, I was using a paid template, and turns out I was working in a modal page, everything solved now! Keep up that great work, you have helped me a lot
Dude I created a blank ionic angular app and compiled it for android with capacitor , it was just a blank boiler plate of ionic 5 but still it took a lot of time to start , the device that I am using has a good amount of ram and is the latest version of android. What should I do , or rather what's going wrong
The problema that I have is the camera show in front not back and not found for that very well
Hi Simon,
I have developed an ionic app and it has the QR CODE SCANNER. But I want the code to get scanned from gallery. Can you please help me achieve this into the QR Scanner
Hi Simon, this works with ionic 4 but not with ionic 6. The backgrouns does not become transparent. In previous versions everything was ok.
Do you have any suggest? Thanks so much!
I'll have to check it out again - not sure what caused that change!
I'm working on vue and ionic, and today your solution was the best i found. U're the fucking god.
Thank you 🤙
You are the best. thanks from Ukraine!!)
Thanks and greetings from Germany 👋
i using capacitor-community/barcode-scanner version 1.2.1, capacitor 2 and it not show camera, can you help me ?
hi simon, how to share the screen of your physical device to your pc? do you use any software ?
Yes I use Reflector on my Mac for that!
Hi Simon
Can you advise how can we implement continues scanning in ionic with this same implementation
I'm not sure if it's supported with this plugin :/
Thank you Simon. Just a question tho, how can we import this correctly in capacitor v3
Some plugins don't work yet with Capacitor 3 so perhaps this is one of them :/
Hello, everithing works fine but when the camera closes the capacitor logo shows up for a second. Is this normal? and how can I avoid it.
Thank you for these amazing videos Sir 🙏🏾
My pleasure!
does it required to add code in MainActivity ? because in github repo didn't mention that
I've just tried and it is needed.
@@zvonimirlokmer3962 It's worked with me without add any code inside MainActivity .. are you use capacitor 3?
Cordova vs capacitor. From both of them which one is better ?
The ionic team recommends capacitor, because all its efforts and new developments are carried out in this technology.
I'm a bit biased but I only start new apps with Capacitor. I like the approach a lot more, and you are still able to use 99% of Cordova plugins if you need to!
Hi there! I'm Using Ionic Vue. Is this approach the same? Thanks!!
Yes I think it should be quite similar :)
Hi Simon, a query, this code is used to read PDF417 code?
I'm not sure about the different formats, you might have to check out the documentation to see if that's possible!
Great video Simon, worked awesome! I have tried a few different scanning apps that perform faster identifying the barcode even from a greater distance and was wondering is there a way to increase the performance of this plugin or do you have to build your app using Xcode to unlock these features?
Well you can't do much about the plugin itself unless you want to fork it. But yes, inside a mobile app the Capacitor plugin will use the native SDKs which might indeed work faster!
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?
I followed step by step and it doesn't work for me. After check permissions, the camera never shows up
I even used "BarcodeScanner.hideBackground();" from the documentation but the background is always white :(
That function didn't work well for me as well, I think you need to hide the ion-content as well from CSS. Give that a try!
I cant use flashlight when i use barcode scanner why? :(
error: package com.dutchconcepts.capacitor.barcodescanner does not exist
import com.dutchconcepts.capacitor.barcodescanner.BarcodeScanner; please help me sir
I have the same fkng problem, did you repair it????
Yes i have fixed it.
@@francobonaviri6914 yes
Hey simon, i frame is not working on ios i dont want to use inApp brawser, working on android but not in ios its showing white screen
please help me how i resolve this issue.
I know ionic recommends capacitor but is it still relevant to use cordova?
Sure you can still use Cordova, but usually Capacitor brings more benefits and you could still use 99% of Cordova plugins with it!
Can you make a video on how to use the card-io? I'm looking forward to it
Looks interesting, I'll see what I can do!
how do you deal with the lag in ionic UI?? can you please make a video about this subject
Which lag exactly do you mean?
@@galaxies_dev I mean the lag in transition between pages, when I click a button I see the whole ripple effect of the button and there is a small duration before transition, I don't notice that when I am testing on PC (Web), but I can notice that on the android device...So I understood this is a performance issue, is there any way to optimize that.
@@hellelo.5840 Unfortunately a general performance issue for Ionic
Hello sir, I am using this plugin with ionic-react, I am able to scan qr-code but I am not able to include any ui on the camera view. help?
Probably just a styling issue, try to debug the DOM and see where your elements are hiding!
can I follow this video today?
Yes!
I need to develop ionic 6 app ficial recognition
as always you are the man, thanks a lot for the aport. Do you know how to upload a picture taken from the camera and get saved on FIREBASE? it would be great if you do something like that
Sure it's no big deal with Firebase Storage, but perhaps I'll have to create a new video around that topic!
@@galaxies_dev that would be a great help
I am big fan of your tutorials .. i am searching for mobile number authentication using firebase for ionic .. like me ..Many users are looking for this ..But not enough documentation is available.
Thanks for the idea. I'll check it out!
heres a tip... lock the orientation and turn off auto rotate...
Hi i have a problem , when i click on scan button i just see the box and camera is not detected. Need help
Good it works for me now , i juste add that BarCodeScanner:BarcodeScannerPlugin; in interface PluginRegistry
Hey Simon! Do you have a discord server that we can chat about ionic stuff?
No not yet :/
how can i use it on my cordova application
It's a Capacitor plugin so you can't use it within a Cordova project.
barcode its should not while scanning taken and give me any example
this is not working on PWA. please explain me how is it possible
on mobile web
i have issue in dark mode enabled on phone the background is black screen can anyone help with that
the problem is that your body has a dark background
const qrScanner: QRScanner = new QRScanner();
const preview = (show: boolean): void => {
if (show) {
(window.document.querySelector("ion-app") as HTMLElement).classList.add("yourcustomclass");
} else {
(window.document.querySelector("ion-app") as HTMLElement).classList.remove("yourcustomclass");
}
}
#this code add a class to your body
add a background: transparent none !important to yourcustomclass;
@@danieeLwayne thank you will try it and give you feedback
Bro, help ionic to printer portable....
"I have no code completion today" Repeated everyday... why always VSCode?
Basically every video.. But usually only for some of the imports..
Hi, So i have a request to make
Can you make a tutorial on how to use camera in web and then later on add this functionality to android as well
And if its possible dont start with capacitor, maybe you can add capacitor to an existing ionic react project
Is it possible to make ?
I just wanted to check if its possible or not ?
Fun fact i haven't really use ionic and capacitor
I am just going to start android app development and i was looking for alternative of react native (just for knowledge) and i found ionic and capacitor
And to be honest it interests me a lot
Like for past few days i have been watching many many videos on ionic but all of them end up being and android/ios app
So i was wondering if it is possible to add camera plugin (and others) in web
And want to know that how much code needs to be changed to make camera work on Android
Thats all.
Thanks 😊.
I haven't worked with React but the Capacitor camera works great for both web and Android, with exactly the same code (and iOS as well ofc)! You can find a React tutorial here: ionicframework.com/docs/react/your-first-app/2-taking-photos
how the hell you made that box
That's all just CSS overlay!
this is Deprecated
trust you that it will work? lmao what the hell man 18:24
👍👍👍
Ya no funciona para versión de ionic 6, @dutchconcepts/capacitor-barcode-scanner esta DEPRECATED, y mw sale un mensaje de error intentando con @capacitor-community/barcode-scanner: discoverCaptureDevices deprecated, me puedes ayudar por favor
toooooooooo........ boring explaination.............😩😩😩😩