Camera

The Camera block shows a live camera feed and lets the user capture photos or record video clips. Captured photos are uploaded automatically and exposed as file objects your actions can use. Adding the Recording add-on converts the block from a photo capture surface to a video recorder — with optional auto-start, fixed duration, looping, and audio inclusion. On web apps, a Face Detection add-on can coach the user into a well-framed selfie before allowing the shutter.

A new Camera block starts on the front camera, mirrored, and fills its container at 100% width and height.

Tip: When to use Camera: Capture a photo as part of a flow — profile pictures, document scans, proof-of-delivery. Record short video clips (with the Recording add-on), hands-free if needed with Auto Record. Gate capture behind face alignment (Face Detection add-on, web only). For picking an existing file rather than capturing, use the File Upload block instead. For a richer mobile capture experience with crop and drawing, use the Photo Booth block.

Properties

Content

Appearance

Events

Methods

Exposed State

Behavior & Gotchas

Warning: On Photo Capture fires after the upload, not at the shutter. There is a gap between pressing capture and the event firing — on a slow connection this can be several seconds. {{ id.previewImage }} is set immediately at capture; {{ id.uploadedImage }} only arrives on upload success. If the upload fails, the event never fires.

Warning: switchCamera ignores the facingMode param. Calling the method always toggles to the opposite camera regardless of what you pass in the payload. Call it twice to return to the original.

Warning: Recording and face detection are mutually exclusive. If the Recording add-on has Auto Record, Duration, Loop or Loop Iterations set, face detection stops working even when its toggle is on. Recording wins.

Note: Auto Record runs once per page visit. With Auto Record on, the shutter disappears and recording starts once. After the first clip completes, it will not auto-start again. Call startRecording to record another take, or enable Loop with Loop Iterations to chain multiple clips.

Note: Looped recording emits one file per clip. Each finished clip fires On Recording Stop and On Recorded File Capture, then restarts. {{ id.recordedVideoFile }} always holds the latest clip only — save each one in your event handler if you need all clips.

Examples

Photo Booth

The Photo Booth block is a richer camera surface for native mobile apps only. It supports both photo and video capture, selectable quality and aspect ratio, a gallery picker, flash control, and optional editing steps — crop and drawing — before the upload. Every capture is uploaded automatically and exposed as a file object in state.

Warning: Native mobile apps only. Photo Booth does not appear in the web block library and has no web fallback. If your app targets web or responsive, use the Camera block instead.

Tip: When to use Photo Booth: Capture photos or short videos inside a mobile flow — ID verification, field inspections, support tickets. Let users annotate a capture before it uploads. For picking existing files without a camera UI, use a File Upload block instead. For web apps, use the Camera block.

Properties

Content

Add-ons

Events

Methods

Exposed State

Behavior & Gotchas

Warning: On Photo Capture fires only after the upload AND all editing steps. Taking a photo opens crop (if enabled), then drawing (if enabled), then uploads. The event fires after upload completes. Cancelling the crop or drawing step discards the capture entirely — no event fires.

Warning: On Permission Denied does not fire in the native runtime. Camera permission refusals update the state keys but do not invoke the event handler. Watch {{ id.hasCameraPermission }} with a conditional to respond to denial.

Note: Recording and photo editing add-ons are separate. Mirror, Photo Crop, Drawing Support and Flash Light are tied to Photo Mode — they disappear from the inspector when it is off and never affect video recordings.

Note: Recording events come in pairs, the file event later. On Recording Start and On Recording Stop wrap the recording itself. On Recorded File Capture fires separately after the video uploads. Use the stop event for UI feedback and the file event to act on the video.

Examples

Frequently Asked Questions

Should I use Camera or Photo Booth for a mobile app?

Use Photo Booth for mobile-only apps when you need richer capture features: crop editors, drawing/annotation, flash control, or combined photo-and-video modes with separate quality and aspect ratio settings. Use Camera when you need a cross-platform block (web and mobile), face detection (web), or programmatic recording with loop control. Both blocks upload automatically and expose the file in exposed state.

Why does my On Photo Capture action run long after the user taps the shutter?

On Photo Capture fires after the upload completes, not at the moment of capture. On a slow or congested network this can be several seconds. If you need to show immediate feedback, read {{ id.previewImage }} (Camera) or {{ id.previewMedia }} (Photo Booth) — these are set the instant the shutter fires, before the upload begins. Reserve On Photo Capture handlers for the actions that need the final uploaded file URL.

Can I start and stop recording programmatically, without the on-screen button?

Yes. Both Camera and Photo Booth expose startRecording and stopRecording methods you can call from any event using the Control Block Method action. For the Camera block, enable the Recording add-on first. For Photo Booth, turn on Video Mode. To record automatically without user input, enable Auto Record on the Camera block — it starts once per page visit and you call startRecording to capture additional takes.

The face detection shutter never appears even when I'm looking at the camera — what should I check?

Face detection on the Camera block has two known blockers: (1) it only works on web apps, not mobile; (2) if the Recording add-on has any of Auto Record, Duration, Loop or Loop Iterations set, recording mode takes over and face detection stops working even if its Detect Face toggle is on. Verify you're building a web app and that the Recording add-on has no settings active.

What happens if the user cancels the crop or drawing step in Photo Booth?

Cancelling either the crop or drawing editor discards the entire capture — no upload happens, no event fires, and the uploaded state keys are not updated. The preview may still show the captured frame. Your flow should be designed so the confirmation step only appears after On Photo Capture fires, which guarantees both the editing steps were completed and the upload succeeded.

Related Blocks