Barcode Scanner in .NET MAUI with ZXing.Net.Maui
VloĆŸit
- Äas pĆidĂĄn 5. 07. 2024
- Barcodes or QR codes don't need any introduction. They are still everywhere and you are using barcode scanners in all of your apps. Have I got good news for you! With ZXing.Net.Maui you can now add a barcode scanner to your .NET MAUI app with ease, tune in to learn all about it.
đ Join this channel to get access to perks:
czcams.com/channels/ral.html...
Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
đ Don't forget to subscribe to my channel for more cool content: czcams.com/users/GeraldVerslui...
đŠ Follow me on Twitter: / jfversluis
đ€ Join the Discord server: / discord
đ Links
Sample Code Repo: github.com/jfversluis/MauiZxi...
ZXing.Net.Maui Repo: github.com/Redth/ZXing.Net.Maui
.NET MAUI Docs: docs.microsoft.com/dotnet/com...
â± Timestamps
00:00 - .NET MAUI Barcode Scanner
00:15 - Barcodes?! What is That?
01:52 - Install ZXing.Net.Maui NuGet package
03:18 - Add UseBarcodeReader line
04:01 - Add Camera Permissions
04:50 - Implement CameraBarcodeReaderView UI
07:45 - Handle Barcode Scanning Results
09:30 - Additional Scanning Options
11:32 - Running the Sample App
12:28 - I CHEATED! SORRY!
14:13 - Also Generate Barcodes?
đ„ Video edited with Filmora
đââïž Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#dotnetmaui #barcodescanner #qrcode #dotnet6 #maui - VÄda a technologie
Not done binging .NET MAUI content yet? How about learning about the DrawingView? Click here: czcams.com/video/7rw13_a5GR0/video.html
Is there a replacement for ZXing.Net.Maui?
Multiple! One is Camera.MAUI: Implement QR Code & Barcode Scanning with Camera.MAUI in .NET MAUI
czcams.com/video/FuvFrIS9wm0/video.html
Search for barcode on this channel for more
You and James are the Best guys that Maui project could have, i don't know how you make videos, work, answer My issues on Maui repo, You deserve a lot Gerald hope One day i can meet You!
Many thanks for the kind words Leandro! I hope so too!
Finally! Iâm so glad thereâs some very smart people out there who put in all this effort to create these types of controls for us to use. Thanks to all the contributors :)
Well said! On to many more!
I remember using it in an Android project back in 2015 as part of my dissertation project at university. Documentation was poor on it and the only way I got it working was to watch a video all in German with a code example.
Iâm so glad itâs been adopted the way it has. Itâs such a brilliant library.
It absolutely is and it helped a lot of people. Hopefully even more for .NET MAUI!
I would really like to see the barcode generator video! Thanks for showing all the libraries and features as the community works on them! its nice to see some of the functionality from XF getting ported to MAUI!
Already recorded and uploaded! As a member you get early access, else it will be public soon :) thank you Ryan!
Thank you very much Gerald. You're doing really good.
Appreciate that Denis! Thanks!
Looking forward to more releases of this library. Thank you!
They will most definitely come!
Great tutorial. Thank you for all the tips.
Thanks for watching!
Another great video, just installed with updated preview and it did not require the additional handler section on Android for me, thanks for the great content.
Great! Thanks and thanks for letting me know!
Thank you, Gerald. I'm already making use of this.
Great! What are you making?
@@jfversluis It's to scan a QR Code in a letter that will be sent to customers so they can register to use our app. The app is just starting to be written, so the arrival of this NuGet package is very welcome đ
Yeah! That is what I need for my business application.
Well there you have it! Good luck converting your app!
wow! we always have everytNice tutorialng to learn! Great to know you!
Thank you so much!
You are awesome man, if everyone who is a cheater, cheats like you do, the world would turn into a paradise dude. You are amazing.
Haha that is an amazing way of looking at it, thank you so much Daniel!
thanks man it is amazing as usual
Thank you!
Thank you Gerald!! Is there library for sliding up panel? Like umano SlidingUpPanel?
Maybe something like this? blogs.xgenoapps.com/post/2022/07/23/maui-bottom-sheet
Great videos. Will try it later.
Thanks Chandra!
Great video! Do you have any tips for speeding up scanning? It seems fine for QR codes, but when we try to scan a PDF417 barcode, it is either doesn't scan at all, or it takes more than a minute of fidgeting to get it to work. I don't know if this is a bug, or if we're doing something wrong in our code.
Great video!
Thanks!
just what I needed
Perfect, glad I could be of service!
I can definitely use this for a business app coming very soon! Thank you! Side question - how do you "project" your phone screen so you can record it in your video?
In this case I use Microsoft Phone Link, but it doesnât work for all phones www.microsoft.com/windows/sync-across-your-devices
Another option is Vysor
Is there a good way to may the scanner prefer the front camera rather than the rear one?
Thank you!
Youâre most welcome!
Thank you
Youâre very welcome!
Hi! I am wondering if we can use command using mvvm toolkit instead of having event handler(BarcodesDetected)?
Sure use the EventToCommandBehavior
This is a very nice video! Will try it soon! I also wonder, how can .NET MAUI work (read and write) using RFID tags too?
Iâm not 100% up to date in this space⊠is RFID the same as NFC? In that case yes! Iâm planning a video on that soon :)
And thank you!
Next time a Maui Bluetooth video? If there is a way to scan for Devices + Connect to them - on Android and Windows, please make a gread tutorial for this, too!
nice brother
Thank you!
Hi Gerald,
Thanks for this lovely video on Barcode.
Can you please advice which Nuget will help in achieving printing functionality in a .NET MAUI App. I have been struggling to find any help on this. Though printing should have been an out-of-the-box functionality but it seems to be a nightmare. Any help or guidance will be highly appreciated.
I disagree on printing needed to be an out of the box experience. .NET MAUI is primarily a UI framework.
Itâs probably because itâs a hard thing to do depending on the platform. Also itâs very different how you print on Windows than on iOS for instance. Unfortunately I donât know of any existing plugins that do it for all platforms, probably exactly for this reason.
You probably are going to need to write platform-specific code yourself for now.
@Gerald Versluis many thanks for your swift reply. It perhaps explains why it is not out of the box but when the whole idea of MAUI is to reach all platforms with one code base then this limits the idea. But I totally understand your point and thanks for explaining it well.
Thanks Gerald, great content. Just one question (maybe an idea for a future video): there is a ViewModel Initialization available? When a page need to make a request to an endpoint to fill data, I don't have a button to make this call, I want to do this automatically when the page/view model starts.
Iâm not sure what you mean? I donât understand from the context of this video
@@jfversluis Sorry, It's not related to the video, it's just a idea for a future one :)
@@welissonarley Wouldn't you just make the call in the constructor method of the ViewModel class?
Gerald is GOD ... THX :)
Wow. Nice. I have been using ZXing in my API projects to scan barcodes from uploaded PDFs. Though I am not sure about is it the best practice or not. But for mobile platform it's very good. Thank again for the video. From functionality point of view I am ready for writing production code on MAUI. But I am little bit struggling on designing a good UI. It would be very helpful for me if there is a tutorial series only on UI / Animations. Sorry for asking too much...
Iâm not the best at design and UI myself. Check out people like Naweed Akram, Shaun Lawrence or Kym Phillpots. Or check Snppts.dev for some inspiration
Ok. Thank for the information. đ
Is there any method to reduce scanning area? or to specify scanning area? I'm looking for a way to reproduce a classic qrcode scanner with transparent overlay outside of the scanning area
Did you find a solution?
When i use this package on android release (Both Emulator and local devices), it crashes on startup.
I'm unable to find more information about the issue
Does this app work with any version of Android? What are the requirements for it to work? It does not work for me
Great Gerald, do you think this can be implemented in Blazor view ?
Yes and no. You canât use .NET MAUI components inside Blazor. But you can push a new .NET MAUI page and show the barcode scanner and capture the result in Blazor
I had to do some crazy stuff to get an audible beep working utilizing the sound functionality in the blazorwebview. Should there be an easier way in .NET Maui? Does Maui even support audio other than a webview hack. Thanks for the Video!
I will be releasing a plugin for this this week, keep you eye on this space ;)
Thank you for this great video. How can I use an MVVM (CommunityToolkit.mvvm) command instead of event?
I don't believe using command is yet a feature of the barcode ZXing library.
@@harag9 thank you again
Hi! You really explain very quickly and well⊠congratulations!
Iâm building a UWP app that connects with a grabber board and captures images from medical equipments. Can I do it using Maui? It seems that Maui access only Windows/Mac webcams. Do you have any idea how to do that?
Thank you so much! I'm not 100% sure what you mean, but seems like you're asking about a third-party device to do something. If you can make it work in a WinUI app you can make it work with .NET MAUI. You might have to write some platform code though.
@@jfversluis Yes, Iâm talking about third part devices. The code Iâm using to enumerate these drivers and devices is C# pure and there is no problem. But to show images and videos unfortunately Iâm using a UWP component. And I canât find out documentation about replace it. Can you indicate some source ou some one about it?
It works great for me on Android. On iOS 17.4.1 (iPhone 12) no camera view is displayed even though the system camera light is on (green light) when the camera is supposed to be active. c Can you please advise?
Grazie.
Youâre welcome!
Hello Gerald, can you please help with reading barcode reader using using a device's default barcode reader instead of a camera? Reason being I have got handheld devices similar to the ones in shopping tills which scans labels and would need to use the device's built in reader rather than camera. Thanks in advance
I donât have any experience with that, sorry!
Maybe an updated video with the new library split and using it from razor will not be that bad. We had our fights with XAML over time and noticed how awful it is, so we prefer something that is widely know and used (HTML+CSS) đ
I do something like that here: 3 Ways Combine .NET MAUI and .NET MAUI Blazor Hybrid
czcams.com/video/2dllz4NZC0I/video.html
@@jfversluis, I think I missed that ... đThank you for the reference.
How do you do logging ? Is NLog appropriate for a mobile Android application, maybe it is to heavy and large? And could you show with blazor server app with api on controler action, how to reload dbcontex and how to signal a razor view to update the dbContext. At this moment i do it with a list of ref to the page/component and i trigger my the method in the page invoke statehaschanged
You might want to check this czcams.com/video/WicmnH72kf0/video.html
Is there a way to add corners borders on the frame?
Yep! Use the Border object
Hi Gerald, may i know how it work in MVVM? i have tried few way but still cannot send to the View Model
That kind of depends on how your project is structured. The most obvious way would be to use data binding directly to your view model.
Is there a way to scan an inverted barcode (white on black background)?
Good question! No idea! đ
I am using two pages in which first have QR code scanners when i move to the next page and again back to the previous page the camera does not open and does not scan. but when I open new instance this page it work fine
Try this, in QR code scanner page add these overrides:
protected override void OnAppearing()
{
base.OnAppearing();
MainThread.BeginInvokeOnMainThread(async () =>
{
await cameraView.StartCameraAsync();
});
}
protected override void OnDisappearing()
{
base.OnDisappearing();
MainThread.BeginInvokeOnMainThread(async () =>
{
await cameraView.StopCameraAsync();
});
}
Nice video short an sweet.......can we add a camera zoom function in zxing BarcodeReader.....? Is there any video or link ? I am not getting it....
Donât think thatâs available right now. Also not sure if thatâs even possible if it would then still scan the barcode correctly
@@jfversluis Thanks a lot for your reply.
Good work bro, i. My next project is to develop a cross platform Point of sale, also to print to thermal printer in .net Maui please sir tutorial, and i also want to am I having your blessing to start building a commercial software with . net Maui now there won't be any problem
Thank you! I don't have a thermal printer to test with, so I think that might be a hard video to record for me đ
can we have about adding "google map" on MAUI for all devices?
Maps will come with .NET 7
Google APIs are not allowed in Windows Store no
How to handle delay between scanning? when I hover my camera over code it starts spamming with scanned codes until I hide camera
Youâll probably want to stop scanning after getting a result and/or detect if the value is different from last scan
Please help !!! I am facing issue when I am trying to push my barcode scan page into the main page navigation stack then the camera is not opening and somehow I have used the Navigation page to work fine barcode scan page but whem I am trying to pop the pages from Navigation stack by using page.getType() == typeof(pageName) then barcode scan page is of type Navigation Page so it is not removing the page I have also tried to fetch the page name by page.CurrentPage but not working for me so can you please share how to fetch page name of type NavigationPage and removing it????
How can i get access to the CameraView image stream? What if I want to use this image stream to detect something other than barcodes? Please respond thank you đ
Unfortunately not, but itâs being worked on
@@jfversluis thank you for your response!
How to begin scanning after reading the barcode? How to restart the scanning, if we chose to do so.
Set IsScanning to true again
Do you know how to disable the camera use when the user navigates away from the scanner page? The green dot in the upper right corner shows the camera is still active even when I've navigated away from the page. I'm on iOS 16.1
Probably set IsScanning to false whenever you navigate away?
var newPage = new (newpage)();
Navigation.InsertPageBefore(newPage, this);
await Navigation.PopAsync();
this will remove current page when you navigate to next page, and also set navigation page in ur back button in case you want to go back,hope it can help u
Did you find any solution?
@@jfversluis For Maui, I figured out you have to call the CameraBarcodeReaderView's Handler.DisconnectHandler method in the OnDisappearing() method. Like so: scannerView.Handler.DisconnectHandler();
Great! Thanks for letting me know!
anyone able to turn off the camera of zxing? is detecting to false still makes the camera active
I had to modify and create my own private nuget as this doesn't read QR codes on several Android phones (some Honor, Nokia models). The developers don't answer bug requests any more since last year. Any idea if this library has a future and do you have another one you advise people to use?
I have multiple videos on my channel for different libraries, so see if there is something there that you can use
@@jfversluis Camera.MAUi.ZXing did the job. Thanks.
I'm using hjam40, but the issue is that bar code scanning does not work in landscape mode.
(we use industrial strength covers to protect the Android tablets, and thus you can even drop the tablet on a cement floor - nothing happens).
However, these industrial cases we put on the tablets also thus have 2 big side grab handles, and thus this setup means the applciations run in landscaope mode.
Problem is that the bar code libraries don't work in landscape mode, only in portrait mode.
Does anyone know if this library supports landscape mode for bar scanning?
I think you have to set the BarcodeDecodeOptions and enable the AutoRotate property
Does this work for iOS? I had found ZXing dropped support for iOS back in 2020 and it stopped working on the iOS half of my Xamarin project back then. I switched to Jimmy Pun's barcode scanner but his does not work for iOS when I switched the project from Xamarin to the Maui platform.
Works for me on iOS đ€·ââïž
@@jfversluis does it work from windows using a simulated iOS device for testing? It seems that Maui on Windows performing iOS development is quirky and an XCode or SDK update can really knock everything out of sync and trash the iOS half of a project. Then one has to revert to get it working again. I'm totally lacking knowledge of anything Apple which could be more than half the problem.
How are we supposed to turn off the camera once the barcode_detected event is triggered ??
Hide the view or page
Can you do the same for OCR scanner in Maui Blazor or barcode scanner in MAUI Blazor please!!!!!!!!!!
Using this in .NET MAUI Blazor can be found in this video: czcams.com/video/2dllz4NZC0I/video.html
I need one for maui hybrid (blazor)
Iâm showing one way in this video:
3 Ways Combine .NET MAUI and .NET MAUI Blazor Hybrid
czcams.com/video/2dllz4NZC0I/video.html
Any news about maps sir??
Will be released with .NET 7 in November
@@jfversluis can't wait...do a video on it as well sir...
Hello - work this package in iOS - i tested on iPhone 15 Pro - and doesn't work camera. Green light up light, but I don't see camera frame. Android works great.
I have seen it working at the time of recording! If you see issues now better check the repository
You're saving my ass, thank you :)
Haha great! Glad to do so! Thank you!
This may be a very dumb question regarding this wonderful solution...how can I leverage the scanned value to navigate to a page? I've been beating my head against this for weeks now, and I'm certain my lack of experience with C# is the root cause here. The closest I've gotten is an error with "Only the original thread that created a view hierarchy can touch its views"
Dispatcher.Dispatch(() =>
{
(ur value)
});
Can someone help me on this plugin, i have successfully implemented it, but it always difficult to scan. it takes time. Am finding it difficult even scan a barcode or QR code. what can i do?
You can limit the types of barcodes it scans and play with some of the different options to make it maybe speed up. Also check out other alternatives in the videos on this channel. Google ML Kit one is pretty fast, maybe that one works better for you!
ZXing.Net.Maui nuget package no longer exist. What can I use in my .net maui project instead?
Itâs right here www.nuget.org/packages/ZXing.Net.Maui/0.3.0-preview.1
ok, thank you for the information
Gerald , you should really review this video using the latest Visual Studio and ..NET7. There are problems! VS2022 can't find the function UseBarcodeReader().
This project is on .NET 7 and uses UseBarcodeReader. You probably need to add the right using statement at the top
github.com/Redth/ZXing.Net.Maui/blob/main/BigIslandBarcode/MauiProgram.cs
@@jfversluis Hola Gerald, yo tengo el mismo problema, al cargar la librerĂa Visual Studio no reconoce el name space, seguro algo habrĂĄ cambiado. Saludos.
@@christianzaragoza7575 Yeah I think the library has been split up. Make sure to install the ZXing.Net.Maui.Controls library
@@jfversluis tienes toda la razĂłn!!! eres un genio. Muchas gracias.
Hi!
It's is working with maui blazor?
Yes and no. A .NET MAUI Blazor app is still a .NET MAUI app so you can add a page where you view this and scan the barcode. You cannot add this view to a Razor page directly.
@@jfversluis thx :)
@@jfversluis Do you have code some sample on this?
@@ewer let me see if I can create something for it!
@@jfversluis have you been able to provide a sample for this for us? It would be really usefull..
it work fine on QrCode but not working on barcode number
I can't scan barcodeNumber can you help me please
I guess you skipped the part of the video where I mention that đ
@@jfversluis you means barcodereader.option ?
No. There is a bug right now. You can only scan 1 dimensional barcodes when the device is in landscape mode
There are a lot of warnings. Is this working only for android 12?
They will be fixed. Didnât try Android 12 but I would think so. Try it out and let me know!
@@jfversluis I've tested on emulator android 12- it works, but on real xiaomi android 11 it doesn't work (Did not fire detected event)
the same does not appear to work on hybrid...
Yes and no, you can't add a .NET MAUI control inside your Razor, however you can navigate to a .NET MAUI native page and show the barcode scanner with that
I tried to follow the example step by step, and I've tried with VS2022 and both net6 and net7, and still get the same error , I have ZXing.net.maui installed, but it doesn't seem to recognize that: Error CS1061 'MauiAppBuilder' does not contain a definition for 'UseBarcodeReader' and no accessible extension method 'UseBarcodeReader' accepting a first argument of type 'MauiAppBuilder' could be found (are you missing a using directive or an assembly reference?) anyone has any suggestions?
Did you add the right using statement? github.com/jfversluis/MauiZxingBarcodeScannerSample/blob/main/MauiZxingBarcodeScannerSample/MauiProgram.cs#L1
Yes, I have put it in manually, but it just says that the using statement is unnecessary and does little to help me access the barcodereader. Also I can not import the namespace xmlns:zxing="clr-namespace:ZXing.Net.maui.Controls;assembly=ZXing.Net.MAUI" that you do in the MainPage. It simply does not exist, I see some other Zxing stuff but no controls. I will admit that I'm pretty new on using Maui/mobile development and mostly develops web applications, but I did try to follow what you did, namely start a new Maui application and then follow along, but it seems something is not quite right on my side. Maybe its because I use a newer version of VS 2022 and also a newer version of Zxing.Net.Maui. But like I said I have tried also with older versions as well. I know it's not of any faults of your video, but it's kind of frustrating, and not as easy as it seems in the video :)
@@jfversluis Just adding an Update - I installed the old 0.1.0-preview.5 of ZXing.Net.Maui, and it does work for me now, but if you install the latest (0.3.0-preview.1) it does not work, at least not for me. Anyways, thank for the replies and keep up the good work!
Had the same problem, just need to install ZXing.Net.Maui.Controls
@@appo100 yes it fix the error
hi this solution not work on new ios devices its work only android
I definitely have seen it working. Do you have the permissions set up correctly? Maybe check the repo for issues
What happens when my QR-code reader is showing black
Not sure I havenât seen that, sorry :(
Need put permissions AndroidManifest.xml
@@vercorsmd1 I have the permission there, if i run maui version of the the camera is black but if i run xamarin version everythings works right
Are you using NavigationPage? I have the same problem when i navigate to the page. When i just set the MainPage, it works fine.
@@simonliebers9707 i think that might be fixed in the newest release
there's no luck for me, qrcode was not detected.
Check the repo for issues. Maybe there is something in there for you that helps you fix it
@@jfversluis Yes, I have tried to use and install the repo in my local device, the camera is good but qrcode is not dectecting.
@sdo There has been an update in the meantime. Make sure you use the latest version
Hi Gerald, Nice Video,
I have one doubt?
It does not supported in MAUI ?
Xamarin.Android.Support.v7.AppCompat
This whole video is a .NET MAUI app :)
@@jfversluis Sorry Gerald, I ask this package [Xamarin.Android.Support.v7.AppCompat] is support in .NET MAUI Appđ€
Hi Gerald, I don't find this package in NuGet package manager where it is located?
It is, itâs right here www.nuget.org/packages/ZXing.Net.Maui/0.3.0-preview.1
@@jfversluis Thanks! I'm thinking to use it in my upcoming project. Do we get continues support in the upcoming version of .NET or MAUI?
@@pramodpatil4148 That's the plan!
Thank you for the video. Does this work for a Maui Blazor app? Seems like .UseBarcodeReader() it's not available for some reason.
Should definitely work! The method is called UseBarcodeReader
I get this exception 'System.ObjectDisposedException: 'Cannot access a disposed object. Object name: 'CommunityToolkit.Maui.Core.Views.MauiPopup'.'" when I return the detected code backward through close:
My code:
private void cameraView_BarcodeDetected(object sender, Camera.MAUI.ZXingHelper.BarcodeEventArgs args)
{
cameraView.BarCodeDetectionEnabled = false;
try
{
MainThread.BeginInvokeOnMainThread(() =>
{
string barcodeResult = args.Result[0].Text;
if (barcodeResult != null && barcodeResult != string.Empty)
{
Close(barcodeResult);
}
});
}
catch (Exception ex)
{
System.Console.WriteLine(ex.ToString());
}
}
I get this Java.Lang.IllegalStateException: 'Unexpected rotation value -1'
If you think there is a bug, report it on the repository!
I have the same. Did you find how to fix it?