Take Pictures in .NET MAUI with the Camera.MAUI CameraView!

Ғылым және технология

Taking pictures, scanning barcodes, generating barcodes. Is there anything this CameraView plugin can't do?! With the Camera.MAUI plugin for .NET MAUI you have a very flexible camera preview element for grabs. Let's see how to set it up!
💝 Join this channel to get access to perks:
kzread.info/dron/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: kzread.info...
🐦 Follow me on Twitter: / jfversluis
🤝 Join the Discord server: / discord
🔗 Links
Sample Code Repo: github.com/jfversluis/MauiCam...
Camera.MAUI Repo: github.com/hjam40/Camera.MAUI...
⏱ Timestamps
0:00 - .NET MAUI CameraView
0:15 - Options to Use Camera in .NET MAUI
1:17 - Camera.MAUI Repository
2:25 - Install Plugin NuGet
3:07 - Initialize CameraView
3:30 - Setup Platform Camera Permissions
4:20 - Add CameraView in XAML
5:30 - Select Different Cameras
7:42 - Samsung Users Watch Out!
8:46 - Running Android Sample
9:10 - Take Picture with Camera.MAUI
12:24 - What's Next For This Plugin?
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋‍♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#maui #cameraview #picture #dotnet #dotnetmaui

Пікірлер: 125

  • @jfversluis
    @jfversluis Жыл бұрын

    Looking for the videos mentioned in this video? Here they are! ZXing Barcode Scanning video: kzread.info/dash/bejne/oaeoycxrqKXFn84.html Google Vision ML Kit Barcode Scanning: kzread.info/dash/bejne/iYuElNZmcpindLg.html

  • @GIMMY2K1

    @GIMMY2K1

    Жыл бұрын

    You are right, but it's a preview :(

  • @rushas
    @rushas Жыл бұрын

    Great quality content as always. I like that you cover the topics that are not usually picked up by other mobile development youtubers, like barcode scanners. This is what makes your chanel unique and your content original 👏

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thank you so much Ruslan! Much appreciated!

  • @Golden_games
    @Golden_games Жыл бұрын

    I will say it again. each time I see your videos am always filled with joy because either it solves something for me or pushes me to where I can solve things my self. keep it up

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Only if you keep it up with posting great comments like these 🥰 thank you!

  • @Golden_games

    @Golden_games

    Жыл бұрын

    @@jfversluis No problem

  • @josemanuelgroo
    @josemanuelgroo Жыл бұрын

    you are awesome, thanks for all the great work you do!!

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thank you! 🥰

  • @nurfitriabdhalim3607
    @nurfitriabdhalim3607 Жыл бұрын

    It's very awesome! I use the snapshot stream retrieve from camera view after calling the get snapshot and send the stream for azure OCR recognition, and update the text directly in the view directly. So satisfying 🎉

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Ooh very cool! Open source a sample and I’ll make a video!

  • @muhammadibrahim-ye3hs
    @muhammadibrahim-ye3hs Жыл бұрын

    Thanks for such a great video . Much needed video Really appreciate :)

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Glad to be of service!

  • @DeepWorksStudios
    @DeepWorksStudios Жыл бұрын

    Thanks again for this valuable information ❤

  • @jfversluis

    @jfversluis

    Жыл бұрын

    My pleasure!

  • @Donald.Archer
    @Donald.Archer Жыл бұрын

    That is awesome! I was thinking about creating a clone of the SkyView app, as it doesn't work very well here in South Africa. I was wanting to show the camera feed, and then overlay the planets, stars, moon, sun, maybe even satellites. I have to also figure out the relative positions of those bodies with respect to my GPS / Elevation / Compass heading, etc. But I thought it would be quite a fun experiment.

  • @jfversluis

    @jfversluis

    Жыл бұрын

    That sounds pretty cool! Let me know when you pull that off!

  • @aslamiqbal3435
    @aslamiqbal3435 Жыл бұрын

    This is what I was looking for. I wanted to 1. Scan QR/BAR code automatically 2. Use as a movement detector. Thanks, Gerald 💌

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Perfect! Glad I could help!

  • @aslamiqbal3435

    @aslamiqbal3435

    Жыл бұрын

    @@jfversluis I learned from you a lot about MAUI/xamarin.

  • @aslamiqbal3435

    @aslamiqbal3435

    Жыл бұрын

    @@jfversluis I follow you almost all of your LinkedIn posts. Have you noticed?

  • @Brendan2Alexander
    @Brendan2Alexander Жыл бұрын

    Awesome Gerald! Thank u

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Glad you enjoyed it! Thanks!

  • @knightfox1
    @knightfox1 Жыл бұрын

    Thank you for your video. I am a newbie and there is this one thing I can not figure out. How do I write the path to save the image?

  • @patricknance7938
    @patricknance793810 ай бұрын

    Thank you for the video. I have been struggling with the savesnapshot. I am not getting an error - but no photo is saved in the Cache folder. Any demos on using this command? string mainDir = FileSystem.Current.CacheDirectory; string filePath = Path.Combine(mainDir, "test.png"); await camCamera.SaveSnapShot(Camera.MAUI.ImageFormat.PNG, filePath);

  • @nacertabib3158
    @nacertabib3158 Жыл бұрын

    Hi Gerald, thanks for the work. Does this support partial camera view, like when you want just to capture a part of the camera view for text analysis for example

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Not yet I think, make sure to open a feature request on the repository!

  • @vijaichaudhary8092
    @vijaichaudhary8092 Жыл бұрын

    Thank you Gerald.

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Most welcome my friend!

  • @stonedhackerman
    @stonedhackerman Жыл бұрын

    Finally! It was a real shame that more than a year after GA, we still didn't have a CameraView

  • @jfversluis

    @jfversluis

    Жыл бұрын

    In that time you could have built it yourself! 😏

  • @stonedhackerman

    @stonedhackerman

    Жыл бұрын

    @@jfversluis I did for Android, but I have no IOS devices. My point was tho, that a CameraView seems like an essential feature and its a shame MS didnt implement it themselves

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Sure, but it’s also a shame we didn’t implement x, y, z. There is only so much we can do unfortunately. I’d love to have it all but we can’t. This control is important to you, another control is important to another person. Luckily we have an amazing community that creates things like these!

  • @MudahnyaFizik
    @MudahnyaFizik Жыл бұрын

    Is there a way to crop the ImageSource of the captured image, and return the cropped image? Seems there are limited library for this.

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Built-in Microsoft.Maui.Graphics might be able to or SkiaSharp

  • @christianlindenblatt6815
    @christianlindenblatt6815 Жыл бұрын

    Thank u Gerald! Is your example repo MVVM compliant? I'm not sure, if it is better to implement the OnClick-Event in codebehind or in viewmodel. For example I have a page which collects some data (e.g. PersonDetailPage). One part is an image. For this I like to open a "TakePicturePage". This page is equal to your example. But there are different ways to send this picture from TakePicturePage back to the PersonDetailPage. Do you have an example repo, where this behaviour is explained?

  • @LEGIT_ELITE

    @LEGIT_ELITE

    Жыл бұрын

    I've been looking for a solution to this problem for so long have you found a good solution?

  • @sameerafonseka4704
    @sameerafonseka47044 ай бұрын

    Hi Gerald, Thanks for the video. I used the cameraview TakePhotoAsync method. Unfortunately when I close the app and open again and try to take a new image, previously taken images are rendered. I post an issue in Github too. I properly dispose the stream. Is it a know issue or any walkaround to this issue?

  • @KenzoArts
    @KenzoArts Жыл бұрын

    Hello Gerald, I am creating a profile page where a user can upload or take a selfie to be used on his profile page and this is the feature i was looking to implement into my MAUI application. I have one question : i saw in this tuturial you have plugin your android phone to computer but in my case is the iphone and i am wondering how to access my iphone from Visual Studio on windows machine. Do you have any clue ? Thank for your feedback and i love your content.

  • @mohammedalsabahii2
    @mohammedalsabahii2 Жыл бұрын

    Thanks Gerald for this amazing plugin ,, Does this plugin support to switch between cameras to front or just work with back camera ?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    It's mentioned in the video 😉

  • @samda7109
    @samda71092 ай бұрын

    Can the functionality of a camera be utilized to highlight specific sections of an image, in order to analyze them using OCR (Optical Character Recognition) software and save the results into a list? For example, to digitize forms.

  • @jaotech2
    @jaotech210 ай бұрын

    Greetings, what a great contribution! Do you know if with this camera control I can design a rectangular frame above as if the user needs to take a screenshot of a personal card?

  • @jfversluis

    @jfversluis

    10 ай бұрын

    Just place the camera view and whatever you want to use in the same Grid column and row so they will overlap and go nuts with your design!

  • @jaotech2

    @jaotech2

    10 ай бұрын

    @@jfversluis Thank you, I was pleased to subscribe to your channel!

  • @ItsSalesGabriel
    @ItsSalesGabriel Жыл бұрын

    Awesome 🔥🔥

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thanks!

  • @BrunswickGauss
    @BrunswickGauss10 ай бұрын

    I want to congratulate you on your channel, it is very substantial, I have seen several tips, which are very good, and taking advantage of your knowledge on the subject, will you have a video that shows how to communicate the phone via USB, either in Serial form such as RS232 or Using the USB Bulk? Thank you very much for your attention

  • @wildannugraha1130
    @wildannugraha1130 Жыл бұрын

    hi gerald, i want to ask, is it possible to create overlay like rectangle / create custom button in official mediapicker camera plugin ?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Unfortunately not with the official MediaPicker, no

  • @kainafa
    @kainafa Жыл бұрын

    Very good 🚀

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thanks 🔥

  • @KoushalMalviya-sd4jv
    @KoushalMalviya-sd4jv3 ай бұрын

    Thank you sir for video I am implementing this package for IOS also but StartRecordingAsync Method is not working, Please tell me what to do for IOS. Thanks

  • @mohamadrezamohamadi9915
    @mohamadrezamohamadi9915 Жыл бұрын

    Thanks for help❤

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Glad you find it useful!

  • @vigo1301
    @vigo13012 ай бұрын

    Great contribution Gerald, i have a problem with this plugin, my ios app is locked to not rotate, but the camera always rotates, do you know of any solution to this issue?

  • @paulsanders1687
    @paulsanders16874 ай бұрын

    Thank you for the video works great, any chance you could explore the other features like snapshotstream, what I want to do is get the image in a form where I can store it in a database ideally SQL.

  • @GIMMY2K1
    @GIMMY2K1 Жыл бұрын

    Great !!! Finally a non-preview solution. Can you also make an example of Barcode detection/decode with this nuget ?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    The preview label is always such a psychological barrier I feel 😅 you’re trusting the judgement of the author. I know packages that are much more stable in preview and of course vice versa. I’ll have a look at also showing barcode scanning with this one!

  • @GIMMY2K1

    @GIMMY2K1

    Жыл бұрын

    @@jfversluis good, free examples ?

  • @mohammedmahmoud4872
    @mohammedmahmoud4872 Жыл бұрын

    Hey gerald in xamarin forms in xamarin community toolkit there was toast msssage like snackbar you can customize it with color or event or something. Where can i find something like that in maui

  • @jfversluis

    @jfversluis

    Жыл бұрын

    In the .NET MAUI Community Toolkit: kzread.info/dash/bejne/pHp-qrtwia6chpc.html

  • @mohammedmahmoud4872

    @mohammedmahmoud4872

    Жыл бұрын

    Man i love you

  • @bhuwan99
    @bhuwan99 Жыл бұрын

    Can you suggest me best camera picker NuGet package which we are using MAUI.

  • @jfversluis

    @jfversluis

    Жыл бұрын

    The best one is the one you like best 😉

  • @ranlevi6975
    @ranlevi6975 Жыл бұрын

    Hi @Gerald Versluis this package does not detect my 0.5x Zoom Camera on my galaxy a50, do you have any suggestions? thank you!

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Hm not really, sorry!

  • @giuliuploader
    @giuliuploader4 ай бұрын

    Hello, nice video. How can I switch to front camera, and visualize it or take a photo with it?

  • @jfversluis

    @jfversluis

    4 ай бұрын

    I think that’s all mentioned in the video

  • @antonioya
    @antonioya10 ай бұрын

    Thanks for this tutorial, it has helped me a lot. I've been testing and I can't find a way to change the resolution of the Android camera. It seems that the maximum resolution is the size of the screen image. How can I make the camera use the maximum resolution?

  • @antonioya

    @antonioya

    10 ай бұрын

    And...how can I save the image in Android? I have looked your video to save a drawing. I tried to convert the SnapShot to Stream, but it looks there is no method for this. EDIT: I have found SaveSnapShot, but how set the path in Android?

  • @kingggerald

    @kingggerald

    2 ай бұрын

    Did you get a fix for this yet? I am also looking into changing the resolution :)

  • @hattmann
    @hattmann Жыл бұрын

    Hello! Do you know if the Maui Bug with Android 11 and accessing the MediaPicker will be solved soon?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    I don’t know, sorry!

  • @hankdoout6845
    @hankdoout684512 күн бұрын

    but, the new cameraview seems remove these method, how can I indicate the front camera? thanks

  • @jfversluis

    @jfversluis

    12 күн бұрын

    Select Different Camera and Prevent Memory Leaks with CameraView kzread.info/dash/bejne/fImYyKNwnqnKh9o.html

  • @jitendrajadav9110
    @jitendrajadav9110 Жыл бұрын

    Great to see this plugin does it support Tagging like place, parking, market etc..?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    I don't think so!

  • @jitendrajadav9110

    @jitendrajadav9110

    Жыл бұрын

    @@jfversluisVersluis Thank you! is there any plan for it?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    You’ll have to add the author of this plugin

  • @liemnguyen3088
    @liemnguyen30889 ай бұрын

    Great thank you!. Could please make a video show Camera Preview in Content Page NOT using nuget plug in. I need learn and a want to maintenance by my self. Thank a lot!

  • @jfversluis

    @jfversluis

    9 ай бұрын

    Look at the code of the plugin repo, mind the license terms and use it in your own project. The camera controls is notoriously hard because the platform APIs are not great. That won’t make for a great video, sorry.

  • @user-rn6jv3sx3l
    @user-rn6jv3sx3l6 ай бұрын

    Спасибо тебе за видео. У меня возникли проблемы с сохранением снимка. Я не получаю сообщение об ошибке, но в папке «Кэш» не сохраняется ни одна фотография. Есть ли демонстрации по использованию этой команды? строка mainDir = FileSystem.Current.CacheDirectory; строка filePath = Path.Combine(mainDir, "test.png"); дождитесь camCamera.SaveSnapShot(Camera.MAUI.ImageFormat.PNG, filePath);

  • @bedzgaming2935
    @bedzgaming2935 Жыл бұрын

    hi Gerald can you create a qr scanner that can save in sqlite after you scan the qr code

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Sure! Capture the result and save it as a string

  • @jojoii7287
    @jojoii7287 Жыл бұрын

    Does the camera stop when changing the page?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Might be! If it's not visible it's not of much use!

  • @juandisk8
    @juandisk8 Жыл бұрын

    Its just for images or also videos?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    I think just images for now

  • @lexuanquy3920
    @lexuanquy392011 ай бұрын

    Hello sir. Can you help me to convert Imagesource to Mat for opencv

  • @jfversluis

    @jfversluis

    11 ай бұрын

    I’m afraid not, sorry!

  • @adambenge2562
    @adambenge25625 ай бұрын

    Does this work with Android 13 (SDK 33)?

  • @jfversluis

    @jfversluis

    5 ай бұрын

    It should!

  • @watherby29
    @watherby294 ай бұрын

    Something for interfacing with fingerprint scanner please :)

  • @jfversluis

    @jfversluis

    4 ай бұрын

    Check out github.com/FreakyAli/Plugin.Maui.Biometric

  • @johnsontsang2518
    @johnsontsang25189 ай бұрын

    how about Burst mode shots?

  • @jfversluis

    @jfversluis

    9 ай бұрын

    Don't think that's supported right now

  • @Onri
    @Onri Жыл бұрын

    Gerald does Maui have OCR

  • @jfversluis

    @jfversluis

    Жыл бұрын

    We don’t have anything in .NET MAUI directly. But if the platform supports it you can easily use it from within .NET MAUI yourself

  • @Onri

    @Onri

    Жыл бұрын

    @@jfversluis Ty

  • @ahmedessa4906
    @ahmedessa4906 Жыл бұрын

    can you make video .NET MAUI Blazor with the Camera example

  • @jfversluis

    @jfversluis

    Жыл бұрын

    You probably want to watch this: 3 Ways Combine .NET MAUI and .NET MAUI Blazor Hybrid kzread.info/dash/bejne/ZJigztxtfr2pYKw.html

  • @dilshadzm786
    @dilshadzm7867 ай бұрын

    how to configure it?

  • @jfversluis

    @jfversluis

    7 ай бұрын

    Check the plugin repository for all the details

  • @user-od5lm1ne4y
    @user-od5lm1ne4y Жыл бұрын

    best

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thanks!

  • @crystalcortexx
    @crystalcortexx Жыл бұрын

    Is it part of the community tool kit yet?

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Unfortunately not

  • @crystalcortexx

    @crystalcortexx

    Жыл бұрын

    @@jfversluis amazing tutorial btw I'm currently using it right now. I'm a little confused about observables in MAUI and data binding is a tad confusing but I'm slowly getting there.... I hope. I am running into a null pointer exception sometimes :'(

  • @johns4651
    @johns465111 ай бұрын

    I am slightly confused by this project. It does not look like a .NET Maui application, I can see traditional "old-school" xmls views (like in Xamarin) but no .razor components or .razor pages with Blazor components as would be expected in a .NET Maui application. What is this project? I though the whole point of .NET Maui is to be able to write cross platform Blazor component based projects. using the tradiinal xmls views kind of defeats the purpose as it is regressive rather than reaping the benefits of Blazor applications.

  • @jfversluis

    @jfversluis

    11 ай бұрын

    I think this is under the wrong video? Also xmls is not a thing. Do you mean XAML?

  • @johns4651

    @johns4651

    11 ай бұрын

    @@jfversluisAplogies, I meant xaml (autocorrect). We have discontinued Xamarin when doing projects for our clients, and all greenfield project we now do are .NET Maui applications. The project in the video looks like a Xamarin project (it uses Views and XAML markup for the UI), where in .NET Maui applications we use Blazor and thus .razor components, not Views. Hence I cannot see how this video would apply to a .NET Maui Blazor project. I thought sticking to the oldschool Xamarin-style coding defeats the purpose of all the improvements that came with .NET MAui with Blazor.

  • @jfversluis

    @jfversluis

    11 ай бұрын

    @@johns4651 OK gotcha, so .NET MAUI Blazor Hybrid is not the only option. Our main product it still .NET MAUI based on XAML as you were used to with Xamarin.Forms. Blazor Hybrid is an option and if you prefer that, totally fine, but then you will have to find solutions that will work with that. In this case, the camera view, is very specific to non-Blazor use. If you still want to use it, you can but you'll have to mix it up, see: kzread.info/dash/bejne/ZJigztxtfr2pYKw.html

  • @johns4651

    @johns4651

    11 ай бұрын

    ​@@jfversluis Thank you for the link, I added it to my "watch later", it looks very useful. For now I've implemented the functionality with standard MediaPicker with Azure Cognitive Services SDK to analyze photographed product labels for text (OCR) and multiple barcodes. It works surprisingly well for a few hours initial work. We have complex requirements where the client will be taking photos of product labels as they arrive into the warehouse and the app would automatically GR them into inventory based on the label photo (of course each supplier has different label format, hence Cognitive Services are very handy as they not only extract text or barcodes but provide positional info or other metadata). The reason I was initially surprised is that our team has grown to hate Xamarin over the years as it was causing no end of issues in real enterprise applications. Yes it was quite revolutionary when it came out but Blazor Maui project are such as step-up in the real world applications that I would not expect anyone to use, de fecto "Xamarin" (dressed up, mind you, as a .NET Maui application) in 2023. When I think .NET Maui app I think Blazor by default. And I think this is Microsoft intention as well, with XAML/view provided primarily for "compatibility" for folks transitioning from Xamarin. Just like EV cars are a step-up to ICE cars. It also so much easier and quicker to code complex projects. Just a personal bias I admit!

  • @jfversluis

    @jfversluis

    11 ай бұрын

    @johns4651 that is definitely very personal. The majority of people I talk to are very successful with Xamarin and now .NET MAUI. Anyway, glad you find something that works for you!

  • @josedonizeteoliveirajunior1744
    @josedonizeteoliveirajunior1744 Жыл бұрын

    First!🎉

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Yes you are!

  • @user-rn6jv3sx3l
    @user-rn6jv3sx3l6 ай бұрын

    Thank you for the video. I have been struggling with the savesnapshot. I am not getting an error - but no photo is saved in the Cache folder. Any demos on using this command? string mainDir = FileSystem.Current.CacheDirectory; string filePath = Path.Combine(mainDir, "test.png"); await camCamera.SaveSnapShot(Camera.MAUI.ImageFormat.PNG, filePath);

  • @user-rn6jv3sx3l
    @user-rn6jv3sx3l6 ай бұрын

    Thank you for the video. I have been struggling with the savesnapshot. I am not getting an error - but no photo is saved in the Cache folder. Any demos on using this command? string mainDir = FileSystem.Current.CacheDirectory; string filePath = Path.Combine(mainDir, "test.png"); await camCamera.SaveSnapShot(Camera.MAUI.ImageFormat.PNG, filePath);

Келесі