I already have a couple of videos on
barcode scanning, but there's always room for one more. So I'm going to
talk about the Google vision. ML ML ML ML ML kit barcode scanner. Barcode scanner. Still part of our
daily lives. It's still on virtually every product that you put your hands
on. It will have a barcode and Isbn code for books and that kind
of stuff. So it only makes sense that I still
get a lot of questions like hey, how do I do a barcode scanner? And for
Xamarin and Dotnet Maui there was always the obvious
option, right? You have the Zxing or zebra crossing or whatever you want
to call it. But there is other alternatives out there as
well. And Jimmy Pun or Jimmy Poon. Sorry if I pronounce it
incorrectly. Jimmy has been doing some great work based on the
Google Vision ML Kit. So the machine learning kit which also
allows you to scan barcodes. So he also has created
this plugin for Xamarin. But now he's making the transition to
.NET MAUI as well. So that's really great. And in this video, we're going
to see how to use that plugin in learn .NET MAUI application and get
started with barcode scanner inside of your own application. As
always, I've started my favorite tool in the entire world, visual Studio 2022.
And I just created a file. New net Maui application. I
already did some setup for you, which is not the most
exciting stuff. So I will just point it out. But you will know how to do it
yourself. So the first thing that you want to do is install the
nuget package and you can go to the Solution Explorer right
click and do manage nuget packages. In this case though, there
is one thing that is really good to know because I had some trouble
installing this. It would give me some kind of cryptic error with some file, a h file
which it couldn't really find. But typically you should go to
browse and do barcode scanner. Mobile Maui. Make sure that
you click the include prereleases because I think there's
only a prerelease version out right now. And you can just click Install and it
will install automatically. It will bring in some dependencies. It's only
supported on Android and iOS. So other platforms you will have to
find out something else. But iOS and Android is typically the
devices. I would think that you would ML ML ML ML ML kit barcode scanner
would happen if I clicked install It did a little
weird error in my output. It wouldn't install. And I think it
has to do with the long paths in Windows. So on a Mac
you will probably get away with it, but on
Windows the paths get too long and it will get like, I don't know, messed
up and won't do it. So what I did is open a Powershell here
terminal inside of Visual Studio so you can just do, I
think here, view terminal and you can bring that up. And the
command oh, I thought the command was going to be in here. It's
not. So let me just paste it in here and this will open it up in
the right folder. So this is my project folder. I actually need to
go to the project file. So here you can see like the CS proge file and
what you want to do, you can also do that
in another terminal window if you want. But what you want to do is put
in something like this command. Let me see if I can bring that up a
little bit for you. It will be a little bit clearer. It's
probably going to say that I already added it now, but net
add package and then the package Identifier and then
prerelease because we only have pre releases
here. So we want to have that in there. And because I have some multiple nuget
sources, I wanted to make sure to do S or source is and then you can
specify the source that it should use. So in this
case, it's just the regular NuGet.org API. You don't need to worry about it
if you don't have any other sources on your machine and that will add it
to your project. And suddenly this didn't do the error.
So that's a little pro tip right here. Whenever you run in errors, you
could still use net add package to see if it installs that way or just
manually insert it into your CS Prox. That's
definitely an option as well. So now with this installed, we're
ready to go. But there is some other things. We're going to use
the camera, right? And whenever you're going to use the camera, we need to
have permissions. So let's go into the Solution Explorer again to the
platforms folder. And then for Android, we have this Android manifesto, XML.
I'm going to right click and open it with the XML editor. You can also use
the graphical editor. But here we need to add the vibrate. I
will get to that in a minute. The flashlight and the
camera. So we need these three to make it work. There is some other
permissions because you can also with this package scan barcodes from existing
images, which is really cool. I'm not going to
go into that in this video. Let me know down in the comments if
that's something that you want to see now. The same we did, of course for
iOS. For iOS we have a different permission system. It's in the Info PL
list under the iOS folder. Again, I'm going to go to the
XML editor. You can see it down here. And we have this NS camera usage
description. And you have to provide a description on why you
would like to use the camera. I'm going to show you
this on Android, but I will make sure that the iOS code is on
the repository. That is the link is down in the video description as
well. So you can just use that. So, okay, almost there. We got the
permissions, we installed the nugget package. Then typically what you want
to do, especially if you're using UI elements, is set up the handlers. So
let's go over, let's close this platforms folder and
let's go over to the Mauiprogram CS. And here we want to add a little
bit of code. So I'm going to copy this from
off screen. I'm going to paste this here after the
configure fonts but before the semicolon. And you can see that we do
these configure Maui handlers which is something that is
built in. I can actually do this on the next line. And we have these handlers
coming in and handlers add barcode scanner handler. So Jimmy used this way to set it up. Typically
what you would also see is have like an extension method right on this
level where you do use whatever use Maui compatibility, right? That's
typically the pattern that you see also for third party
libraries. But Jimmy set it up with the handlers which is a little bit
more low level, perfectly fine works as well. So we got that in place and now
actually we can start setting up our barcode scanner. So that's
really cool. So I'm going to go to my main page, Xaml first. And what you
want to do is add the right namespace, right? So that's
something that you always want to do. And we're going to do that here, XML
and S and we're going to do that GV just because it's my initials, Gerald
Slouch, but also because it's Google Vision. That's probably the
reason I guess. And we're going to search for the
barcode scanner, right? So barcode scanner mobile,
that's the one that you want to have and it will
fill it all in automatically. And then we have this GV namespace
thing. So I'm just going to remove everything
here inside of this vertical stack layout and I'm going to add the camera
view here. So we have now the GV and then we have this camera view
and on this we have a bunch of properties and
APIs and all the things that we can use. And
the really cool thing, I think this is also a little bit different from
the Zxing library is that a lot of this is also available for MVVM
usage. So we have like little things
vibration, undetected. So whenever it detects a
barcode it will vibrate so that you know something happened,
right, is visible, obviously is scanning, right? So if
it's actually scanning for barcodes actively right now, yes or
no. And we have a command as well, like undetected command.
Again, this is something that I don't think the Zxing plugin has. It only has the
event. But with this you can also do the command and
you will get the results there as well. I'm going to take the easy route
and still use events right here. But you can definitely use all
of this to do it in Mvpm again. If there's something that
you want to know in a follow up video or a blog post or something like that,
let me know down in the comments. I'm going to paste a bunch of
properties here. So I'm going to do the horizontal options, the
vertical options, so that it shows nicely. The undetected is the event that we're
going to use the torch on. So that's like if the light is on,
that's why we needed that flashlight permission. Vibration undetected, I'm
going to set that to false. Here is a little quote that
went wrong. Scan intervals, you can have an interval between the scans.
Make sure that it's not too close to each other because you will have
like duplicate scans or you should detect if you are finding duplicates yes or no.
And of course the X name to reference it by this name right here
the camera. So that we have a little field that we can
reference this visual element by. Okay, so we have that in place. Let's go to
this undetected and let's create a new event here. Just doing the
little intellisense control space will give me a new one,
camera undetected. And then I can go to my code behind
the main page, xaml CS. Let's remove this counterclick because
I removed all the default template stuff. And I have this event right
here which will give me the undetected event arcs for the mobile
scanner. So that has data on what is the actual data that has
been discovered. But before we go into that, let's do in the
constructor a couple of things. So we have the barcode scanner. Barcode scanner. There's a couple of options here. So mobile
methods, set, supported, barcode format. So
with this you can set the barcode format so you can see what
it supports here. Code one, two, eight, code 39. Well,
you can read them off for yourself. QR codes, obviously. So all these
different variations, you can scan that. But if you only
want to do QR codes, you can set all QR codes. Or if you want to
have multiple, you can do this pipe sign and then you can add the
next one. So now we can do QR codes and code 39, right? So we
have that. I'm not going to use this. I
will leave this here in a comment so that you know how to do it. You
need to do this before initializing the barcode scanner. So actually we
might want to move it here or set it somewhere in your Maui program
or something like that because it needs to happen before that camera view is
initialized. And this initialized component is what inflates the whole Xaml stuff,
right? So if you want to do that, set it before the initialized
component on your page and you should be good to go. The other thing that you want
to do is ask the permission for the camera. Now you can use the
essential APIs in Maui itself to do that if that's what
you want. But this barcode scanner library also has it on board for you to use.
So what you can do for that is, again, barcode scanner mobile methods ask for required permission. And it's
actually like an awaitable task. So you should probably await it. You
can actually get the result because it returns a bool. So you can find the
actual result of the user pressing yes or no. So
that's probably something that you want to do in real code. For now, I'm
just going to trigger it and kind of assume that the person clicks
allow, which is what I'm going to do. So it should be all good. So I've got
that in there. The important thing that you probably
want to do, you can also do it like in this event. But the thing that you
want to do because undetected, no, you can't actually do it on the
undetected. I shouldn't go off script here because if you do it on the
undetected, that assumes that the camera was already scanning and the camera is
already on. So you need to find some way that suits your app to actually find
the required permissions. You can do that on the app startup. You can do it
wherever. So camera undetected. Now we have all the
permissions that's coming up. Undetected we want to do something as well. So let's just
copy some code here. Again, so you don't want to watch me
type all the time. Here we have a list of barcode result,
which is an object that is built into this library. So a
barcode result, which probably has a nice thing. Actually, it comes from like this. E.
So the undetected event arcs here, e barcode results. And let's
just take the first one so that we get the intellisense and you can
see that it has all these things. The display value, which is just a
string. So that's probably the readable human readable string. The raw value,
which has like, I don't know, a more raw value for
barcodes, the actual format that it detected, the type, the corner
points. So this is really advanced stuff. You can find the
corner points and you can do all these kinds of things here, right? So we have all
that all the data that you would expect. And you probably more than you
need from any barcode. We're going to get the results. This tells me it has like the undetected event arcs has a
list of results. So that tells me that it can detect
multiple barcodes from like, one frame. That's really cool, right?
You can detect more than one. And we're going to loop through all
the results and we're going to add that to some kind of string right here
and say, hey, this is the type, this is the display value and we're
going to do a new line. And then on our UI thread, because if you want
to do something with the UI, we have to do it on the UI thread. You
can use the dispatcher we're going to do await display alert and
we're going to show that result string that we've built up. And then
we're going to set the camera to is scanning again. I took this code from
like the repository. So is scanning, it probably sets it to
false. Then maybe if it's scanned one time and then you
have to reset it to redo the scanning again so we can loop this kind of through. So I have connected
my physical Android device so let's just deploy it to that. And I mean for obvious reasons.
Because if you're going to use the Emulator, the simulator, then
you don't really have a camera that you can use,
right? So I'm going to use my physical device. You should see the
camera pop up here and then you can actually see how this is going
to scan a barcode right here. So here we go. I
put my physical screen mirroring of my Android device here on
the right. So let me get myself out of the way. You can see
that it actually starts asking for the permissions because I
put that ask for required permissions in the constructor. So I'm going to say
while using the app, which is fine. And then you can see
that the actual image is loading right. So you can see my keyboard a little
behind the scenes right here you can see my screen and here I have this
wonderful book by Jamie Angstrom. I have a nice discount code
for you at the end of this video so make sure to stay
tuned. But more importantly, this has a barcode on the back. So if I just scan that you can see it right
here. Boom. It says Isbn and a value of yada yada yada, which
is the actual Isbn value. And if I do it again, you can see it
does it again. And I actually see that there is also a QR
codes. Let's try if it takes that one too. And you can see boom, the URL
value packed up link from the publisher and it goes to this
thing. So it both scans like the QR code and the Isbn
code from there as well. And we have implemented
a fully functional barcode scanner in our Net Maui application. So this
is just an alternative to the Zxing zebra crossing plugin that
we already have available for Net Maui. I didn't really go into
measuring all kinds of things very specifically, but
I think this one feels slightly faster. And the other kind of more
clear advantages is apparently you can scan multiple barcodes in one
frame. I didn't really try it, but it seems that that should be
possible. It's more suited for your MVVM scenarios and you can do just amazing
stuff scanning barcodes with all of this. So I
promised you just now that I would have a cool discount for you for this book
on Blazor by Jimmy Angstrom. He's from Sweden
and he is really amazing. He knows his stuff. This is already the second
edition, so fully up to date with all the latest and greatest. I got my hard
copy right here, but I was able to offer you a discount code
as well, especially for this channel. It should be popping up
on your screen right now, so make sure you get it. It runs until the end of
April 2023. So if you're watching this video after
that, it's no longer going to be possible. But before that, make sure
to get this discount code and check it out. Do you want to see more
Blazor content on this page? I'll be sure to read this book and
maybe publish some videos about that as well. For the rest, make sure to let
me know. Do you like Zxing? Do you like this plugin?
Have you been using it? What do you like about it? And if you
want to learn about ML ML Kit barcode scanner, that's a
pretty cool feature as well. For the rest, I'll be seeing you for
my next actually, talking about my next video, check out this playlist with
amazing Dan and Maui videos. This playlist with more done in Maui
plugins that will make your life easier. Don't forget to like and subscribe.
See you for the next one our channel.
