# Camera

## Overview

The Camera component enables native image capture functionality directly within your Salesforce pages. It 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.

This component is designed to streamline workflows that require visual documentation, automatically saving captured images as Salesforce Files (`ContentDocument`) and linking them to the current record.

***

## Common Use Cases

<table><thead><tr><th width="177.265625">Use Case</th><th>Description</th><th>Example</th></tr></thead><tbody><tr><td>Field Service</td><td>Technicians can document site conditions or completed repairs directly on mobile.</td><td>Linking a photo of a repaired HVAC unit to a <code>Work Order</code> record.</td></tr><tr><td>Inspections &#x26; Audits</td><td>Real-time visual proof for compliance checks and safety audits.</td><td>Capturing images of property damage during a housing inspection to attach to a <code>Case</code>.</td></tr><tr><td>Customer Support</td><td>Allow agents or customers (Experience Cloud) to submit visual evidence of issues.</td><td>A customer uploading a photo of a damaged shipment directly to a support portal <code>Claim</code>.</td></tr><tr><td>Sales &#x26; Retail</td><td>Document visual merchandising, shelf displays, or event setups.</td><td>A sales rep taking a photo of a store display to verify compliance with a marketing agreement.</td></tr><tr><td>HR &#x26; Identity</td><td>Capture standardized profile photos for identification.</td><td>Updating a <code>User</code> or <code>Employee</code> record with a fresh profile picture.</td></tr></tbody></table>

***

## Configuration

Select the Camera component on the canvas to access its properties. The configuration is divided into Data/Storage, Display settings, and Interaction events.

### **Data & Storage (Crucial)**

These settings determine where the photo is stored and which Salesforce record it attaches to.

#### Value *(Variable - Required)*&#x20;

Bind this to a Text Variable (for single capture) or Text Collection (for multi-capture).

> Output: Upon successful capture, this variable will store the Salesforce ContentDocumentId(s) of the new file(s).

#### Save as Content Document *(Boolean)*

* Checked (Recommended): Automatically saves the image as a Salesforce File (`ContentDocument`) immediately upon confirmation.
* Unchecked: Returns Base64 image data only. *Requires advanced custom logic (Apex/Flow) to process and is not recommended for standard use cases.*

#### Content Document Linked Entity Id

* *Visible only when "Save as Content Document" is checked.*
* Purpose: Specifies the Salesforce Record that the photo should be attached to.
* Configuration: Usually bound to the current page's record ID using `$Component.recordId` (or `@recordId`).

### **Display & Behavior**

Control how the camera appears to the user and how the capture workflow operates.

<table><thead><tr><th width="216.359375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Display As</strong></td><td><p><strong>Inline</strong>: Embeds the live camera feed directly on the page.<br></p><p><strong>Button</strong>: Shows a "Take Photo" button that opens a modal/fullscreen camera when clicked.</p></td></tr><tr><td><strong>Allow Multiple Captures</strong></td><td>If True, users can take several photos in one session. Requires the <em>Value</em> attribute to be a Collection Variable.</td></tr><tr><td><strong>Display Captured Photos</strong></td><td>If True, shows thumbnails of taken photos below the camera view for review before saving.</td></tr><tr><td><strong>Display Countdown</strong></td><td>Adds a delay (in seconds) between pressing the shutter and taking the photo. Useful for hands-free scenarios.</td></tr></tbody></table>

### **Visual Customization**

Fine-tune the aesthetics of the camera frame.

#### Aspect Ratio

Sets the frame dimensions (e.g., `1:1` Square, `4:3` Standard, `16:9` Widescreen).

#### Crop Fit

Determines if the video feed should `Cover` (fill the frame, potentially cropping edges) or `Contain` (show full feed, potentially with black bars).

#### Icons & Labels

You can customize the specific icons and text labels for the Shutter, Delete, and Confirm buttons to match your brand language.

***

## Configuring Interactions

The Camera component supports unique events that trigger other actions (like Flows or Toast notifications).

<table><thead><tr><th width="180.828125">Event</th><th>Trigger</th><th>Common Use Case</th></tr></thead><tbody><tr><td><strong>On Image Capture</strong></td><td>Fires after the user successfully takes a photo and clicks confirm.</td><td>Show Toast ("Photo Saved!") or Navigate to the next step in a wizard.</td></tr><tr><td><strong>On Start Camera</strong></td><td>Fires when the camera preview opens (or page loads if Inline).</td><td>Logging analytics or setting a "Camera Active" variable.</td></tr><tr><td><strong>On Stop Camera</strong></td><td>Fires when the user closes the camera or cancels the action.</td><td>Resetting variables or navigating back to a home screen.</td></tr></tbody></table>

***

## Example

### Adding Photo Evidence to a Case

{% stepper %}
{% step %}

#### Add Camera Component

Add the Camera component to the canvas.
{% endstep %}

{% step %}

#### Configure Camera

* API Name: `evidenceCamera`
* Label: "Attach Photo Evidence"
* Display As: `button`
* Allow Multiple Captures: Checked
* Save as Content Document: Checked
  {% endstep %}

{% step %}

#### Add Interaction to Button

* Select the `evidenceCamera` component.
* Go to the **Interactions** panel.
* Add an action to the **On Image Capture** event (or similar success 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:** User clicks "Attach Photo Evidence", takes photos, confirms. The photos are saved as Files *and* automatically linked to the Case. A success toast confirms the action.

{% hint style="warning" %}

## Key Considerations

* **Permissions**: Users need device permissions to access the camera. They also need Salesforce permissions to create `ContentDocument` (Files) and potentially `ContentDocumentLink` records if saving/linking files.
* **Mobile First**: While functional on desktops with webcams, the user 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. Consider offline capabilities if necessary (this may require different solutions).
* **Storage Limits**: Be mindful of Salesforce file storage limits.
  {% endhint %}

***

## In Summary

The Avonni Camera component offers an integrated, no-code solution for capturing images directly within your Salesforce UI on Lightning Pages, streamlining workflows for field service, inspections, evidence gathering, and more, particularly in mobile use cases.