--- title: "Photo/Video Control" slug: "photovideo-control" updated: 2025-12-11T02:11:33Z published: 2025-12-11T02:11:33Z canonical: "docs.processmaker.com/photovideo-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Photo/Video Control > [!TIP] > [**Plan Availability:**](https://www.processmaker.com/products/pricing/) ![Professional](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Professional.png)![Enterprise](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Enterprise.png) The Photo/Video control enables users to capture photos or videos directly within a screen, enhancing processes with real-time media inputs. This control can be configured for image or video capture, supports overlays for framing guidance, and integrates with ProcessMaker's Intelligent Document Processing (IDP) to send captured media for automated processing. - **Capture Flexibility:** Capture either photos or videos as part of form submissions. - **Customizable Overlays:** Add overlays for framing guidance and to standardize media captures. - **Automatic Processing**: Send captured media directly to ProcessMaker IDP for automated processing, such as OCR or verification. - **Cross-Device Compatibility:** Optimized for both mobile and desktop, supporting seamless use across devices. > This control is only available for Form-type Screens. See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use a Photo/Video control. [Embedded content](https://demos.processmaker.com/embed/_dJAAD_JIDhA8uTciN_8b?embed_v=2) --- ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the Screen: 1. [Create a new Form-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Input Fields** category, and then locate the **Photo/Video** icon![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/c9ba7b84-2830-49fb-93b1-f946918f18dc.png) 3. Drag and drop the control onto the Screen Builder canvas. Note that the media capture functionality won’t appear in design mode. Preview the screen to see it in action. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/291746b8-6dda-490f-b2c6-83ba0b0e4879.png) 4. Configure the Photo/Video control. See [Settings](/v1/docs/photovideo-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). 6. Click the **Preview** button to test the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/03ee1aec-8efa-4edb-a0e8-59028f96c6b7.png) 7. Click the camera icon ![Camera Capture](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Camera%20Capture.png) to capture the photo/video. 8. Click the upload icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Camera Upload.png) icon to upload the captured image. --- ## Settings The Image control has the following configurable settings in the Properties Panel: - [**Variable** panel](/v1/docs/photovideo-control#variable-panel-settings) - [**Configuration** panel](/v1/docs/image-control#configuration-panel-settings) - [**Design** panel](/v1/docs/image-control#design-panel-settings) - [**Advanced** panel](/v1/docs/image-control#advanced-panel-settings) --- ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Variable Name Edit the default **Variable Name** setting for this control if necessary. The **Variable Name** is used to reference this control during a case. Ensure that the **Variable Name** is unique in this [Screen](/v1/docs/screens) and contains at least one letter. This is a required setting. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/48d3bcf7-fd3c-43ab-a889-ef4f94d2caf7.png) Use the **Variable Name** setting value in the following ways: - Reference this control by its **Variable Name** setting's value. The **Data Preview** panel in Preview mode represents the state of the Photo/Video control using its **Variable Name** value in the Request's JSON data model. - Reference this control's value in a different control. To do so, use [mustache syntax](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(9).html) and reference this control's **Variable Name** value in the target control. Example: `{{ photo_video_1 }}`. - Reference this value in [**Visibility Rule** setting expressions](/v1/docs/photovideo-control#visibility-rule). See [best practices](/v1/docs/screen-design-best-practices#naming-request-variables-for-screen-controls) when editing a Request variable name. #### Label Edit the default label that displays for this control if necessary. **New Photo Video** is the default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/a586b43f-1bc3-4865-a887-886578ecfabd.png) #### Required[](/docs/photovideo-control#required) Select **Make Required** to indicate that this control is required for the user to submit the Screen. This option is not selected by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/49781ab0-9163-45d4-a359-80ac9632b671.png) --- ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### Helper Text[](/docs/photovideo-control#helper-text) Enter text that provides additional guidance on this control's use. This setting has no default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/69df5f0a-5a55-45e2-b122-05aba076b241.png) #### What to Capture[](/docs/photovideo-control#what-to-capture) Select the type of media this control can capture: - **Photo:** Select the **Photo** option to capture a still image. Use this option to record a photograph of the face or a national ID card. This is the default option. - **Video:** Select the **Video** option to capture a video. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/89157b38-f82e-4106-9032-edad7f54eec7.png) If your device has more than one camera available, such as a front and rear camera, optionally switch between them in Preview mode and during use. #### Intelligent Capture[](/docs/photovideo-control#intelligent-capture-send-to-idp) Enable the **Send to IDP** toggle key to send the captured photo or video to a pre-configured ProcessMaker IDP folder. Follow these steps to upload the photo/video to IDP: 1. Enable the **Send to IDP** toggle key. The **Document Type** setting displays. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/bc75bab4-d1c9-4572-b45f-056edf6fb6aa.png) 2. In the **Document Type** setting, enter the document type or a variable (without [mustache syntax](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(5).html)) that contains the document type. This setting does not refer to a file type, such as `PDF` or `DOCX`. Instead, this setting refers to the `DOCUMENT_TYPE` domain in ProcessMaker IDP that has been previously trained to process documents in a dossier. Note that this setting requires the `Document_Type` Domain's **Name** setting value, not its **Pretty Name** setting value. **Where do I find `DOCUMENT_TYPE` in ProcessMaker IDP?** ### Determine Which Document Type to Use 1. Log on to ProcessMaker IDP. If you need assistance logging on, contact your ProcessMaker IDP Administrator for assistance. 2. Click the initials of your user account in the lower-left in ProcessMaker IDP, and then select the **Go to ProcessMaker IDP Admin** option. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/e8e55b6a-8126-4a38-9e82-3f6527557910.png) 3. Click the **Domains** option from the left navigation pane. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/db4e25a1-be7a-403b-993d-be7ae99f054f.png) The **Domains** page displays. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/25bb01aa-e915-42dd-8b8e-34e94f69dcbc.png) 4. Locate the `Document_Type` domain, click its options menu, and then select the **Edit** option. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/247d83fc-4708-4bef-ba46-7d965eb4eed6.png) 5. The **Edit Domain** page displays for the `Document_Type` Domain. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7b2d0e16-9f71-4150-b2eb-ba3875a72f8c.png) 6. Click the **Enum values** option from the left-side pane. The **Enum values for Domain** page displays the enumeration values for the `Document_Type` Domain. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b1689ea2-dabc-4d9e-9cb6-4284cb3528f6.png) 7. Browse the list of values for the `Document_Type` Domain, and then locate the `Document_Type` Domain value that this IDP connector uses to process documents. 8. Click the options menu for your document type, and then select the **Edit** option. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/5ef87884-f14b-4c5f-8f32-315b157dbbd2.png) 9. Make note of the **Name** value for your document type. Use this value for the IDP connector's **Document Type** setting. An example is highlight below. Do not use the **Pretty Name** setting value for your document type. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/31f7bae1-b375-4615-bf7f-fca3d3c25f45.png) 3. From the **Select Destination** setting, do one of the following: - Select the **Use Request Variable** option, and enter a variable name (without [mustache syntax](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(5).html)) that contains the name of the destination folder in IDP where the file should be uploaded. If the folder does not exist, a new folder is automatically created. - Ensure that the **Use Request Variable** setting is not selected, then choose a destination folder from the drop-down list. These folders already exist in ProcessMaker IDP and are configured in the [destination folder settings for IDP.](/v1/docs/idp-settings#select-folders-from-which-to-store-processed-documents) **Note:** If the **Send to IDP** toggle key is enabled but at least one ProcessMaker IDP folder is not already configured, then the following message displays when the Screen opens: **401 Unauthorized: Unable to access the IDP folders. The folders may not be configured for your environment or may not exist. Please contact your administrator.** Ensure to [configure a ProcessMaker IDP folder](/v1/docs/idp-settings#select-idp-folders-for-saving-processed-documents) prior to deploying this Screen to production. #### File Name[](/docs/photovideo-control#file-name) After a file is uploaded via the Photo/Video control, it is stored in the [File Manager](/v1/docs/file-management). If the **Send to IDP** option is selected, it is also uploaded to ProcessMaker IDP. Use the **File Name** setting to specify the name that will be used when saving the uploaded photo or video. Enter static text or use [mustache syntax](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(9).html) to set the file name using a variable. This is a required setting. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/17a54c1a-c5a5-4014-8c57-f800b8d110d7.png) Optionally, click the **Upload Overlay** button to upload a custom overlay that displays over the real-time capture area prior to recording the photo or video. The following file types are supported: - GIF - JPG - PNG - WebP When an overlay is uploaded, a preview displays below the **Upload Overlay** button. Below is an example in Preview mode. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/35cb6e0a-d7bd-4bcb-8850-1320c63c29ca.png) --- ### Design Panel Settings Expand the **Design** panel from the Properties Panel on the right to configure the following properties: #### Background Color[](/docs/photovideo-control#background-color) Select the background color that displays for this control. Optionally, click the **Clear Color Selection** option to remove the selected color. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/3e7ccb0c-92ae-42bd-bbdb-b4775f712e4a.png) #### Text Color[](/docs/photovideo-control#text-color) Select the text color that displays for this control. Optionally, click the **Clear Color Selection** option to remove the selected color. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/a53e9960-4cb4-44bf-b901-cacd4257fd0f.png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### CSS Selector Name[](/docs/photovideo-control#css-selector-name) Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/e4f0a174-db9b-4d3c-a7e4-4bd6bcda9c64.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings) #### Visibility Rule[](/docs/photovideo-control#visibility-rule) Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/560024cc-4a4b-42d1-ae7a-2b457943eaaf.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility[](/docs/photovideo-control#device-visibility) Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/26c81de9-88e7-4960-b4e5-258c34a445e1.png)