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. The camera control is supported when running in a web browser.

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.

Images generated by the camera control aren't usually in the full resolution of the camera. If you need full resolution images, use the Add picture control.

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 – How the app responds 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 – How the app responds 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.

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

    Collect( MyPix, MyCamera.Photo )
    

    For more information:

  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 prroperty 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