How to Build an Ionic Barcode Scanner with Capacitor

[@arionpaul6208]

Now it works in web too!!!!

[@galaxies_dev]

Nice!

[@FedorMashoshin]

Simon, you are the best Ionic teacher ever! Really appreciate everything that you've done so far. Capacitor barcode scanner works flawlessly.

[@galaxies_dev]

Thank you so much Fedor, and happy to hear it works for you :)

[@GosuMania]

Does it work with qrCodes or barcodes?

[@tarikfares6579]

hello, one question please how do you do to make the test in a real device and show the result in the emulator?

[@fernandolopezramirez4463]

It works perfectly if you follow the tutorial step by step. Thanks a lot! 😃

[@galaxies_dev]

Great to hear!

[@nadimmatoussi8772]

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 😅

[@chacataplan]

Hello, thanks for the tutorial, can this be configured to read MRZ code?

[@DennisSmink]

I'm dying for Capacitor 3 support, though 🙃

[@ConvertPublicidade]

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.

[@adiem777]

hello.... What version of Angular did the project work in Angular 16?

[@willianriviera2398]

Hi Simon, I hope you are well. Can you tell me how you use this video livereload? Thanks

[@GerardoPacheco]

Hello I really like the console log you used. Is it some plugin?

[@marquescx9959]

Hi Simon, how do I enable only the front camera to scan?

[@brambatimoreira]

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?

[@Melrix]

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.

[@galaxies_dev]

Very interesting - thanks for sharing!

[@VanchoSpiegel]

took me 4 days to realize that this comment solve my problem XD thank you

[@CastingSpell]

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

[@galaxies_dev]

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!

[@CastingSpell]

@@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

[@joelcool1027]

Thank you for these amazing videos Sir 🙏🏾

[@galaxies_dev]

My pleasure!

[@juanCarlosBA]

Simon, its perfect the proyect but i have capacitor 3.0, how can i do....

[@RaviMittal84]

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

[@chuongnv289]

i using capacitor-community/barcode-scanner version 1.2.1, capacitor 2 and it not show camera, can you help me ?

[@hossamelsayed4441]

does it required to add code in MainActivity ? because in github repo didn't mention that

[@zvonimirlokmer3962]

I've just tried and it is needed.

[@hossamelsayed4441]

@@zvonimirlokmer3962 It's worked with me without add any code inside MainActivity .. are you use capacitor 3?

[@aleksandrmatyka3118]

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.

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

You are the best. thanks from Ukraine!!)

[@galaxies_dev]

Thanks and greetings from Germany 👋

[@girishfuluskar7026]

Hi Simon Can you advise how can we implement continues scanning in ionic with this same implementation

[@galaxies_dev]

I'm not sure if it's supported with this plugin :/

[@vampirejs758]

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

[@ingjuliosg]

The problema that I have is the camera show in front not back and not found for that very well

[@tonywong8211]

can I follow this video today?

[@galaxies_dev]

Yes!

[@CarlosSK]

hi simon, how to share the screen of your physical device to your pc? do you use any software ?

[@galaxies_dev]

Yes I use Reflector on my Mac for that!

[@monicaria735]

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!

[@galaxies_dev]

I'll have to check it out again - not sure what caused that change!

[@jeyaganeshans4652]

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?

[@myriamekemala9649]

hey,I have the same problem(iOS), did you find any solution for that please?

[@TungNguyen-xw4hr]

Can you make a video on how to use the card-io? I'm looking forward to it

[@galaxies_dev]

Looks interesting, I'll see what I can do!

[@alikhan-eu2wc]

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

[@charlesthomas8611]

I need to develop ionic 6 app ficial recognition

[@dplaybass096]

I'm working on vue and ionic, and today your solution was the best i found. U're the fucking god.

[@galaxies_dev]

Thank you 🤙

[@alejandroruiz6078]

Hi Simon, a query, this code is used to read PDF417 code?

[@galaxies_dev]

I'm not sure about the different formats, you might have to check out the documentation to see if that's possible!

[@sebasA]

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.

[@javiersanchez4549]

Hi there! I'm Using Ionic Vue. Is this approach the same? Thanks!!

[@galaxies_dev]

Yes I think it should be quite similar :)

[@vNYCblade]

heres a tip... lock the orientation and turn off auto rotate...

[@adedreey]

Thank you Simon. Just a question tho, how can we import this correctly in capacitor v3

[@galaxies_dev]

Some plugins don't work yet with Capacitor 3 so perhaps this is one of them :/

[@DheerajSharma-kt6df]

Cordova vs capacitor. From both of them which one is better ?

[@anroswell]

The ionic team recommends capacitor, because all its efforts and new developments are carried out in this technology.

[@galaxies_dev]

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!

[@saketkale8860]

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.

[@sankatsiddhartha2649]

error: package com.dutchconcepts.capacitor.barcodescanner does not exist import com.dutchconcepts.capacitor.barcodescanner.BarcodeScanner; please help me sir

[@francobonaviri6914]

I have the same fkng problem, did you repair it????

[@sankatsiddhartha2649]

Yes i have fixed it.

[@sankatsiddhartha2649]

@@francobonaviri6914 yes

[@corprosystems]

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?

[@galaxies_dev]

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!

[@TheSaceone]

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.

[@hellelo.5840]

how do you deal with the lag in ionic UI?? can you please make a video about this subject

[@galaxies_dev]

Which lag exactly do you mean?

[@hellelo.5840]

@@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.

[@caydinc]

@@hellelo.5840 Unfortunately a general performance issue for Ionic

[@vampirejs758]

I know ionic recommends capacitor but is it still relevant to use cordova?

[@galaxies_dev]

Sure you can still use Cordova, but usually Capacitor brings more benefits and you could still use 99% of Cordova plugins with it!

[@cmanship]

Hi i have a problem , when i click on scan button i just see the box and camera is not detected. Need help

[@cmanship]

Good it works for me now , i juste add that BarCodeScanner:BarcodeScannerPlugin; in interface PluginRegistry

[@lestthatth]

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

[@galaxies_dev]

Sure it's no big deal with Firebase Storage, but perhaps I'll have to create a new video around that topic!

[@lestthatth]

@@galaxies_dev that would be a great help

[@rajshekharydodamani2221]

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?

[@galaxies_dev]

Probably just a styling issue, try to debug the DOM and see where your elements are hiding!

[@tsenguun]

Hey Simon! Do you have a discord server that we can chat about ionic stuff?

[@galaxies_dev]

No not yet :/

[@edugramorg8224]

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.

[@galaxies_dev]

Thanks for the idea. I'll check it out!

[@cpasmart8319]

how can i use it on my cordova application

[@galaxies_dev]

It's a Capacitor plugin so you can't use it within a Cordova project.

[@GosuMania]

I cant use flashlight when i use barcode scanner why? :(

[@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?

[@muhammadumairnawaz9628]

this is not working on PWA. please explain me how is it possible

[@muhammadumairnawaz9628]

on mobile web

[@yorch_dev]

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 :(

[@galaxies_dev]

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!

[@mahmoudalaskalany]

i have issue in dark mode enabled on phone the background is black screen can anyone help with that

[@danieeLwayne]

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;

[@mahmoudalaskalany]

@@danieeLwayne thank you will try it and give you feedback

[@ryananto7015]

Bro, help ionic to printer portable....

[@abhisheksah7113]

barcode its should not while scanning taken and give me any example

[@anolghosh9501]

how the hell you made that box

[@galaxies_dev]

That's all just CSS overlay!

[@drac8854]

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 😊.

[@galaxies_dev]

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

[@giorgixutiashvili4834]

trust you that it will work? lmao what the hell man 18:24

[@RyanDanu-rx6gb]

this is Deprecated

[@toxaq]

"I have no code completion today" Repeated everyday... why always VSCode?

[@galaxies_dev]

Basically every video.. But usually only for some of the imports..

[@jingguoca]

👍👍👍

[@dileepvarma433]

toooooooooo........ boring explaination.............😩😩😩😩

[@pablojimenez1025]

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