> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/camera.md). # Camera The Camera component captures images directly within your Salesforce pages using the device's webcam or mobile camera. Display it inline or as a button, with optional countdown capture, multiple captures, and automatic saving of photos as Salesforce Files. ## Overview The Camera component leverages the device's hardware (laptop webcam or mobile camera) to capture photos without requiring the user to leave the application or upload files manually. It is designed to streamline workflows that require visual documentation, optionally saving captured images as Salesforce Files (`ContentDocument`) and linking them to a record. | Use Case | Description | Example | | -------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | Field Service | Technicians can document site conditions or completed repairs directly on mobile. | Linking a photo of a repaired HVAC unit to a `Work Order` record. | | Inspections & Audits | Real-time visual proof for compliance checks and safety audits. | Capturing images of property damage during a housing inspection to attach to a `Case`. | | Customer Support | Allow agents or customers (Experience Cloud) to submit visual evidence of issues. | A customer uploading a photo of a damaged shipment directly to a support portal `Claim`. | | Sales & Retail | Document visual merchandising, shelf displays, or event setups. | A sales rep taking a photo of a store display to verify compliance with a marketing agreement. | | HR & Identity | Capture standardized profile photos for identification. | Updating a `User` or `Employee` record with a fresh profile picture. | ## Configuration To configure the Camera, select it on the canvas. The **Edit Camera** panel opens on the right with a **Properties** tab and an **Interactions** tab. The sections below mirror the Properties tab. ### Properties #### Display As Determines how the camera is presented. Choose **Inline** (default) to embed the live camera feed directly on the page, or **Button** to show a button that opens the camera when clicked. #### Auto Start Camera When enabled, the camera starts automatically as soon as the component loads. Requires the **Display As** setting to be **Inline**. #### Display Captured Photos When enabled, captured images are displayed below the camera view so users can review them. #### Display Countdown When enabled, a countdown timer is shown before the image is captured — useful for hands-free scenarios. #### Countdown Duration (seconds) Sets the length of the countdown timer, between 1 and 5 seconds (default 3). Requires **Display Countdown** to be enabled. #### Allow Multiple Captures When enabled, the user can capture several images in one session. #### Image Layout Sets how captured images are arranged: **Inline** (default), **Grid**, **Horizontal List**, or **Vertical List**. Requires **Allow Multiple Captures** to be enabled. #### Size Defines the size of the video live stream: **Small**, **Medium**, **Large**, or **Responsive** (default). Available under Advanced Options. #### Video Aspect Ratio Defines the aspect ratio of the video live stream: **1-by-1**, **4-by-3** (default), **16-by-9**, **3-by-4**, or **9-by-16**. Available under Advanced Options. #### Crop Fit Controls how the video fits inside its container: **Cover** (default, fills the frame and may crop edges), **Contain** (shows the full feed, possibly with bars), **Fill**, or **None**. Available under Advanced Options. #### Default Image Title The default title given to captured images (default `Untitled`). #### Save as Content Document When enabled, captured data is saved as a Salesforce File (`ContentDocument`). When disabled, the component returns Base64 image data only, which requires custom logic (Apex/Flow) to process. #### Content Document Linked Entity Id The record Id that the saved file should be linked to — typically bound to the current page's record Id. Requires **Save as Content Document** to be enabled. ### Button Icons This collapsible group lets you set the icon for each camera button: **Capture Photo Button Icon**, **Delete Photo Button Icon**, **Download Photo Button Icon**, **Rename Photo Button Icon**, **Start Camera Button Icon**, and **Stop Camera Button Icon**. ### Labels This collapsible group lets you set the text label for each camera button: **Capture Photo Button Label**, **Delete Photo Button Label** (default `Delete`), **Download Photo Button Label** (default `Download`), **Rename Photo Button Label** (default `Rename`), **Start Camera Button Label**, and **Stop Camera Button Label**. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Camera. Configure them from the **Interactions** tab of the Edit Camera panel. ### Capture Photo Fires after the user successfully captures a photo. Use this to show a confirmation toast, advance to the next step in a flow, or trigger any logic that should run once a photo is taken. ### Start Camera Fires when the camera preview opens — either when the user clicks the start button or automatically on page load when **Auto Start Camera** is enabled. Use this to log analytics or set a variable that tracks camera activity. ### Stop Camera Fires when the camera is closed or the user cancels the session. Use this to reset variables or navigate the user to a different screen. ### Example: Adding Photo Evidence to a Case {% stepper %} {% step %} #### Add Camera Component Add the Camera component to the canvas. {% endstep %} {% step %} #### Configure Camera * **Display As**: Button * **Allow Multiple Captures**: enabled * **Save as Content Document**: enabled * **Content Document Linked Entity Id**: bound to the current record's Id using the resource selector {% endstep %} {% step %} #### Add Interaction * Select the Camera component. * Go to the **Interactions** tab. * Add an action to the **On Capture Photo** event. * **Action Type:** Show Toast * **Configure Toast:** Variant `success`, Title `Success`, Message `Photo(s) attached to Case!`. {% hint style="info" %} Ensure the **`Save as Content Document`** option is enabled (checked) on the component, AND that the **`Content Document Linked Entity Id`** field is set to the current record's ID (by binding it to **`$Component.recordId`** using the resource selector) {% endhint %} {% endstep %} {% endstepper %} **Result:** The user takes photos and confirms. The photos are saved as Files and automatically linked to the Case, and a success toast confirms the action. {% hint style="warning" %} **Key Considerations** * **Permissions**: Users need device permissions to access the camera, plus Salesforce permissions to create `ContentDocument` (Files) and `ContentDocumentLink` records when saving and linking files. * **Mobile first**: While functional on desktops with webcams, the experience is typically optimized for the Salesforce Mobile App or mobile browsers. * **Save as Content Document**: Enabling this is the simplest way to persist images in Salesforce. If disabled, handling the output data requires custom logic (Flow/Apex). * **Network connection**: Required for saving files to Salesforce. * **Storage limits**: Be mindful of Salesforce file storage limits. {% endhint %} ## Output Variables The Camera exposes these output variables you can reference elsewhere on the page after the user captures a photo. ### Photo Capture When the user captures a photo, these variables update with the image data. | Output variable | Type | What it returns | | -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | **Value** | Text (String) | The most recently captured photo as a Base64-encoded string. When **Allow Multiple Captures** is disabled, this is the only output you need. | | **Value Collection** | Text Collection | All captured photos as a collection of Base64-encoded strings. Only populated when **Allow Multiple Captures** is enabled. | > **Example:** After the user captures a photo on a Work Order page, use **Value** in a downstream Flow or Apex action to process or display the image, or rely on **Save as Content Document** to have the component persist it automatically as a Salesforce File. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/camera.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.