Actions
Open Camera

openCamera

OpenCamera action enables users to access their device's camera, capturing images or videos directly from the app, enhancing interactivity and enabling seamless integration of media functionalities within the application. With id property we can bind results of camera. Then use the onComplete properties to execute other actions after capture or selection is done.

Properties

PropertyTypeDescription
idstringGive the camera an ID, allows you to bind to its result. e.g. ${cameraId.files...}
onCompleteactionExecute an Action after completing capturing media
onCloseactionExecute an Action on camera close
onCaptureactionExecute an Action on each capture
optionsobjectdifferent options to chose for openCamera action. see properties

properties.options

PropertyTypeDescription
modestringModes of camera. It can be photo only i.e allows to capture just photo. Similarly video or can be both. photo video both
initialCamerastringInitialize either camera, back or front. back front
allowGalleryPickerbooleanAllow users to pick media from gallery. Default (true).
allowCameraRotatebooleanAllow users rotate camera i.e back and front. Default (true).
allowFlashControlbooleanAllow users to control flash options. Default (true).
previewbooleanIf set true, users can view captured/selected media.
maxCountnumberIt used to control number of media that can be captured/selected
maxCountMessagestringCustom message to show when captured/selected media is greater than maxCount
minCountnumberIt used to control number of media that can be captured/selected
minCountMessagestringCustom message to show when captured/selected media is greater than minCount
permissionDeniedMessagestringSet custom message when access to camera is denied
nextButtonLabelstringSet custom label on next button.
cameraRotateIconwidgetSet custom icon for camera rotate button. see here
galleryPickerIconwidgetSet custom icon for gallery picker button. see here
focusIconwidgetSet custom icon for focus node.
assistAngleobjectShow assist message whenever angle goes below minAngle or above minAngle. see properties
assistSpeedobjectShow assist message whenever camera is moving faster than maxSpeed. see properties
autoCaptureIntervalintegerIf set any number n, on each n interval camera will capture
Values for options.assistAngle
PropertyTypeDescription
minAnglenumberMinimum angle
maxAnglenumberMaximum Angle
maxAngleassistAngleMessagenumberCustom message to show when condition is hit.
Values for options.assistSpeed
PropertyTypeDescription
maxSpeednumberMaximum speed in km/hr.
assistSpeedMessagenumberCustom message to show when condition is hit.

Usage Examples

View:
  header:
    title: "Action: openCamera"
  styles:
    scrollableView: true
  body:
    Column:
      styles: { gap: 16, padding: 24 }
      children:
        - Button:
            label: Open Camera
            onTap:
              openCamera:
                id: cameraId
 
                options:
                  mode: photo
 
        - Conditional:
            conditions:
              - if: ${cameraId.files.length > 0}
                Carousel:
                  item-template:
                    data: ${cameraId.files}
                    name: file
                    template:
                      Image:
                        source: ${file.path}

openCamera also comes with options

- Button:
    label: Camera with options
    onTap:
      openCamera:
        id: cameraId1
        options:
          allowGalleryPicker: true
          allowCameraRotate: true
          allowFlashControl: true
          preview: true
          maxCount: 2
          mode: photo
 
- Conditional:
    conditions:
      - if: ${cameraId1.files.length > 0}
        Carousel:
          item-template:
            data: ${cameraId1.files}
            name: file
            template:
              Image:
                source: ${file.path}

openCamera also comes with advance options

  • assistAngle, show message when phone angle goes below min angle or goes beyond max angle.
  • assistSpeed, show message when phone goes beyond max speed.
  • minCount/maxCount, type is a number and can also be set to minCount: ${ensemble.storage.xyz} to get a dynamic value
- Button:
    label: Camera with advance options.
    onTap:
      openCamera:
        options:
          allowGalleryPicker: true
          allowCameraRotate: true
          allowFlashControl: true
          preview: true
 
          assistAngle:
            minAngle: 80
            maxAngle: 100
            assistAngleMessage: Please try to keep angle approx. 90 degree.
 
          assistSpeed:
            maxSpeed: 10
            assistSpeedMessage: Please try to speed below 10 km/hr.

You can capture and upload to specified API

        - Button:
            label: Capture and upload
            onTap:
              openCamera:
                id: captureMedia
                onComplete:
                  uploadFiles:
                    id: uploader
                    files: ${captureMedia.files}
                    uploadApi: fileUploadApi
                    fieldName: files
                    inputs:
                      url: <specify your url>
 
 
        - Markdown:
            text: ${uploader.body}
 
API:
  fileUploadApi:
    inputs:
      - url
    uri: ${url}
    method: POST

To learn more about openCamera functionalities, test it out here in Ensemble Kitchen Sink (opens in a new tab) app.