Oh, Gerald, another video on barcode
scanning?! Yes, because I like options! So in this video, we're
going to look at a last option for how to scan barcodes in your .NET
MAUI app. In an earlier video, I showed you
Camera.MAUI, which is a plugin that allows you to
have a camera view inside of your .NET MAUI application. But besides
taking snapshot, taking pictures, this, it can also
scan barcode also based on ZXing or Zebra Crossing. Just like the ZXing
MAUI plugin that there already is. But this one
implements that as well. So I like options. You can have options. So
let's look at how to implement that with this specific
plugin. Because it's very, very easy. If you haven't watched the
other video, I highly recommend that you do that first. Because there I will
talk about how to install the plugin, how to initialize it and do all that
stuff. This is just focusing on scanning the actual barcode. So I'm
going to hop over to my screen share right here and show you how to get
started with that. So, here we are in Visual Studio 2022. I already set
up a new .NET MAUI project. I already arranged some
couple of things. Like I already mentioned in the previous video, I went over to
how to implement this camera view. So that's kind of like where we're
leaving off. If I just run this application real quick, then you will
see that we have the little camera view with which you can take pictures, if
that's what you want, but we can show the camera. So, our application is
coming up here and we should see this little live view of the camera preview right
here. So you will get a little backstage thing here. Let me just get myself out
of the way. You can see it asks for the permissions, let's say,
while using the app. And you can say that I have this
camera preview, right? So you can do all these things. Okay,
so with that in place, we can now implement the
barcode scanner which is also available out of the box. Before we go
into that, let me show you quickly the steps that I took here. So in your
Solution Explorer, right click on your project do Manage NuGet
Packages. And here you will install the Camera.MAUI plugin. You can see it right here. 1.2.1 is the version at the time of recording. So install
that, go check out the repository, leave a star on that. If you like this
project, then in your MauiProgram, make sure that you
have this. UseMauiCamera View right here. So add that, you will
need this using Camera Maui. This will initialize the plugin
and you will have that. And of course then you need to add the permissions
for the actual camera each for the platforms folder, right? So
here we have on Android, the Android manifest file. If I open that with the
XML editor. Then you can see that I added the
camera right here for iOS Macatalyst, for Windows. You need to add this to
your metadata so that the permission will come up, the permission request for
the user that we've just seen to ask for usage of the camera. So now to
implement the barcode scanner, basically
everything is set up for this already. There is two things that you need to do to get
the basic setup going. So you can say barcode scanning, barcode
detection enabled is true. That seems important.
So we have that you can set it to true or false,
depending on what you need. And then we have this event for barcode
detected. Now if you want to use this with MVVM as well, then you can bind
to this barcode results, which is a bindable property.
And whenever new results come in, that property will be
updated. So you can catch that in a MVVM way. If that's something that you're
interested in, I'm not going to show it right now. But if you can't figure it
out, let me know down in the comments, I'll answer you or I'll make
a little new video about it. I'm going to use it with the barcode
detected. And you can see there's a couple of more options, right? So you
can set the frame rate, you can set more barcode options. We'll look into
that in a little bit more. So there's a couple of things that you
can do here. But I'm going to implement this barcode detected, which
is an event. So this generates a new event here in the code behind.
And you can see here already the code for the camera
view, right? So I finished setting that up here, implementing it in
XAML. And here you have to do the cameras loaded. You have to check out the
previous video also why this weird workaround is in here. Someone left in the
comments, by the way, that you should also be able to do thread no, not thread, Task.Delay. Task. Oh my gosh, I forgot how to type Task.Delay(500);
And that you could fix the start camera with this as
well. The stop and start works for me. So I'm just going
to leave it like this. But with a little task delay, it should be able
to work when the camera doesn't start right away as well. So,
little tip right here. But we're focusing on the barcode. So we have
the barcodes right here and whenever this happens, so a barcode is detected
inside of your view, we have to do something with the main
thread at least if you want to update the UI. So I could easily do a
Console.WriteLine right here and just do that in the
console output. But let's make it a little bit
more visible. And I'm going to add a little label here on the top. Label
with a name so that I can reference it. Barcode result. And let's make the font size 20 so that you can
see it. Okay, so we have that a label that
we can use. But if you want to update something in
the UI, the barcode scanner happens on a background thread. So you want to
make sure that you're doing it on the main thread so that the UI actually
gets updated. So we have helpers for that in .NET MAUI already.
We can do MainThread. BeginInvokeOnMainThread. And here
we can do then Label, sorry, barcodeResult. Text = and then we have the args
here. So the arguments that are coming in the barcode event,
args.Result. And this is an array of multiple
results. You can scan multiple results in one go. That's one of the options. But
I'm just going to assume there's always one text. And you have like other
things, right? You have the points, you have the barcode formats
which will detect what kind of format it is. Actually, let's put that in there
here as well. I'm going to do a little string interpolation here. So
we're going to say arcs barcode format and then
semicolon. And then I'm going to say the actual barcode. Arcs result. Oh, forgot the curly braces. Arcs
result, zero text, right? So I get the actual
text results from that thing as well. So we
will get the barcode format that is detected and then the actual text in
here. So we got that. And then I need to close this device begin invoke our main thread. So we
have that. So now it's going to run in the main thread and it's going to
update my text whenever it detects a barcode. So let's just
quickly check that out. I'm going to run this. So I don't think I mentioned
it, but this is my physical device that is
mirrored here on the right side of your screen. I have this right here
because testing these things with a physical camera typically just works best
because you have an actual camera right here. So we have our camera here. No need
for the permission because I already did that. I have this random barcode lying
around here. So if I bring that in the camera, then you will see it
picks up on code 39 and it gives the actual value. And you
can see it's correct because it's printed down below there.
So we've got that. And I got this barcode, this QR code actually
here on the other monitor. So really behind the scenes footage
here. And if I go to that, you can see that it should pick up on that as
well. And it said, well, QR code, don't forget to like and
subscribe. Well, isn't that convenient? Maybe there is something that you want
to like and subscribe. Please do it now. I would very much appreciate it. So
you can see QR codes, regular barcodes. It just scans
it and it scans it pretty quickly, right? So that's pretty cool and it
just does that out of the box. Now I promise you there would be
multiple options. So you can set also some camera view options with the barcode
options. So if I go to camera view, which is the field that I have here
for the camera view, right. So I have this camera view
which is named camera view and I'm going to get into that and I say barcode options which is an object of
the type barcode options, probably barcode
decode options. So I'm going to create a new one for that. And with this I can
customize the options for the barcode scanning. So it has a bunch of
properties. Auto rotates which will try to rotate the QR code that if
I'm doing this in landscape or whatnot, it's going to auto rotate
it to better detect the barcode in here the character set you can do
with that possible format. So if you just want to scan only QR
codes, you can go to ZXing barcode format and here you
can also see all the formats that are supported. So Aztec code 39, I don't even know what half of these
are but you can say if you only want to have QR codes, just say
hey, I just want to have QR codes or maybe only the ones that we
just saw. So QR code and code 39, I think now it will only scan
these two, right? So the rest will be ignored. It
will only scan these two. What else do we got? Pure barcode. To be honest,
I'm not even sure what that means. So go look that up in the ZXing
documentation, read multiple barcodes. So can it read more from
kind of one frame? Try harder which is always a funny property like hey,
should it try harder? I don't know what it does behind the scenes but it will try
harder to detect the barcode and try invert it. It tries to invert the
colors for if you have maybe funky colored barcodes or anything like that. So
that's all options that you can work with. But you don't necessarily have to
because you can see just hooking up that event and setting it to true makes it
scanning already. So that is pretty awesome and that's
how easy it is to get started with this barcode scanner with the camera
.NET MAUI plugin. Another option, another great option to scan barcode
with your .NET MAUI app. I already made a couple of videos
about other ones. One is already based on ZXing as well,
the other one is based on Google Vision ML kit. So I will post the
links down below in the video description and the comments. So make
sure to check those out if barcodes are something that you are very
interested in. But I think this is a great option. It seems a little bit more
performant than the other ZXing plugin? I don't know, it runs on the
same background. And also I see some people mention like hey, the more well
known ZXing plugin can't scan QR codes on certain
devices. On my device, the Samsung one, it seems to scan
fine. But if you have any problems, please let me know down in the
comments below. Like I said, look up the repository for this plugin, star it
and of course, while you are starring and liking things anyway, like this video,
subscribe to my channel and I'll be seeing you for my next video. Maybe
one from this playlist right here with all kinds of .NET MAUI
videos or this highly recommended video just for you. See you on the
other side.
