Getting Started
🔗Editor: https://bubble.io/page?id=testeplugins-85494&test_plugin=1770307714335x921782796558008300_current&tab=Design&name=camera_capture_pro&type=page&type_id=photos&elements=bTKIT5

Add the element — Drag the CameraCapturePro element onto your page and set the desired width and height. Enable "Vertical stretch" in the Bubble layout settings to prevent clipping.
Start the camera — Set the auto_start property to true to start automatically on page load, or trigger the Start Camera element action from a button in your workflow.
Capture a photo — Trigger the Capture Photo element action from a button. If countdown_enabled is true, the countdown runs first.
Use the image — The captured photo is available as a base64 data URL in the image_data exposed state. Upload it to Bubble storage, display it in an Image element, or send it to an API.

Confirmation Screen
Set show_confirmation = true to show a Retake / Use Photo screen after each capture. The user can review the image before confirming. Customize the button labels with confirm_accept_text and confirm_retake_text.
Capture Modes
The plugin supports 3 capture modes via the capture_mode property:

selfie — Circular guide, ideal for profile photos and avatars
document — Rectangular guide, ideal for IDs, documents, and cards
qrcode — Rounded square guide, ideal for QR codes and labels

Aspect Ratio
Control the output image proportions with output_aspect_ratio:

free — No constraint (captures the full frame)
1:1 — Square
3:4 / 4:3 — Portrait / Landscape classic
16:9 / 9:16 — Widescreen / Vertical

The visual guide and captured image both respect the chosen ratio.
Applying Filters
Filters are controlled via the filter_type property or the Apply Filter element action. Available filters: none, grayscale, sepia, contrast, brightness, saturate, invert, blur. Adjust intensity with filter_intensity (100 = default).
Effects

Countdown — Set countdown_enabled = true and configure countdown_seconds (default: 3)
Flash — Set flash_enabled = true for a white flash animation on capture
Shutter Sound — Set sound_enabled = true for a camera click sound

Crop Editor
Enable with enable_crop = true. After capture, a proportional crop editor appears with draggable handles. The user adjusts the selection and the image is cropped on confirmation.
Watermark & Timestamp

Set watermark_enabled = true and fill watermark_text to burn a text watermark into the captured image. Configure position with watermark_position (top-left, top-right, bottom-left, bottom-right, center) and opacity with watermark_opacity.
Set show_timestamp = true to burn the capture date/time into the image.

Face Detection (Experimental)
Enable with face_detection_enabled = true. Works only in Chrome with experimental flags enabled. Set require_face = true to block capture when no face is detected. Use show_face_indicator = true to display a "Face detected" badge on the preview.
Element Actions (8)
ActionDescriptionStart CameraStarts the camera. Optionally pass a device_idStop CameraStops the stream and releases hardwareCapture PhotoTakes a photo (respects countdown if enabled)Confirm PhotoProgrammatically confirms the captured photoRetake PhotoDiscards capture, returns to live previewClear ImageResets all image statesApply FilterApplies a filter with type and intensitySet Capture ModeChanges mode (selfie / document / qrcode)
Key Exposed States
StateDescriptionimage_dataBase64 data URL of the captured photo (main output)camera_statusidle, loading, active, or errorphoto_confirmedtrue when user confirmed the photoerror_messageHuman-readable error descriptioncamera_listJSON array of available camerasface_detectedWhether a face is currently detected
Typical Workflow
When Button "Capture" is clicked
 → Element Actions → CameraCapturePro → Capture Photo

When CameraCapturePro's photo_confirmed is "yes"
 → Upload file: CameraCapturePro's image_data
 → Create/Modify Thing: photo = result's URL
Error Handling
Listen for the camera_error event and check error_message / error_type to handle permission denials, missing cameras, and browser incompatibilities gracefully. Consider showing a file upload fallback when camera access fails.
Documentation Widget
For the complete reference (all properties, states, events, and workflow patterns), add the provided HTML documentation widget to your demo page. It includes a floating help button with a searchable panel.

Every property has its own description in the Bubble editor — hover over any property name to see its documentation.