Camera control in Power Apps

A control that enables users to take pictures using the camera on a device.

Description

Use the Camera control to capture pictures with a device's camera. The device must have a camera and the user must authorize the app to use the camera.

Select the camera control to capture a picture from the camera.

The most recently captured picture is available through the Photo property. With this property, the images can be:

• Viewed with the Image control. Use the Image control to view the captured image. For more information, see the examples.
• Temporarily put in a variable or a collection. Use the Set or Collect functions to store images in a variable or a collection. Use caution when using multiple images in a collection at the same time consuming device's limited memory. Use the SaveData and LoadData functions to move images to the local storage on the device and for offline scenarios.
• Stored in a database. Use the Patch function to store images in a database.
• Transmitted as a base64 encoded text string. Use the JSON function to base64 encode images.

Use the Stream, StreamRate, and OnStream properties to automatically capture images on a timer, for example snapping a picture every minute to create a time-lapse sequence.

Captured media is referenced by a text string URI. For more information, read the data type documentation.

Limitations

The camera control has these limitations:

1. When you use the camera control, the image doesn't contain meta-data information. This is due to a limitation of how we take images with the camera. To mitigate this issue, use the Add picture control
2. If your mobile device is low on memory, the camera is temporarily disabled to avoid crashing the device.
3. Power Apps for Windows might crash if you open an app that uses a camera control. To avoid this problem, use the web player on the Windows platform. Also, multiple cameras aren't supported.

Key properties

AvailableDevices – Table of the available cameras on the device.

Table contains two columns:

• Id number to be used with the Camera property
• Name provided by the device to identify the camera. Some platforms may include Front or Back to help locate the camera.

Note: Not all devices in the table may be usable in your app. Some may be specialized drivers or applications intended for specific purposes.

Camera – The numeric ID of the camera to use. Helpful on devices with more than one camera.

OnStream – Actions to perform when the Stream property is updated.

Photo – The image captured when the user takes a picture.

Stream – Automatically updated image based on the StreamRate property.

StreamRate – How often to update the image on the Stream property, in milliseconds. This value can range from 100 (1/10th of a second) to 3,600,000 (1 hour).

Additional properties

AccessibleLabel – Label for screen readers. Should describe the purpose of taking a picture.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Brightness – How much light the user is likely to perceive in an image.

Contrast – How easily the user can distinguish between similar colors in an image.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – The distance between a control's top and bottom edges.

OnSelect – Actions to perform when the user taps or clicks a control.

TabIndex – Keyboard navigation order compared to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container or screen.

Y – The distance between the top edge of a control and the top edge of the parent container or screen.

Examples

For these examples, you'll need a device with a camera. To test your app, use a web cam accessible from your browser. Or by saving your app and loading it into an iOS or Android device with a camera.

Simple display of a captured picture

1. Add a Camera control.

2. Authorize the app to use device's camera if prompted.

3. Add an Image control.

4. Set the Image property of the Image control to the following formula:

   Camera1.Photo
   

   Note

   Replace camera control name Camera1 as appropriate.

5. Press F5 to preview your app.

6. Take a picture by selecting or tapping the camera control. You should see the result in your image control.

Add pictures to an Image gallery control

1. Add a Camera control, name it MyCamera, and set its OnSelect property to this formula:

   Collect( MyPix, MyCamera.Photo )
   

   For more information:

   • How to add, name, and configure a control?
   • Read more about Collect function or other functions.

2. Press F5, and then take a picture by selecting or tapping MyCamera.

3. Add a Vertical gallery control. And then resize its Image control, its template, and the Image gallery control itself to fit in the screen.

4. Set the Items property of the Image gallery control to this formula:

   MyPix
   

5. Set the Image property of the Image control in the gallery to this formula:

   ThisItem.Url
   

   The picture that you took appears in the Image gallery control.

6. Take as many pictures as you want, and then return to the default workspace by pressing Esc.

7. (optional) Set the OnSelect property of the Image control in the Image gallery control to the formula:

   Remove( MyPix, ThisItem )
   

8. Press F5, and then select a picture to remove it.

Use the SaveData function to save the pictures locally or the Patch function to update a data source.

Change the active camera from a drop down

1. Add a Camera control.

2. Authorize the app to use device's camera if prompted.

3. Add a Drop down control.

4. Set the Items property of the dropdown to:

   Camera1.AvailableDevices
   

   Note

   Replace camera control name Camera1 as appropriate.

5. Set Camera property of the camera to:

   Dropdown1.Selected.Id
   

   Note

   Replace dropdown control name Dropdown1 as appropriate.

6. Press F5, and then select an item from the dropdown to change the camera.

Accessibility guidelines

The camera control shows camera feed and also functions as a button that takes a picture. So, there are similar accessibility considerations as with buttons.

Video alternatives

Consider adding an alternative form of input for users with visual disabilities. For example, Add picture to allow users to upload an image from their device.

Color contrast

There must be adequate color contrast between FocusedBorderColor and the outside color.

Screen reader support

AccessibleLabel must be present.

Keyboard support

• TabIndex must be zero or greater so that keyboard users can navigate to it.

• Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to update the visibility of focus indicators.

See also

Limitations of controls in Power Apps