📷Camera

Let users capture photos or record videos directly within your app using the native camera.

What is the Camera?

The Camera feature gives your app access to the device's native camera, letting users take photos or record videos without leaving the app. The captured media is returned as a Base64-encoded string, which you can display directly in your app or upload to your server.

Capturing a photo requests camera permission on both iOS and Android. Recording a video requests both camera and microphone permissions on both platforms. Users will be prompted to grant these permissions the first time the feature is used.

Prerequisites

This feature requires any paid plan. See all plans

Natively Dashboard Setup

The Camera feature is automatically enabled for all new apps. You only need to visit this section if you want to disable it or update the Permission Description.

Open your Natively app dashboard and navigate to Features > Camera.
Toggle the feature to Enabled.
Enter the Permission Description.
Click Save.
Rebuild your app(s).

The Permission Description is the text shown to users when the OS asks them to grant camera access. Explain clearly why your app needs this permission - for example: "We use your camera to let you upload photos."

You must rebuild your app for these changes to take effect.

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code), JavaScript SDK (Code), or AI Agents (for AI-powered editors like Lovable, Base44, and Replit).

Initialization

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
Check Installed Plugins: Look through your list of installed plugins for "Natively iOS & Android app builder".
- If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.

If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

Initialize the SDK

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.

Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.

Check if the following Natively SDK script is present in the <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic

[Element] Natively - Camera

Events:

Camera Result Updated - fires when the camera capture result is ready.
File Uploaded - fires after the file was successfully uploaded to Amazon S3. The file URL is available in the element's state.
File Size over limit - fires when the captured file exceeds the configured File Size Limit.

States:

Camera Result (Base64) - Base64 string representation of the captured file. Can be used for custom uploading.
Camera Result (Content Type) - image/png, image/jpeg, or video/mp4.
Uploaded File URL - the Amazon S3 URL of the uploaded file.
File Size - size of the latest camera result file, in KB.

Actions:

Show Camera:
- Content Type - Photo or Video.
- Quality - Low, Medium, or High.
- Upload File - checkbox. If checked, uploads the file directly to Bubble's Amazon S3.
- File Name - used only if Upload File is checked.
- Camera Type - FRONT / BACK.
- File Size Limit - in KB. Prevents uploading files larger than this size to Bubble's Amazon S3.

// ============================================================================
// NATIVELY CAMERA - DOCUMENTATION & EXAMPLES
// ============================================================================

// Initialize
const camera = new NativelyCamera();

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// camera.showCamera(type, quality, cameraType, callback)
//   - Opens the native camera.
//   - type: string — "photo" or "video"
//   - quality: string — "high" / "medium" / "low"
//   - cameraType: string — "FRONT" or "BACK"
//   - callback: function — called after the user captures media or cancels

// ============================================================================
// CALLBACK RESPONSE FIELDS
// ============================================================================
// resp.base64        - Base64 string of the captured media file
// resp.content_type  - "image/png" / "image/jpeg" / "video/mp4"
// resp.size          - File size in KB (as a string, e.g. "1024")

// --- Camera. Photo Example. Start ---

const open_camera_callback = function(resp) {
    console.log(resp.base64);
    console.log(resp.content_type);
    console.log(resp.size);
};

const type = "photo";
const quality = "high";
const cameraType = "BACK";

camera.showCamera(type, quality, cameraType, open_camera_callback);

// --- Camera. Photo Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively Camera SDK: const camera = new NativelyCamera(); // camera.showCamera(type, quality, cameraType, callback) — opens the native camera. type: "photo"/"video". quality: "high"/"medium"/"low". cameraType: "FRONT"/"BACK". resp.base64: Base64 string of captured media. resp.content_type: "image/png"/"image/jpeg"/"video/mp4". resp.size: file size in KB (string). For reference: https://docs.buildnatively.com/natively-platform/features/camera

Replace the placeholder at the beginning with a description of what you want to build - for example: "Open the camera when the user taps the upload photo button, and display the captured image on the screen".

How to use

Choose the right type for your use case

Use photo for profile pictures, document scans, or single-image uploads. Use video when you need short clips - like a video review or a quick demo recording. Video capture requests both camera and microphone permissions.

Match quality to your use case

Use high for content that will be displayed prominently or needs to be sharp. Use medium or low for thumbnails or quick uploads where minimizing file size matters more than resolution.

Handle the Base64 result

The camera returns captured media as a Base64 string via resp.base64. Display it directly with a data: URI or upload it to your own server.

Check content_type before processing

resp.content_type can be image/png, image/jpeg, or video/mp4 depending on type and platform - always check this value rather than assuming a fixed format.

Troubleshooting

Camera permission denied

If the user previously denied camera (or microphone, for video) access, the native camera prompt won't appear. Direct them to Open App Settings to manually re-enable the permission.

Camera feature not working after disabling and re-enabling

Since Camera can be toggled off in the dashboard, make sure you've re-enabled it, saved, and rebuilt the app - toggling the setting alone doesn't apply until a rebuild.

Not working in a web browser

This is a native feature and will not work in a standard web browser. Test on a real device using a Natively build or the Preview app.

PreviousCalendars NextContacts

Last updated 1 month ago