I don't think I need to explain
barcodes or QR codes. So let me just show you how to create a barcode
scanner in .NET MAUI. But in this video, I will cheat a little bit. Even though they're very, very old,
barcodes at least, and QR codes are still very much part of our
daily lives, I would almost say especially QR codes. You can see
them on a screen or on some kind of poster or whatnot. You just
point your device at it. It will detect it automatically nowadays and it will
transport you to some kind of URL on the internet, right? So you don't have
to type out that whole thing manually, which is really cool. They're not the
most pretty thing to look at, I'll admit that. But it does the trick. And with
Barcodes, they're still on our every product, right? You go out
to a store, it just goes bleep bleep and you have to pay a lot of money and
then boom, you have this product. But they are still on every
product. It's still used widely. And that also shows because the kind of question that I almost get
asked the most when people want to transition from examine or
Xamarin Forms to down in Maui is, is there a QR and barcode scanner? And the good
news as of now is, yes, there is. It's actually the same
ZXing or Zebra crossing library that was
available for Xamarin and Xamarin.Forms that is now in progress of transitioning to .NET
MAUI. So it's still a preview version right? Now,
that's also where the cheating bit comes in a little bit. So make sure that you
watch the whole video to know what that's all about. But that library has
now been ported to .NET MAUI. And I hear a couple of
people thinking like, oh, but that plugin, I use it because
it kind of was the only one around. But it was
kind of slow, right? It didn't focus that good. But that from my
first test, shows that it's completely gone. This
is a version that is written from the ground up. It uses new APIs on the
platforms and it is super fast. So let's just not delay
any further and have a look how to use it today. So I've started
Visual Studio 2022 and let's get to some coding. I've
created a File, New .NET MAUI application. You can see
that on the left, open in Visual Studio on the right. I have the mirror of my
actual physical Android device right here, because scanning
barcodes can be done at best with a physical camera that is only
available on a physical Android device or iOS, of course. So I've got
that hooked up so that we can actually see some
barcode scanning in action in a little bit. Now, I've mentioned iOS. This
works for iOS. I've tested macOS. It works on that as well. It's
probably best if you hold up the barcode to the camera of your MacBook and not
the MacBook up to your QR code. But that's totally up to you. I think
for Windows. It's being implemented right now. So I don't think it works at the
time of recording. But there's also the barcode
generation and I think that works for all platforms. Now let's get to it. So
I've installed the NuGet package already, but let me
quickly walk you through what to look for there. Go to your solution
explorer. Right click on the project and say Manage NuGet Packages.
And you want to search for ZXing.Net.Maui. You can see I already
searched for it. Make sure to check the include prerelease checkbox right
here. And here you can see the ZXing. Net.Maui. There's a couple of
Identifiers that look very similar. Leave those behind. You want the ZXing
Net.Maui. At the time of recording. 0.1.0 preview 5
is the version. Install that and we're mostly good to
go. We need to do two more things. An
initialization line in our MauiApplication. So let's go to our MauiProgram right
here. And we have our UseMauiApp. And here we now
need to add a little line UseBarcodeReader. And whenever we do
that, whenever we use the IntelliSense suggestion, it
will add the using ZXing.Net. Maui automatically on the top. If it
doesn't do that, please add it yourself. Now you see these green squigglies
come up here, which will happen throughout this
demo. Don't worry about it. This is something that needs to be fixed on the library
side. It has to do something. It tells you that this is not
supported on Android. Whatever the target versions, it should mostly work. This
needs to be fixed on the library side. So
whenever there are new versions coming out, this should be fixed. But for now,
we're done here. And the other thing we need to do is
get the camera permission. So the permissions are requested
automatically by the ZXing plugin. But we still need to add the metadata
to our applications to actually request it. Right? So we're
running on Android now. Let me show you how to do it on Android for
iOS. I'll make sure that it's in the info.plist for iOS and macOS.
So the sample repository code can be found in
a video description. You can find it there. I'm not going to walk you
through all of that here in the video. Let's go to our Platforms
folder, our Android folder, and then find your Android manifest
for iOS and Mac Catalyst. It's this info.plist. And here there's
no graphical editor ready in Visual Studio yet. So
let me just copy this little XML thing here and change this
internet into camera. And now we're ready to request the
camera permission. So we've got all of that set up. Time to set up our
UI. Now I'm going to reuse a little bit of
the sample UI here you can create all kinds of other crazy UIs.
Let me know if that's something that you're interested in down in the
comments and I'll be sure to make a video. You can do overlays and all that kind
of stuff. But for now it's really simple. We're just going to add this
one view which is going to preview the camera and with that you can scan
barcodes. So let me get this image out of the way and I'm
going to well actually let's do this first I want to import this XML
namespace here. So xmlns:zxing. That's what I'm calling it.
Can be anything you want, but I'm going at zxing and
here I'm going to use IntelliSense to also search for ZXing. And you
want to select the ZXing.Net.Maui.Controls. So whenever we got that, we can access all the
controls that are in there. Now let me get rid of this image and I'm going to
say that zxing: and I can see the BarcodeGeneratorView which
is going to be another video. Let me know down in the comments if you're
interested. The CameraBarcodeReaderView, that's the one we want. Any more
generic CameraView which is used under the hood. So we're not going to worry
about that for now. So this barcode reader view and that's
basically all that we need. Boom. We can now scan barcodes. Well, okay, there's
a little bit more to it. I'll show you that there is a couple of
properties that we can use to influence the behavior. One of them IsDetecting. So
you basically want to toggle that to the camera. Preview will still
show up but this will say if the event for
detecting barcodes is fired. Yes or no. Basically the detecting can
be quite aggressive. It detects in every frame there's
barcodes. So if you have a scenario inside of your app where
you don't want to detect, where you pause for a little bit, then set this to
false. It's a bindable property but for now we're going to set it to true. The
other thing is, is torch enabled, so IsTorch on? So we have this little
flashlight here, right, that we can set to on. It will
show continuously and you will have a little bit more
light to scan your barcodes. Let's set it to false for now. And of course we
have this little event for barcodes detected. So at the
time of recording there's only this event.
Hopefully there will be a command so that you can enable this also for your MVVM
scenarios. Or you can use the .NET MAUI
Community Toolkit where we have the event to command behavior to hook this up and
use it inside of your MVVM pattern. But for now I'm just going to use this
event and here let me give this label a name so we
can actually show this in a little label right here that
we can catch the value of the QR code that we just can and see what
it actually says. So barcode results, let's put that in
here. And actually let's give this barcode reader a little name as well,
x name because I'm going to use that for something
else right here. x:name barcodeReader. Okay, so we got that set up.
Let's give this little width and height actually so that it shows up. I think it gets a width
and height automatically and you can do all kinds of other layout
things of course, but now I just know that it will show up. So we got
that. Now let's go to our code behind our MainPage.xaml.cs
and we should have this generated event right here.
Now what I can do is say barcodeResult. Text, which is our label, and I can
set that to e.Results. And this is multiple, right?
So you can scan multiple barcodes in one go. Basically I'm
going to focus on one for now, but you can detect multiple inside of your
preview thingy. So I'm just going to select this first one. So this is a
collection and then you can inspect from one result, one barcode, the value, the
raw, so that's the raw data points of interest. The format that is
detected is it a QR code, ean13. And we have some
metadata here. So there's all kinds of properties that you can work with.
Typically you're probably interested in the value that's just the thing
that's inside of your barcode. And this all comes from the BarcodeDetectionEventArgs.
So that holds all the information about the scan that just happened. So
whenever you do this, the barcode scanning
happens on a background thread and whenever you want to update the UI,
you need to do that on the main thread else it will crash. So for
Xamarin.Forms you need to do that with Device.Begin
InvokeOnMainThread. Here we have the Dispatcher.Dispatch you can
also do. IsDispatchRequired to first check if
it's actually required, but I know it is, so I'm just going to
implement it this way. Let me do it like this. So now it dispatches and it goes on
our main thread and it doesn't crash. So that is basically what we want to
do here. Let's add the format here as well. So we have a little bit
more data to work with. Little string interpolation like that. Another e.Results[0].Format. So now we see the value and
the format of the QR code. Now before we actually go
inspect if this works, let me show you the other thing why I give a
little reference to the barcode reader element. So we have this
barcode reader options and if you've been working
with this plugin on Xamarin and Xamarin Forms, we have
this Options with a couple of more options, right? That makes sense. Is new
Barcode ReaderPptions. So in here we have a
couple of properties which is let me show it up here in the
IntelliSense, hopefully. Visual Studio, work with me
please. Here we go. So the AutoRotate and AutoRotate, I
think if you are holding your phone upside down against
the barcode, it will try to rotate it and still get the value. The
formats, you can say which formats it should actually scan, it should
actually act on. So if you only want to scan QR code, set it to QR and it will only detect the QR code. So, you know, you
don't get any other data in there. Multiple. So you can do multiple from
the same kind of like preview that's inside of the camera. You will get
multiple results. That's why we have that results collection. You have to adapt
your code to loop through the different results. And the TryHarder is a bit
of a funny one. So the ZXing library is something that is a
third party, basically, and that property comes from them. And I think it does
some extra magic to actually detect. It tries harder to detect the
barcodes. So if you want to make sure what that is all about,
check the documentation. But what I wanted to actually show you is the
format here. So we have all these formats and you can just set one
format here. So code 39, code 93, ean QR code and it will just
pick up on that. And this comes from the barcode format
enum. But we also have a barcode format S format, which has a couple of grouped ones. So we also
can set all which detects all barcodes. I think that's the default. We can do
two dimensional, so they're grouped with two dimensional barcode types and one
dimensional so that it will only pick up on those. So that's basically what
you can do. You can totally also set this from XAML if that's what you
want. But I just wanted to show you this little bit as well. Now let me
just deploy this to our physical device and we're going to
see our actual application show up here and we can actually start
scanning barcodes. So here we are. The application is
being deployed. Let me pick up my actual physical device here and
point it at something not embarrassing here on my
desk. So here we are. If you're running this for the first
time, I've been trying out the demo. You would see like the camera
permission pop up here. But I've already accepted that. So here we have this little
thing. The whole world is overlapping. Here the label, which is kind of not
great because now you can't really read what's in there, probably.
But let's see if it actually works. So I'm going to point it at this QR
code that I've got here and boom, you can see it says, don't
forget to subscribe which is pretty amazing. And it says format QR
code. So I don't know what you want to subscribe to, but this is your
reminder to do it. And that is kind of like how to implement barcode
scanning in .NET MAUI. But before I let you go, I cheated a
little bit, right? So I need to explain a little bit
about that as well. Let me just stop this right here so I don't have
to point this camera all the time. I cheated a little bit because the
plug in is a preview, right? So there is a couple
of box, there's basically two blockers that are run into one we have a workaround
for the other one not. But the good news is for both of them we have
a PR open. So it should be included in the next preview. Now
let's go back to our MauiProgram. And if you look closely, I had this little hidden region here. So
what this does is configure handlers. This is something from .NET MAUI. And
I manually added the handlers for this little plugin to this .NET MAUI application because there is a
little bug in there and because of that it seemed to all just work. But whenever
you pointed your camera at a QR code, it would do nothing. So this is
the workaround. I'll make sure to put that in the code repository that's
linked in the video description. There is a PR open to fix this inside
of the package. The other thing is the one dimensional, so just little
bars, the one dimensional bar codes could not be scanned. If you
do not put your phone in landscape, it would only do it in
landscape, it would not do it in portrait. Now I did a little
debugging and I found out what the cause is. So I opened the PR
for that. There is unfortunately not a workaround for that right now.
So you're going to have to wait for the next release of the package.
The good news is it works for QR codes, it works for 2D barcode
formats. So just test it with a QR code for now. If you know
that works, then all the plumbing has been set up. You know that it will
work in your code as well with 1D barcodes if that's what
you need. But you'll have to wait until it's merged and for
the next update. So yeah, that's how to work with barcode
scanning in .NET MAUI. I'm sorry, I hope you can forgive me for cheating
a little bit. At least I came clean, right? I told you what it's all
about. So this is how to get started with barcode scanning in .NET
MAUI. I hope this benefits you. And now you can transform all your Xamarin.Forms applications to
.NET MAUI because now also this plugin has been made available for
.NET MAUI and you can use it to scan your barcodes. So right
now, I've tested this for iOS, macOS, Android. I think
Windows is not quite there yet so make sure to follow me on the
socials so that I will tweet out whenever the new version is
available and you will pick up on that and you can start testing the new things
that are in there. Make sure to like this video if you've actually liked it
so that it spreads to more people and more people will know to now upgrade
their .NET MAUI application with this wonderful barcode scanner. If you are
interested in generating also barcodes with this same package, make sure to
check out this video. Or if you just want to see some other
.NET MAUI content, make sure to check out this playlist and click this button to
see if you're subscribed and I'll see you for the next one.
