.NET Maui Apps | Access device camera and files using Media Picker in MAUI mobile and desktop apps.

hi everyone you're welcome back to your netcode  Hub channel in this video we are going to talk   about how to have access to device camera so it  is an iOS or Android how can you have access to   the camera how can it take images how can you  also add or select already captured images into   your application by using an interface an API that  is known as an i media picker I've already made a   video on using file picker which allows you to  select files PDF videos audios images from your   device and this one that's a media picker also  going to allow you to take or capture images   videos taking videos and also um taking images  as well so let's have a look with this now what   you have to do here is you have to create a new  project now after we are done with this I'm going   to put this at the GitHub so I'll put a link  in the description so execute over there and I   you can get the code if you want to review what  you've done again so let's create a new project okay we have a nice project created now  let's see so in order to use this   let's go to the main page because that  is why I want to use this media picker   so we click on the main page now let's  work on the main page of example.cs   that is the code behind file you see we  have this button so let's comment this so Ctrl K C you comment this one and now in here before we do this we have to enable some  permissions so before you write anything   here let's go back to the Android manifest so  click on platform Android then Android mine   effects so right click on this and let's  go to open width then choose XML editor   so we have to add some permissions  here to have access to the camera   so what is the permission that you have  to add let's have to grab one of these and now in here instead of the camera  internet we're going to say camera we make sure there are any caps so you only have access to camera and  also you want to read external storage   so let's make a copy of this let's paste it again so yeah aside from camera you want to read  external storage so read then you have a stunner storage then aside from Readiness and  asteroid you want to also write so right Astana storage okay so after reading and  writing we want to read media videos   and also read media audio and images so  let's add one to this let's add two more so yeah you want to read media audio then you want to read media images so read media image images and the last  one you can read video so read media video okay so we now have  permissions that we want or we need   then that is what we are going to do let's  save this and now let's start using the   coach that is the interface or the API now you  see we have the button here now when you go to the   the example of file you see we have this button  and that's what we are issuing the command so   as soon as I click on this button what should  happen that is the next thing to do so in here   we can now have access to some apis such as pick  picture or pick photo async capture photo async   for capturing or using the camera also pick video  and also a captcha video so you know you can have   access to pick and capture capture me is going  to use a camera to take it but for pig it means   it has already been captured and you're going  to just grab the file and insert it let's have   a look first with how to take in a photo so  in this button let's write here so take photo or capsa photo so that's what we're gonna do so let's use media picker dot default but as  captured supported so if the device is support   um capturing then that's what you're going to do else maybe we can just say a weight  cell dots current but display an outlet so you can just write something like oops your device so isn't supported then you can just have a cancel button  of okay but in case it supports then you   want to use it so let's say you want to  have far results then we can say my photo is equal to you can have a  weight then let's use this   media picker dot default then here we  have all the interface that we can use   because we have big photo async capture  photo async so we go to this capture so it is going to allow us to capture image so after capturing we can just check so if image  is not now then that's what you're going to do let's see if the photo inside our  application so we're gonna say so let me give it a title here  so save the image captured in the application so down  here we can now say string   local file path yes equals you can now  have in path dot combine then file system .cast directory then you want to place my foot  over there so you want to just store the name so   that is my photo dot file name you know this you  can now access you the following details or data   from the image that we captured as soon as I click  on dot you see we have full name we have file name   okay so you can have you have the full path  we have the file name so if you want to have   the full path where you capture the image  from you're gonna have a one there and they   want to use the file name all right so after  storing this we want to display maybe this   image so we're going to talk about  using stream you can say Source stream is equal to I wait then we  can now have photo dot read   async so you don't want to have this photo open  read so you want to do photo dot read async first so it is going to be mindful too so dots read async so after reading  this you're going to convert this   into byte then we're going to  use the nest using file stream and we say look on file stream it's equal to file Dot open right now that you put in the path  that's a local file path   okay this Lookout file path is referring to this  you know what this year it is putting the file   inside the file system and I think that's going  to be the resources folder we have a phone also   called raw folder this I believe this where you're  going to have the image let's let's see when we   capture an image let's see where it's going to go  now aside from this the last one I have to do is   I wait and I pass in the source stream dot  copy2 so now you're not going to copy to   async then copy the local file stream okay so  that is this now let's save this one and let's   run it on Windows first and see what's going  to happen as soon as you click on that button yeah all right so we have the app launch and  that is a window so let's click on click me   and as soon as you click on this  button let's see what's going to happen so you know when I click on this button  nothing happened because this desktop   that I'm using here doesn't support camera  so you see that is why it is not displaying   anything but let's see let's stop this and  now let's run this in Android and let's see   if you can have access to the device camera  so I'm going to choose framework then Android   and now let's run it on Android so  click on this demo later that is a   12.0 API of 31 and now let's wait for  us to pop up in the Android and we say so the app is ready now if I click  on this button let's see so click me   and now let's have access Associates asking  you allow demopica to take picture and record   video so as you can see why using that app  only this time so if I click on this there's   going to have access to the device camera as  you can see from here so as having access to   um a device camera over here but  as you can see we have an exception   because it is saying that either the let's see  let's say Microsoft that's married application   model that feature not supported exception so  either there was no camera on the device or   this Android media.assense email capture  was not added to the queries element apps   manifest file so I mean you have to  also additionally add one permission   okay so let's let's see now let's go back to  you the solution Explorer so let's close this   now so listen Explorer on the same platform  so we go to manifest Android and now I think   we've opened it already so it is  asking us to add permission here so now in here let's have this queries added and inside these queries you must have an intent   and inside this intent you must have an action  so this action we say it is for Android the name   of this action is equal to we're going to have  Android dot media dot action dot image capture let's close this Ctrl k d we formatted well  and that is all that we need to do here   very simple now let's run this application and say so now let's click on the button  click me button so click on it   and unless you can see we have camera here popped  up and it is saying that entering camera mode so   got it and because we can now use our camera to  take an image so as soon as I click on capture   then you're going to capture the image as you can  see for me that the image that has been captured   yeah so you can see that our camera accessing  is working we can use camera to take image   also record video so with this what I'm  going to do if you want to record video   two then what I'm going to do let's see so the  same stage where we went instead of using this   the captcha photo async it is a video that I want  to do you can just use record video now aside from   this let's see so I'm going to just grab this so  I'll just copy this and I'll paste this like that   so let me just copy this comments and I'll  put on top here so the first one is to capture   image and now the second one here  is to load image so load photo so load photo so that's already captured image  now with this let's comment this one and now here   instead of the capture photo async we're gonna use  dot pick so pick photo async so you can now save   this and now let's run this again and let's see  what we can do as soon as I click on this button so let's click on the button now we're going to  select a captured image or photo already so as   soon as I click on click me then you can see that  it has Opening Our file system here you know since   you're using an emulator that's why we are now  having image here but when you use the real one   when test is on the real phone you're going to  have all your media over here and I can just   go in there and I'll pick image let's run this in  Android 2 and C so I'm going to close this that is   a windows so now let's choose windows we couldn't  use the captcha photo async with the windows now   let's try if pick photo isn't going to work here  and I'm sure this is going to work let's see so now let's click on the button  and as you can see we have   um here that we can choose an image from so if I  go to image I can just now pick an image so open   it and the image is now selected let's see if you  can have the image somewhere in the application so the image that we selected has now copied  to the cast now um to see this let's add one   line of command so we can have access  to the cache location so let's copy this and now let's paste it here so as soon as  we finish downloading we want to display   the current file location so we cannot  have access to this file stream then so we can have the name from this so let's pass  them here now let's run this so let's refresh this   and you're going to select an image it's going  to pop up and tell us the exactly where the file   is located and we're going to trace you  that further to see if the file is there so clicking me to select an  image and I'm going to choose   this so click on open and then that's the location  so you can see we have this location here so now   let's Trace to this now if I open my folder we  have this as six six and let me go back here   if that is what so um look at  cash then is that the bookings so let's choose a different image here and see  so see we have the booking we have the image   here now I can just use this contact open this  next is the contact as soon as I click on okay   you have the contact image here so that is a  way to use a media picker to just get files   or take images or snap images or take videos  as well okay thank you so much for watching   I believe this is going to help you yeah and  I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 715

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, android, map key, google map api key, integrate map, desktop application, google map.api key, api key, context menu, How to use Font Awesome in NET MAUI Mobile and Desktop applications., icons, sqlite database, contact app, carousel in app, display data with listview, list view component, using list view, material designicons, google icons, google fonts, filepicker, fileuploader, camera, access device camera

Id: Mc4m0nwIwiY

Length: 19min 47sec (1187 seconds)

Published: Thu Aug 17 2023