More and more amazing .NET MAUI
plugins are being created. And in this video we're going to look
at Camera.MAUI which is a camera view that you can use inside of
your .NET MAUI application. There are already plenty of options to
use the camera in your .NET MAUI application. The most obvious one
is the MediaPicker that's built into .NET MAUI directly. You can use
that to take an image, pick something from the gallery, do
all these kinds of amazing things. We have ZXing, Zebra Crossing or the Google
Vision ML Kit based barcode scanning. They both do
something with barcode scanning. I have videos on all of these. I will put them down
below in the description or in the comments. So go check that out.
But now we have this new one which is the Camera.MAUI which is
basically a CameraView. We've been trying to create that for
the .NET MAUI Community Toolkit as well. We're still working on that. But
now in the meantime, we have this other great option and that's what we're
going to look at in this video. This also does the barcode scanning based on
Zebra Crossings, ZXing. It also does barcode generation. I'm
not going to focus on that. If you want to know more about
that in the context of this plugin, please let me know down in the
comments. But I'm going to focus on the camera view and what you can do with
that one, how you can incorporate that in your project. So let's just hop
over to Visual Studio and let's go check it out before we
dive straight into Visual Studio 2022. Here is the repository for this
plugin, hjam40, which is apparently the alias for Hector
Alonso. Thank you so much for putting this together, Hector. So if you find
yourself here and you want to support Hector for his great work, see if you can
sponsor him on GitHub or at the very least star this repository here
in the top right so that he knows that you're watching,
that you appreciate his work. Now here in the README you
will find all the features. You will find how to set it up, but
don't worry about that. I'm going to show you that in this video. But
you can see all these features across all these platforms. Basically only
Tizon is missing, which is really great. Well, it's not great that it's
missing, but it's really great that all the other platforms are supported. Android. iOS.
macOS and Windows. You can see the preview, you can
mirror the preview if that's what you want. You can do the flash, you can take a
snapshot, save the snapshot. And with this one, you can also do the
barcode detection and decode. Like I already said, I'm not going to
focus on that. But you can definitely do it with this plugin as well. So
this goes all about what you need to do to set it up. Don't worry about
that. If you want more detail definitely go there. But I'm going to
show you right now. So let's click this away after you've starred it. And here we
can see a File, New .NET MAUI application in
Visual Studio 2022 on the left. I've mirrored my physical
device which I got right here on the right. You can do that with the
Phone Link app that's built into Windows so that we can actually see
some actual camera action. So that being said, let's go to our
Solution Explorer and then in our project right click and do
Manage NuGet Packages. Now I already installed it so here is
the Camera.MAUI version 1.2.1 at the time of
recording, make sure that you install that one and it brings in a couple of
dependencies and all whatnot, but you have that and after
you've installed it there is a couple of things that you
need to do to initialize it. So install it, go to your Solution
Explorer again and then into your MauiProgram. And here we have to
add a little line to our app builder. That's how it goes with
the plugins these days. We have this UseMauiCameraView which you need
the using Camera.MAUI; for first but it will add that
automatically. So UseMauiCameraView() and that's all you need to do. But
also for the camera we need the permissions. So we need to
go back to our Solution Explorer, go into the Platforms folder and then
for each of these platforms we need to set the permissions. Go back to the
readme of the repository for all the details. Basically you just
need to go to the Android one double click on the AndroidManifest.
I think you can get all the required permissions. We have this
little graphical editor now so you will need to find the Camera one
here. You can also open it with the XML editor and enter it manually. For
iOS and Mac Catalyst you need to go into the
info.plist and again you can find the permissions right here as
well. I don't think it's in a graphical editor yet but you can figure that
out. So make sure that the permissions are there. Go to the repository, to the
sample code on the GitHub repository that's linked to this video. All the links
can be found below in the video description or the comment down below. So with
that all in place, let's go do some actual fun things. So
I'm going to remove everything inside of this Vertical
StackLayout and I'm going to add my CameraView right here. So
first we need to add this XML namespace, I'm going to name it xmlns:cv
for Camera View, = Camera.MAUI. So just find this one with the
IntelliSense and it will fill in all the right details for you. So we got that
in place and now what you can do is cv and you can see that
BarcodeImage right to do the actual barcodes or the
CameraView, which is the one that I want. And we can do x:Name so I can
reference it from the code behind as well. I'm going to give
this a little WidthRequest of 300, a HeightRequest of 300. And actually so what you might want to
do, I've seen that in a couple of samples. I'm not
sure if this is something that's necessary, but for the VerticalStackLayout you
might want to do these Vertical Options="Fill" and also for the
horizontal one so that it actually fills the space
nicely so that we can actually see this camera view showing
up. Again, I'm not really sure if that's necessary, but that's
something that I saw in the sample. So let's just mimic it for now to be on the
safe side. And we got all that in place. And the funny thing
here is if we go look at the CameraView APIs, something that's
obvious is some APIs that have camera in it. So we see the
Camera, which is the selected camera. Because these devices can have
multiple cameras, right? We have one on the back and the front and maybe some more. So
this is the actual selected camera right now. So you can
switch between them. If you go to the sample app in this repository that I just showed you, there is a sample app
and there is an actual picker that will allow you to switch between
the different cameras. And you can do so with the Cameras collection that's
also on the camera view. So when the camera view is loaded, it will go through all
the cameras on your device and put them in this list.
CameraView.Cameras you can go through them if that's what
you want. We also have this event CamerasLoaded so whenever the cameras
are loaded, whenever that Cameras collection is populated,
you can go there and you can actually select
the camera that you want. So let's set that up because this is how you
initialize this CameraView. And I'm going to create a new event handler with the
CameraView.CamerasLoaded, go to my code behind. I'm going to
remove this OnCounterClicked code because we don't have that anymore.
And here in my cameraView_ CamerasLoaded, I can say cameraView
.Camera which is the selected one. And I can
now do is cameraView.Cameras.First(); So I'm going to use a
little LINQ query here to get the first camera.
You can also use it as with the index so you can just say
0 here to actually select the first one. And
you probably want to check if there actually is one, but this will select
the camera. So we've got that in place. And what
we need to do now is actually start the camera, right? So you need
to do that on the main thread so I can do MainThread.BeginInvokeoOnMainThread() and there we have it. So do this and what I want to do here is then say
actually you need to await it. That's very important. If you don't do
that it's not going to work. cameraView.Camera... Well actually I think you can do
StartCamera immediately from here. So we can just say StartCameraAsync() so we can
just do that. Now there's one weird thing which seems to be specific
to Samsung devices. There is an issue on the repository
this way just starting the camera doesn't work. It works for
most Android devices but not for my Samsung device that I got right here.
What you can do to work around it is say StopCameraAsync() first, I
don't know and then start the camera and then it suddenly
starts working. So I've got all this. And actually, the cool thing here is
if you do that StartCameraAsync() if you want to have a little bit more
control, you can do var result is because this will actually return some
kind of result thing. So I can check if result is. And then you can have this camera
result. So success access denied, no camera selected. So
you have a couple of different scenarios that might be going on here. So you
want to check that if you're actually starting this. For now I'm
just going to follow the happy path and not worry about this. And if
we actually deploy this application then we should see our application
coming up. It's going to ask me for the permission that's built into
the plugin right here. It's going to take care of that for
you and then we should see our actual camera preview. So the
application here is loading up while I'm talking about it. It's going
to ask me for the permission only this time. And here we go, here we
have our camera so you can see again a little behind the
scenes that is happening in my videos from time to time. And you
can see that camera preview right here so you can see my
keyboard and my mouse. So we got this camera view working.
That's pretty cool but what can we do with this? Now let's
add a little button. I'm just going to show you this snapshot thing
right here because now we have this camera view, this camera
preview and let's take a little photo with that right, a little
picture. So we're going to add a button and let's call that text smile and we can do the clicked command. So
create a new event handler right here. And now we should have this button and
actually also let's add an image with a name so that I can
reference it my image. And there we have it. Maybe give that a little width and
height as well. 200, not too big, 200 just to get the
idea. So we got that. So we will have the
camera view, a button and an image. And let's see if we can load an
image inside of that image, right? So here for the button, what we can do is say Camera
View and let's inspect the APIs actually here. So you're
going to see a lot of exclamation marks. I think something is wrong with my
Windows setup. It does work on Windows, but it will say that the APIs are not
available on Windows. I don't really know why you have this feature of the
auto snapshot. So you can take snapshots
automatically with some kind of interval. You can see here the seconds. So you
can set a number of seconds in which intervals in which snapshots
will be taken and it will be automatically updated, which is really cool. So you
can just do that barcode detected with all kinds of options for like, hey,
how fast, what is the frame rate? Should it be enabled? What are the
options, et cetera, et cetera. So we got all that, the cameraview loaded, we've
seen that and there is much, much more. But the ones that
we're actually after is in the snapshot. So you can see some
snapshot, the stream, an image source, you can get that here
from the auto snapshot. Or you can just say, hey, take get snapshot and
save snapshot, right? So the get one just provides
you with an image source that you can use inside of the actual image. And
the save snapshot will give you that same snapshot. But now it
will save it to the path that you can specify with this
thing. So you can also automatically save that to disk from right here. That's
pretty cool. Get snapshot, let's just do that. And it's going to
give us an image source. So I can just hook that up to my image
source is get snapshot, which is really cool.
And I can specify in which image format, which can be
JPEG or PNG. PNG is the default, but let's specify it
anyway. So whenever I click the button now, it should load that in my
image control. So let's see if that actually works. And then we
got our basics for this camera view working. There
definitely is some things here and some room for improvements as well,
which I'll get to in a little bit. But this is already a pretty solid
camera view that you can use right here. So let's
just get back in here. Let's do it while using the app. Okay,
so we got that. Let's do 24.7k subscribers, which is really cool.
Smile. Boom. And there we see we have the snapshot in our actual
image control. You can just do it like that and with
like the interval you can maybe create some kind of cool webcam for
your home or I don't know what you can come up with. Crazy
ideas. Let me know down in the comments. But this is a very cool
camera view that you can use inside of your
.NET MAUI application. All right, basically a short and sweet plugin
that you can use inside of your .NET MAUI application right now. And one of the
things that a lot of people I think would love to
see is get access to kind of like that raw camera feed so
that you can hook up actual analysis there. So if you have
that camera feed and you can actually access the raw frames in
there so that you can hook it up to all kinds of AI things and detect
faces in there or detect objects in there, which is something
that people really want. So if we can make that happen, Hector, that would be
really cool. Or on the .NET MAUI Community Toolkit, we are working
on that there as well. But other than that, this already works pretty well.
And kind of like the advantage is we have the media picker in Maui but
that will give you a full screen UI, which is
somewhat customizable but not really. And with this camera view,
you can take the images but it's fully customizable. You can just make it
this little block inside of your application. You can make it something full screen,
you can style it any way you want. So that's really amazing. And I think
it's safe to say that this plugin also is definitely worth an amazing plugin
alert. So here you have it, the amazing
plugin alert. Thank you so much Hector, for putting this together. Thank you
so much for watching the end one of my videos. Please click that like button,
subscribe to my channel and maybe check out this playlist with more .NET MAUI
videos. Or if you want to see more plugins that will
make your life easier as a .NET MAUI developer, check this
playlist out. See you on the other side!
