Build a Live Barcode and Text Scanner iOS App with SwiftUI & VisionKit

[@XCA]

Timeline: 00:00 Introduction, Demo, Project Setup 05:33 Camera & Data Scanner Access Handling 17:44 Implement DataScanner SwiftUI View 36:13 Implement View & States for Segmented Controls & List 55:52 Implement Resizable Half Sheet View with Translucency 01:01:43 Closing If you encounter XPC Interuption issue when attaching debugger in Xcode to your iPhone, you just need to rebuild again. Hope Apple fixes this in next beta release 🙏🏻

[@Kylefassbinderful]

This is exactly what I was looking for. I work at a grocery store. I wanna make an app that I can use at work. I need to document/catalog items that don't ring up at the register. Every entry needs a text label with *Price* [both _listed_ price and _POS_ scan price] , *Product* *Name* and *Barcode,* *Photo* of the item, *yes* *or* *no* = item scans at checkout. The idea is I can be ringing up customers and effectively communicate issues with items priced wrong, items tagged wrong and/or items not scanning with the appropriate department. Currently we have a system that will print this information on a single-use paper slip, at the end of the day the slips are gathered and given to the person in charge of adjustment. But we don't always have those blank slips stocked, it's time consuming to find some and then have the customer wait while you get your act in gear. It would be much quicker to pull out my phone, the app is already open and ready to quickly take down the product info.

[@mikehimself909]

Wonderful tutorial - thank you! I like the way you bump into issues then fix them live :)

[@XCA]

Glad you like them!

[@dugrut1325]

I'm very excited to watch this, hopefully I learn a few things.

[@XCA]

🙏

[@tinnietv6615]

Thank you from Australia, this tutorial is amazing!! Thank you so much for sharing.

[@tinnietv6615]

Another question Is it possible to use the data scanner text rec inside of a AVCaptureSession? Instead of having to use the DataScannerView? @xcodingwithalfian

[@VideoTubeFan]

Thanks a lot. Nice tutorial! This helped me a lot!

[@Alexander-mg4pr]

Great Video! How can we scan for specific text only?

[@luigibattaglioli6180]

this was an amazing tutorial, thank you for taking the time to make this!!

[@Awesome奥深]

Looks nice. Do you have any video about messages. Phone receives many trash messages, can only remove one by one, or keep at least 30 days.

[@GaetanoCarmeloLaDelfa]

Thanks a lot! very nice tutorial, with an example which is not like the others: it is a complex example with a lot of features

[@XCA]

Glad that it helps you!

[@hairs4729]

great video Alfian, I am new in SwiftUI and could not figure out how to save the result of barcode scan in a property and use in another view

[@XCA]

You should be able to store it in a prop using struct/clas, pass that to another view

[@SourovDattacse]

Very Interesting. And thanks man exploring the new things.

[@XCA]

Thanks!

[@mrgoynes]

Great tutorial. Is it possible to add Area of Concern / Region of Interest with VisionKit? I would like to overlay a visual indicator to show the user where to position a barcode, and reduce the cpu processing to only look at that area.

[@XCA]

I haven’t tried this yet but i think it should be possible.

[@dekaprimatiodeandra6679]

I'll try this tutorial later

[@rmf9a]

Love the video! How do you add a region of Interest to this. I couldn’t get it working.

[@chrisleydev]

Super great video!!! Thanks

[@anilg9693]

Very nicely done Alfian, does Apple toolkit supports ArUco marker scanning? what is involved to support?☺

[@hamzaoubouzid3231]

Hi Alfian, it's a very interesting idea. I just have one question about the app's ability to scan barcodes and text at the same time. Is that possible?

[@usmaniqbal8703]

Found this amazing and i have subscribed to you! i have a question... what i am trying to do is use this scanner on food products in particular the ingredients section. Could you please tell me how i could get this scanner to search for specific words. Would be really helpful if you could get back to me.

[@krysiasajak]

Great tutorial 🙂

[@XCA]

Thanks!

[@manuelduarte077]

excellent video, thank you for taking the time to make these videos 😎

[@XCA]

Thanks!

[@SourovDattacse]

Hey Alfian. I want some custom feature on this. Like there are 10 barcode item in a tray. I will need which serial number started with “T” . T’ included serial number will show green horizontal line and non T serial number will show red horizontal line. How could I implement this. I am eagerly waiting for your reply

[@emmess6003]

Great Video! I wonder how many Barcodes it can possibly track at the same time. Crazy to think that some commercial SDKs cost 10s of thousands $$$ (per year!) for very similar features

[@XCA]

Probably depends on the SOC also. As it is got more powerful, it should be able to track more at the same time.

[@noahhellyer3186]

oh my gosh! thank you so much! its so awesome

[@DimNovo]

A very interesting video - thank you for sharing 👍🏻 Why you don't create a construct that concatenates all the associative values you observe, and pass an array of them to the task modifier, as an id parameter, which is already handled (() async -> Void) - if, for example, you call some method from the ViewModel class (which is a good practice) that is marked as MainActor... Instead - you write an onChange modifier for each observed value... Given that you are excellent at working with enums...🙂

[@ramonteiro]

Nice video! Do you know a good solution for scanning car license plates?

[@BenjaminEggerstedt]

Amazing video, thank you! For whatever reason the transparency of the sheet won't work for me, even though no errors are thrown and the app works just fine. I'll try to find out if this is related to later iOS changes.

[@BenjaminEggerstedt]

Starting with iOS 16.4 you can use .sheet(isPresented: .constant(true)) { bottomContainerView .presentationBackground(.ultraThinMaterial) ... This worked for me, my setup was slightly different from your (once again: amazing!) tutorial!

[@ujjwalsrivastava9702]

hello sir, just had a small question....... this app is designed for Xcode 14 and iOS 16 which are still in beta phase........and not being a member of the apple developer plan I'm not able to download iOS 16....... is there a solution to this or I have to wait for the official release of iOS 16 by Apple..... Thank you

[@XCA]

Taken from Apple site: You can learn how to develop apps for Apple platforms for free without enrolling. With just an Apple ID, you can access Xcode, software downloads, documentation, sample code, forums, and Feedback Assistant, as well as test your apps on devices. developer.apple.com/support/compare-memberships/

[@ujjwalsrivastava9702]

@@XCA yes sir.... But to run our app we need ios 16 and to download that we need apple developer program.....is there any way to solve this tooo.....?

[@mahmoudzinji5672]

What does Apple Wallet Credit Card scanner use, because it recognizes the data from Credit Cards in very fast and effecient way. Any advice ? I tried this on Credit Cards and its kinda fine but not that accurate

[@mahmoudzinji5672]

Can this be used to read Credit Cards ? Any specific tutorial for that ?

[@XCA]

You can read the raw texts, but you will need logic to determine whether the texts are credit card information. Name, card number, card type, expiry date, etc

[@GaetanoCarmeloLaDelfa]

hi, there is a way to understand which Barcode (es. QRCode) correspond to which text? I mean, maybe there is a way to make the overlays to the barcodes in different colors and the text decoded in the correspondent color.

[@NTuneLabs]

Could the barcode scanner be used to create a product inventory app? Every year we have to hand count our inventory, but it could be so much faster if there was a way to scan a barcode and enter a quantity. OR, if you could scan each barcode and keep a running count.

[@XCA]

Yes, you can add any business logic that you want. The possibility is endless.

[@NTuneLabs]

@@XCA do you plan to show how something like that could be implemented?

[@markjeromeDeleon-l4z]

Hello, it is possible to create a camera scanner to scan a text and the text turn to qr in live?

[@XCA]

its possible 😀

[@Memes_uploader]

Why does the camera quality is bad? when scanning and that's text recognition works very inaccurate

[@nachiketdesai]

How do I dismiss the scanner view on detection of barcode?

[@navjotsingh2457]

tysm

[@youbettareact1276]

how to update our xcode into 14 since in appstore it is still 13

[@XCA]

You can download the beta from Apple Developer Center: developer.apple.com/news/?id=l87okncv You can install it side by side with the stable version

[@youbettareact1276]

@@XCA sure.. thank you kak for the great tutorial.. finally i can implement new update from ios 16 and visionkit, really helpful...

[@user-bf7vm2ss9f]

What if i want to scan other languages?

[@SourovDattacse]

One Question, If we have two or multiple QR/Bar codes, How can we scan those simultaneously?

[@XCA]

You just point out your camera to them. It will highlight all the detected qr/bar codes in bounding boxes

[@LeviH-tt1hf]

hi, in this code, after we added the sheet for DataScannerView, there is no responds when user tap the recognized items, because the UIDimmingView of sheet is on top of DataScannerView. DataScannerView( recognizedItems: $vm.recognizedItems, recognizedDataType: vm.recognizedDataType, recognizesMultipleItems: vm.recognizesMultipleItems) .background { Color.gray.opacity(0.3) } .ignoresSafeArea() .id(vm.dataScannerViewId) .sheet(isPresented: .constant(true)) { bottomContainerView .background(.ultraThinMaterial) .presentationDetents([.medium, .fraction(0.25)]) .presentationDragIndicator(.visible) .interactiveDismissDisabled() .onAppear { guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene, let controller = windowScene.windows.first?.rootViewController?.presentedViewController else { return } controller.view.backgroundColor = .clear } }