Add a Camera Component to a Page

When you want your application to access the camera capabilities of the devices on which it is installed, you can add the camera component to your application’s page for users to take a photo or a video from the device's camera.

The camera capture works only on physical devices that actually support media captures. On other devices (like desktops), it works as a regular file picker that lets users select files from the device's storage.

1. Open the page in the Page Designer and drag the camera component from the Components palette onto the page canvas:
   
   

   
   Description of the illustration camera-component.png

   
   
2. In the General tab of the Properties pane, configure the component's properties for your use case:
   
   

   
   Description of the illustration camera-component-properties.png

   
   
   1. Use the Camera capture property to launch the camera on the user's device in a preferred camera mode:
      • To let the user take a selfie photo or video, select Front (Selfie). This option will directly launch the front-facing camera on the user's device.
      • To let the user take a photo or video of their environment, select Rear. This option will directly launch the rear-facing camera on the user's device.
      • To enable the device's default behavior for the preferred camera mode, select Default. This option will directly launch the camera on the user's device in the default camera mode, which on iOS devices (for example) is to open the rear camera.
      • To provide the user with choices, say, choose from the photo library or take a photo or video (instead of directly launching the camera), select None.
   2. Set the Accept property to the file types you want to accept from the device: photos, videos, or both. By default, both Photos and Videos are selected to provide the user with options to take either a photo or a video once the camera is launched.
   3. Optional: The camera component is preconfigured to use a Take Photo/Video button. This button acts both as a clickable control to activate the camera component and as a file drop zone for devices that support drag and drop. You can customize this button or replace it with other trigger components.
      To replace the default Take Photo/Video trigger button, click + next to trigger and select an option from the Preferred components:
      

      
      Description of the illustration camera-component-properties-slots.png

      
      

      • To add an Upload button that users click to upload files, select 'Upload' Button.
      • To create a basic drop zone/trigger that can be further customized with other components, select Custom Drop Zone.
      • To add a placeholder for an image that users click to upload images, select Image.

      Remember to delete the original Take Photo/Video trigger button:
      
      

3. In the Events tab of the Properties pane, configure the camera component's Selected Files event to trigger an action chain when a user selects the camera component. Make sure to select the Camera (File Picker) component, not the button component within the camera component.
   1. Click + Event Listener, and select On 'Selected Files':
      
      

      
      Description of the illustration camera-component-ojselect.png

      
      
      This creates the CameraFilePickerSelectChain action chain, which receives the files taken from the device. You can configure the action chain to upload the files to a server (via user-created JavaScript) or assign it to a variable, as we'll do next.
   2. Add the Assign Variable action to the canvas. For the Variable property, select the variable to hold the data from the Camera component (for example, FileArrayADP of type Array Data Provider):
      
      

      
      Description of the illustration camera-component-assignvariable.png

      
      

      Note:

      The items in the array are of type File (https://developer.mozilla.org/en-US/docs/Web/API/File). Each file is itself a Blob for the image or video, with properties such as name, size, and type. In Visual Builder, the files are passed to the action chain as an Array of type Object. When assigning to another variable, it is important that the type isn't changed to a custom type; otherwise, Blob data may be lost.
   3. Hover over the far-right side of the Value property and click the down arrow that appears to choose the action chain's files input parameter, which contains the Camera components data:
      
      

      
      Description of the illustration camera-component-assignvariable2.png

      
      
   4. Click the Page Designer tab to confirm that the array of files taken from the device is mapped to the CameraFilePickerSelectChain action chain:
      
      

      
      Description of the illustration camera-component-mapped.png

      
      
4. Click Preview to test the camera functionality.