Mastering Image Capture in Power Apps: Camera Control & Add Picture Control Tutorial

yes the picture is worth a thousand words so it turns out in a lot of the powerapps that we build for things like inspections or reporting or different types of scenario based stuff being able to take a picture is a very common request so to do that we're going to talk about how the camera control can come in there I'm going to talk about how to change the different cameras that you see we're also going to talk about how the ad remove picture control is a little bit different the camera control but gives you some different options and then of course we're also going to talk about image size because size matters when you go to save the files it's high fun let's just switch over to my desktop and Taylor all right so what I did all I've done over here is I've started a powerapps mobile app and I have set the background image to be this fun little image of a dog taking selfie and then I threw a rectangle around the start button down here so if I press the button or hover over the button boom it takes us to a blank screen so we can start to build from now as a PowerApp beginner you probably know already but it's all right if we say insert media I'm gonna go down here and we'll say camera and so this adds the camera control to your app and look at that buddy is sitting in his chair hanging out for hopefully all the pictures by Betty disappears at some point anyway there you go live feed a buddy and so with the camera control in your app right cool I've got this here now how do I capture the image okay that's always the first question so at its most basic level we can insert a image control here drag it down a little bit and so we can actually just set this to be camera1 dot photo and so if we do that and tell buddy to get back into place we set that and now if you just preview the app if we click on the picture or the camera control itself boom it takes the picture and we've captured it right so that at its most simple level is exactly how that works now honestly that's not probably the most convenient method but camera1.photo photo is the output of the photo but it's not intuitive for your users they have to click on the picture so typically what I see is that we want to make it a little bit easier on our users and so to do that what we're going to do is we're going to add a button and we'll pull this down here and we're going to say hey we're just you know say take I don't know right but we take the photo what's going to happen is we're going to put that into variables so we're going to say update context that creates a context variable so variable just available on the screen remember to use set if you want to use it anywhere in your app and we'll just call this VAR picture and then what we're going to do is we're going to say hey I want you to be the camera control so camera one dot we don't want photo photo is the last time they press the control and the whole point is that we don't want them to have to press on the picture to take a picture so we're going to do is we're going to use camera one dot stream and do that now there you goes to our crease variable so then let's insert ourselves another image control here pull this one down here and we're going to set its image to be VAR picture so now if you say play and click take nothing happens right but if you look we don't get an error but our variable didn't get updated we don't see the picture of the empty chair here yeah why so in order to use this method of camera1.stream what you can do is go up to the camera control and it has a property called stream rate it is zero by default this is how often it refreshes in milliseconds so what we want to do is say hey I want to refresh you know once every 10th of a second so we set that to 100 then this is going to update now I've ran into this a couple of times where it gets all angry with me if I change this this is a bug that's currently in here used to not be here I hope it goes away soon but if it does this where it freaks out after you set the stream rate just go back up here to camera change this from One camera to another so zero to one and then set it back to zero again until you're right back to streaming speaking of right back let's put buddy back in his chair and if you want to get the idea for this video I was getting ready for my upcoming training class right so training.powerapps91.com I've got a live training class I'm also re-recording our on-demand training class lots of training options anyway I was working on the content for those I was like yeah you know what this is one of those lessons that we'll share with the whole YouTube world so there you go that is the look of a dog that is super annoyed with me but now if we hold down the ALT key and press take now we've got a different photo right for our picture okay there he goes he's you stay longer for the picture it's all matters like a child is a child whatever so setting the stream rate is going to update how often that camera image is changing so that we can take pictures right and so by setting it like I said to this this is going to update it once every 10 seconds and I'm sorry once 10 times a second once every tenth of a second and so that would update if you want to update every second you know Etc I probably should have done that because now I toggle the camera thing again so that's typically what we're going to do now you could if you said hey I wanted to automatically take a picture every second right so that's a thousand milliseconds there so on stream this is what happens every time that stream is updated so in our case right now once every second so we could just take that same code that we know that stores the camera into a variable right and if we put that in here now what's going to happen is that picture is going to update every second right so I got my fingers in front of the camera oh not not in the right spot but so every second I'm getting a new photo so this would be the idea if you wanted it to Auto take pictures I've never had a actual use case where I want to do that but I wanted you to know that you know there is the ability to set on stream I so that's that now so speaking of that camera control so if you wanted to change the camera property right so if you look up here so this is telling you what camera on your computer to use right or on your phone so if you think about my iPhone it's got like I don't know six cameras at this point it's got a lot um you know my PC here's got three different cameras and so this is a way for you to say hey instead of using their zero or their first camera right so that would be kind of primary you know if I change this to one then that's saying hey use camera one which for my cases came one the one you're using right now so that's why it's not working but if I stop the camera one sec all right so we've stopped recording with that one so if we change this from zero and then we change this back to one now you're going to get that camera hi right so you have control over which camera is being used okay let's turn that back to zero now what if you want the user to be able to change the camera oh I should turn the camera back on one sec there's my pretty face so what if you want to be able to let the user toggle the camera so what you can do is you can give them a drop down so we can kind of make move this picture out of the way so we're going to insert a drop down here and put a drop down and so what you're going to do right here for the items property for the drop down is you're gonna get power apps to catch up okay so now it's drop down sample and so what we want to do here is we're going to say camera control so the name of your control and then you're going to do dot available devices and so what that does now is this creates a drop down that has the different cameras by their name right so these are the system names of my cameras what we need though remember here what is this looking for it's looking for a number so what you're going to do here is you're going to say drop down one right same on drop down DOT selected and then remember if you're not sure what it is it just do the dot this shows you the fields available there's ID available in name so name is HP HD Pro webcam 920. we don't want that ID is its number so by setting this to be the number now it's going to work all right so now if we use the drop down and we change it like to my fhd camera there's nothing connected so it'll just be stuck and loading if I change it to the Brio which is what we're using right here it is also very confused set it back to the pro webcam and so there you go right and I guess I should talk about for a second with Logitech because it's in use right it's telling you hey somebody's using this right like if you read the words on the screen it will tell you what you've done wrong there but that's right we don't want to use that also keep in mind because they are using the camera control available devices when I open this app on my iPhone in a few minutes right it's going to say you know front camera and then all my different rear cameras right it's going to tell me the different ones so so it's not tying it to my PC or my environment right now it's tying it to the actual camera all right so then settings wise there's not a lot else that you really care about here right you got a bunch of your normal stuff around styling and things like that um really it's the stream rate and the camera property the two that are unique to this one now one thing you might be thinking about well Shane I've used this camera before and it takes very low resolution photos you're absolutely right right it takes like 640 by 480 or something like that it takes a very small photo which if you're in a scenario of just I want to take a picture to like show I was in this room then great that would work but like we've tried to use this for you know taking pictures like a broken part we want to zoom in on the crack on the device you know and figure out you know what it's doing and you want to be able to use that big giant 20 megapixel camera on the back of your phone you cannot do that with the camera control the camera control does not let you change the resolution or the you know crispness if you will of the photo that is one reason a lot of people don't like to use it so if that's not going to work for you then what might you want to do let's go over here assistant set ourselves a new screen blink and so if you insert so we just did under media the camera but there is also this add picture Okay so the add picture control is one of the unique controls and powerapps that works differently on a PC versus an app or sorry on a device that is running the powerapps mobile app right so think of iPhones or tablets that type of stuff and what that difference is is if I use this on my PC that is going to then take and let me use a picture right so if I do this it doesn't say hey Shane use your camera right it doesn't it just lets me pick a photo right down here you can see it even puts this down to just show me image files but we get this picture of Buddy looking all stoic it is like that you're probably going to create chain why is Buddy looking the wrong way this happens with cameras right this isn't necessarily about this video but we'll show you anyway a little side trip here if you click on the uh the image control they have this property called apply exif orientation so this is a special setting of your photo so depending on how the photo was taken what device it was sometimes photos have special metadata and so eixf rotation is which way you were holding the camera and it's trying to like put it straight back for you it almost never works the way you want it to so changing this to false if you ever see photos that are looking the wrong way it's almost always this little setting okay so that's on not your camera control not on your add media button on an image control that is where that setting comes up anyway this is how this works on here now on a phone the way that this control works is that it's going to bring us up a little screen and I'm going to probably put it on screen beside this right now but where it says hey do you want to look at the uh photos do you want to use is it camera control or do you want to select a file right so it gives you different options based on your device and so if you say I want to take a photo then it will invoke the camera app on your device ice and why that is important is because then we can take advantage of flash we can take advantage of Zoom we have all those capabilities when we are on PC though we don't have all that it just uploads a file so this is one of those very rare controls that is completely different on a phone versus the PC now one of the nice things about using it other than being able to select a photo you've already taken your take a photo is it the fact that when you do it it's going to give you the full file so if you took an eight Meg file picture of buddy right where it's super crisp and you can get in there and zoom in and count the number of hairs on his little chinny chin chin then it will let you upload that image size remember the camera control doesn't ever take super resolution photos even when you're on your fancy iPhone Pro Max whatever the heck they call those things these days it doesn't matter but using this control the add media with image control that is going to let you take those high resolution photos that you want but there is a caveat with that if you look at the powerapps app on your phone under settings scroll down here the bottom room this will be on your tablets as well but what you want to do is you have this optimized image for upload and it is checked by default true if that is the case then they will automatically take that eight Meg photo that you took of Buddy and pair it down to a 300K ish photo which is probably not what you want so in order to get that eight Meg file uploaded then what you're going to have to do is you're going to have to turn this off on your device here's the real bummer there is no way for me as an admin or me as a maker to say hey turn this off for everyone it is on by default so it uploads small photos by default so if you want to turn it off you've got to train them to turn it off [Music] you also can't check in your app whether or not it is available right like so this is like a double whammy bad I think now you're probably thinking one Microsoft do that the reason they did it is because you know uploading a 300K photo is a lot faster than uploading an 8 Meg photo and so if you don't know the difference when you rather have the quicker uploads right so it's only when you start to get into this like we had one customer we were taking pictures of a sign-in sheet a safety sign-in sheet every day and unfortunately we couldn't read any the signatures with the 300K images that were getting uploaded so we had to train the users that took those pictures to turn it off so we could get the high fatality photo so you could zoom in and be like oh yeah that's John's well you know uh writing and look he even dotted his last name with a heart over the eye it's so cute so just keep that in mind that that is you know an important setting that you can't control and you can't even check for you're just going to have to tell people to change it if you want to get high fidelity photos so now that we've captured photos in our app right we've got this lovely little VAR picture we know we want to be able to save that right the best way to save that is to upload it to a file store right like in most cases that's going to be like a SharePoint document Library I still think that is probably the best for technically it's the second best but it's the fastest easiest cheapest place to store images and so if you look up there I'll put a link to the video that talks about uploading files and in that video we talk about getting the file and the image control so you can skip all the part of getting the file to the image control all you need to do is once you've got the image control you're going to convert it to Json right into base64 and then take that base64 pass that over to flow and then upload it right so if you've uploaded the files before this is no different another setting I wanted to talk about for one second here I'm going to take our picture again there we go um is keep in mind that when you're building these out speaking of metadata you know one of the pieces of metadata that you often get in images that you might not be getting with a PowerApp image is the location so you could do like location.latitude so that is my current latitude if I did a location.longitude that'd be my location longitude if I put both of them on now you all would know where I live that'd be bad you get the idea you can do location.latitude and location.longitude those give you the coordinates of where the user is at so you could grab that as some metadata so when you're uploading the image you can also pass the image metadata so you would know exactly where they were when they took the picture of the problem now if you're thinking what if I wanted to save these images off to SharePoint attachments that is possible as well I'm going to be super awesome you guys I hate SharePoint attachments they're harder to work with they're harder to get in the harder get out they don't make a lot of sense and in a scenario like this where you're taking pictures and you're trying to you know grab these and probably the photo is the basis of your app you don't want to mess with attachments technically you can I guess I'll put a link to that video too but but I don't want you to be thinking about attachments thinking about saving them the document libraries or Azure Bob storage is the fastest place but it's premium and it's a little harder to work with so we won't get into that anyway that's what I've got for today for your printed primer on using the camera control and the add picture control if you got questions comments any of that stuff let me know down below also remember right like this is part of like one of the lessons I'm working on for my training class so I've got an upcoming training class you should be joining it go to training.powerapps.911.com and sign up today and with that I'm gonna say thanks have a great day

Channel: Shane Young

Views: 14,688

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps camera control, powerapps camera take photo button, powerapps camera resolution, powerapps camera capture button, powerapps camera control not working, powerapps camera control button, powerapps camera available devices, powerapps add picture control, powerapps add picture from camera, powerapps optimize upload, powerapps beginners, power apps beginner shane young, powerapps beginner tutorial

Id: hGJke9-2Zd4

Length: 16min 34sec (994 seconds)

Published: Wed Jul 05 2023