Take Pictures in Your App with CameraView for .NET MAUI

CameraView is back! Freshly ported from Xamarin, we have an all new CameraView available for you for .NET MAUI. I made a quick follow-up video too with preventing memory leaks and selecting other cameras: • Select Different Camer...
With this first version of CameraView you can control zoom, flash, resolutions, which camera to use and actually take pictures! In this video I will show you how to get started yourself.
💝 Join this channel to get access to perks:
www.youtube.co...
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: www.youtube.co...
🐦 Follow me on Twitter: / jfversluis
🤝 Join the Discord server: / discord
🔗 Links
Sample Code Repo: github.com/jfv...
CameraView Documentation: learn.microsof...
⏱ Timestamps
00:00 - CameraView for .NET MAUI
00:13 - Amazing Community Contribution!
01:20 - Add CommunityToolkit.Maui.Camera Package
03:41 - Add Camera Permissions
05:14 - Implement CameraView in XAML
08:00 - Implement Image Capture
13:02 - CameraView Live Demo Android
14:15 - Change SelectedCamera
15:21 - Implement Zoom and Flash
17:54 - Learn More About Switching Cameras?
🎥 Video edited with DaVinci Resolve
🙋‍♂️ Also find my...
Blog: blog.verslu.is
All the rest: jfversluis.dev
#maui #cameraview #android #ios #dotnet #dotnetmaui #communitytoolkit

[@jfversluis]

A made a quick follow-up video too with preventing memory leaks and selecting other cameras: kzbin.info/www/bejne/gIbHl3Rto6uXjdk

[@KenRossPhotography]

It would be a fun project/video to "Create a Pro Camera in MAUI" that leverages all the features for flash, camera selection, zoom, etc. Having a zoom slider on screen, toggle flash on/off, exposure control [if it has that], etc. 😀

[@jfversluis]

Voila! github.com/CommunityToolkit/Maui/tree/main/samples/CommunityToolkit.Maui.Sample/Pages/Views/CameraView

[@adinwashere]

looks great. To use this in a Maui Hybrid Blazor app we would need to use a XAML page or pop I guess?

[@jfversluis]

That is correct! You can take some inspiration from here: kzbin.info/www/bejne/aJXPna1qg792Zqs

[@adinwashere]

@@jfversluis Excellent

[@ericritter46]

i love it. keep it up! I like that implementation is super easy and we dont need a mulititude of xmlns setup.

[@alelasgrutas]

amazed by this video, thank you very much, keep it up

[@dustineatchel9442]

Excellent work! Excited to give this a try. What about recording a video instead of capturing photos? Is that something that is planned for the future? Would be amazing to be able to select the frame rate / resolution when capturing video as well. 👍

[@jfversluis]

Something we absolutely want to do! We started with the core functionality but video is definitely one of the next things I think we'll do. Thanks!

[@razgon]

Nice, thank you!🙂

[@kamilyt6541]

Yeah that's great I have also added this cameraview in my hybrid desktop app It is a xaml popup and I'm open that popup from the razor page So basically I have added that view in hybrid with xaml.. And can this work with DSLR? If I attach a DSLR to my desktop like flash and zoom i haven't try that so....

[@jfversluis]

Great! Oof I don't know about the DSLR! That would be very interesting... Please let me know if you decide to try!

[@kamilyt6541]

@@jfversluis yes I have already did that but haven't try with the flash and zoom in the desktop app So okay I'll try to do in the DSLR 👍

[@yoyokits]

Thank you for this great camera control. Could this CameraView capture video? Please make tutorial for it.

[@jfversluis]

Not supported yet!

[@lukehunter1154]

Great video! Followed the steps on an Android application, all works perfectly in debug mode but when building the application in Release mode the camera view will not zoom in. Any pointers?

[@neosphoros5502]

Hello! Very nice video. Is it possible to place half transparent picture (PNG) as the overlay layer on the camera preview?

[@jfversluis]

Thank you! I would think so, just make sure the elements overlap by putting them both in the same column and row in a grid for example

[@DeepWorksStudios]

Great Update ^^

[@annotations888]

Please make a video showing the shell.ItemTemplate with font icons and not images. Eveywhere developers use images but I need the it to work with font icons

[@deaasaleh3613]

Great job 👏

[@jfversluis]

Thank you! 😃

[@liemnguyen3088]

After take a picture, how to put some text overlay the image and save to library, please!

[@jfversluis]

Probably use some image manipulation library. That is not specific to .NET MAUI

[@hrishikeshgarud7177]

Can we get the raw camera feed?

[@jfversluis]

Not at the moment, something we want to do in the future

[@nataliaszymczak4685]

Anyone has working example with mvvm?

[@JAMvideo1]

Been building on Camera.Maui for a while. Do you suggest i switch to this new one?

[@jfversluis]

If Camera.MAUI works for you I don’t see any reason to switch

[@LuisDulanto-gl6dm]

I'm displaying the new Camera in a popup but if I close it and reopen, the camera is not displayed. How can I fix that?

[@jfversluis]

Sounds like you need to dispose of it properly and reinitialize

[@xopabyteh]

The captured image doesn't match up with the preview? Could you please help me with that?

[@jfversluis]

What device are you using? Sounds like some delay?

[@xopabyteh]

@@jfversluis Motorola defy. The captured image is larger than the one on the preview. Edit: it happens when the preview resolution aspect ratio doesnt exactly match the screen aspect ration.

[@MartinMcDermot]

Nice thx

[@jfversluis]

You’re very welcome! Thank you for your support!

[@paladinepaladine]

System.Reflection.TargetInvocationException: 'Exception has been thrown by the target of an invocation.' I'm getting this error everytime I take a photo. I've got to have missed something, but I can't see it (probably the wood for the trees). Can anyone help?

[@jfversluis]

Try wrapping it in a dispatcher.dispatch call

[@paladinepaladine]

@@jfversluis I was trying to make the cameraview invisible, make an imageview visible and pass the e.media across inside a single dispatcher.dispatch when it needed one for each. Should have realised that as it was the moment it didn't have one that the code failed. Many thanks for your help and the excellent videos you keep producing.

[@alexali9967]

I needed to add HeightRequest & WidthRequest to CameraView to preview the video

[@jfversluis]

Thanks for letting us know!

[@DM-98]

Could you change the methods to have suffix Async when they're async?

[@jfversluis]

Personally I don't like that. You can tell from the return type, it feels very on the nose to add Async to everything. So not likely!

[@bity-bite]

Better to be consistent with the BCL maybe? ​@jfversluis

[@jfversluis]

@@bity-bite be my guest!

[@bity-bite]

@@jfversluis Thanks! I'll try to make a PR as soon as I get my PC fixed 😃

[@jfversluis]

@bity-bite ha sorry. That was not what I meant. I’m not planning on changing this for this library or any of my libraries. Be my guest with applying it to your own code 😄

[@tanakamawere]

Gerald, I think you underestimate the number of beginner devs who watch you videos 13:33 . Your "sample code" IS the code.😂😂 whatever bad practices you do, I will do the same because I don't know any better

[@jfversluis]

I know! I maybe should do better in that regard but then it also comes down to how people like to solve things and taste or what people perceive as being better... But you make a good point! I don't mean to talk down on your code. I will be more mindful of that, thank you!

[@MrSuxor]

I swear when you come out with that cancelation token video in the cancelation token video you're going to ask if we want a cancelation token video to comment below!

[@jfversluis]

😂😂😂 cancellationtoken-ception

[@SuperGulamali]

Waiting for a year for the cancellation token video 😂

[@jfversluis]

😭😭😭😭