Power Apps Camera Control – How to Use

I was working on a Power Apps project for a field inspection team. They needed a way for users to take photos right inside the app.

I found the Camera control in Power Apps, which worked perfectly for this requirement.

With just a few steps, I was able to set it up so users could:

1. Capture photos on the spot.
2. Preview the image.
3. And store it in SharePoint.

In this tutorial, I will explain everything about Power Apps Camera Control and its properties.

Additionally, we will discuss the points below:

• Capture photos and store them in SharePoint without using Power Automate
• Upload Image to SharePoint Library from Power Apps using Power Automate
• Stop the Camera in Power Apps Camera Control

Power Apps Camera Control

The Camera control in Power Apps is a built-in feature that lets users take photos directly using the camera on their device, whether a phone, tablet, or laptop with a webcam.

By default, the camera control captures images at a resolution of 640 x 480 pixels, which is small for a file size. This image resolution is fixed and cannot be changed.

It only supports Microsoft Edge, Chrome, Firefox, Opera browsers, and Android and iOS devices. All other browsers and platforms will show a warning that some app features won’t work.

It is useful when taking real-time photos for inspections, deliveries, or reports without uploading pictures from a gallery or file system.

With the camera control, users tap a button to take a picture. You can then save that image to a collection, SharePoint, or Dataverse, or even send it in an email.

Below are some of the main properties of the Power Apps Camera control:

Property	Description
AvailableDevices	It returns a table of available camera devices with Id and Name columns. Id: It provides numbers for each available camera control (0,1,2, etc.). Name: provided by the device to identify the camera
Camera	By default, it takes the ID from the available camera devices, which is 0. If your device has multiple cameras, you can provide 1, 2, or more.
Photo	It stores the captured image from the camera control.
OnStream	Specifies the action to perform when the Stream property is updated.
Stream	Help us capture images based on the StreamRate property automatically.
StreamRate	Specifies the frame per second at which the camera needs to capture images.

These are some of the main properties of the Power Apps camera control.

How to Use Power Apps Camera Control

Here, I will show you how to use the Power Apps camera control to capture and display an image.

1. Open the Power Apps canvas application. In the left pane, click on Insert -> Media -> Camera. A camera preview will appear on the screen.

2. Next, Go to Insert -> Media -> Image control. This control will be used to display the captured photo.

3. Set the Image property of the Image control and provide the following formula:

Camera1.Photo

Replace the camera control name Camera1 as appropriate.

4. Next, click Preview your app. Select the camera control to take a picture. You should see the result in your image control.

This way, we can display the captured image from the Power Apps camera control.

Automatically Capture Photos With Power Apps Camera

Let’s say you want your app to take photos continuously, one every second, without the user pressing anything.

Follow the steps below to achieve this:

1. Go to Insert -> Media -> Camera. Then, set the following properties:

// Set to automatically capture frames every 1 second
OnStream: Collect(colImages, Self.Stream)
StreamRate: 1000  // 1000 milliseconds = 1 second

2. Go to Insert -> Layout -> Horizontal Gallery. Set its Items property to:

colImages

3. Add a Button to Clear Captured Images. Go to Insert -> Button. Then provide the following properties:

Text to "Clear Images"

OnSelect property to: Clear(colImages)

4. Next, click Preview your app.

This way, we can take images by setting a timer on the stream rate of the Power Apps camera control.

Save Captured Image from Power Apps Camera Control to SharePoint List [Without Flow]

Let’s say you are working on an inspection or field reporting app and want to capture images on the go. With just one click, you can send those images to a SharePoint list.

For this example, I created a SharePoint list of Captured Photos with columns Title (a Single line of text) and Photo (an Image column).

To do this, follow the steps below:

1. Add a SharePoint list to the Power Apps application. Then, add a Edit form control and provide the below SharePoint list name to its DataSource property.

2. Add a Camera control within the Photo field, then provide the code below for the Camera control’s OnSelect property.

UpdateContext({VarPhoto:Self.Photo})

3. Then, remove the AddPicture control, which is present under Photo_DataCard2.

4. After that, it will show an error in the Image property. Remove all and add the variable name that we created above, VarPhoto.

Maybe after that, the error will still show because of the image property, so adjust the property.

5. Add a button control to submit the details to the SharePoint list. Add the code below to its OnSelect property.

SubmitForm(Form1)

Note:

Before previewing the app, make sure you need to change the DefaultMode to New.

6. Save the changes and preview the app once. Then submit the details and take a picture.

7. Then, go to the SharePoint list to see that the photo has been uploaded successfully.

Upload Image to SharePoint Library From Power Apps [Using Flow]

Like the SharePoint List, we can also upload the saved image of the Power Apps to the SharePoint Library. However, uploading an image from Power Apps directly to a SharePoint Document Library is not natively supported. But we can do the same thing using Power Automate.

To do this, follow the steps below:

1. In the Canvas application, add a camera control.
2. On the left side, click the three dots and Power Automate as shown in the screenshot below.

3. Then under the Search option, expand + Add flow and click the + Create new flow.

4. Next, you will navigate the flow screen where you need to click the + Create from blank.
5. Select the Power Apps (V2) trigger, and add a File input Parameter.

6. Add a Create file action from the Sharepoint connector and provide the below parameter:
   • Site Address: Select the site from the drop-down.
   • Folder Path: Select the library name where you want to store.
   • File Name: Provide expression as triggerBody()[‘file’][‘name’]
   • File Content: Provide expression as triggerBody()[‘file’][‘contentBytes’]

7. Then add Respond to a Power Apps or flow action and add a file input parameter in the value section, provide yes. After that, give a name to the flow and save.

8. Next, close the flow screen and in the canvas app add a button control, then in the OnSelect property provide the below code:

UplodeImage.Run(
    {
        file: {
            name: "Demoimage.jpg",
            contentBytes: Camera2.Photo
        }
    }
)

9. Now save and preview your Power Apps app. Click on the camera control to capture a photo, then click the upload button you created. This action will send the captured image to the connected Power Automate flow, which uploads it to your SharePoint document library.

Stop Camera in Power Apps Camera Control

By default, the Camera control in Power Apps is always on when the screen is visible. But sometimes, you may want to stop the camera preview, especially after taking a photo.

Power Apps doesn’t have a built-in “stop camera” function, but you can use a simple trick to stop the camera preview. Select the Camera control, and change the value in the Camera property (not the control name) to 0.1.

Since Power Apps expects a whole number to identify a valid camera (like 0, 1, or 2), providing a non-integer value, 0.1, makes it unable to find a camera, effectively stopping the preview.

I hope you understand how to use Power Apps camera control. In this article, I also explained the important properties of this camera control and provided some examples of where it is required.

You may also like:

• Sort Power Apps Gallery By ID
• Get a Row By ID From Dataverse Using Power Automate
• Role Based Security in Power Apps
• Display Power Apps Gallery Distinct Values
• Add New Row in Power Apps Gallery Control
• Sort Gallery by Person Column in Power Apps
• Select Multiple Items in Power Apps Gallery Control