> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/natively-platform/features/camera.md).
# 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](/natively-platform/features/microphone.md) permissions on both platforms. Users will be prompted to grant these permissions the first time the feature is used.
## Prerequisites
{% hint style="success" %}
This feature requires any **paid** plan. [See all plans](/getting-started/subscription-plans.md)
{% endhint %}
## Natively Dashboard Setup
{% hint style="success" %}
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.
{% endhint %}
1. Open your Natively app dashboard and navigate to **Features > Camera**.
2. Toggle the feature to **Enabled**.
3. Enter the **Permission Description**.
4. Click **Save**.
5. Rebuild your app(s).
{% hint style="info" %}
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."
{% endhint %}
{% hint style="warning" %}
You must rebuild your app for these changes to take effect.
{% endhint %}
## 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
{% tabs %}
{% tab title="Bubble.io Plugin" %}
**Check Plugin**
Before starting, verify if the Natively plugin is already installed in your Bubble project.
1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
2. **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.
{% endtab %}
{% tab title="JavaScript SDK" %}
**Check SDK**
Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.
1. Open your project's main HTML file (or header settings) and look for the Natively script tag inside the `` section.
2. Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., `@2.26.0`).
```javascript
```
{% hint style="info" %}
To ensure you are using the most up-to-date version, check the [Natively GitHub releases page](https://github.com/buildnatively/js-sdk/releases) for the latest version number.
{% endhint %}
{% endtab %}
{% tab title="AI Agents" %}
**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 of index.html. If missing or outdated, add it: For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases
```
{% endtab %}
{% endtabs %}
### Setup Logic
{% tabs %}
{% tab title="Bubble.io Plugin" %}
### \[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.
{% endtab %}
{% tab title="JavaScript SDK" %}
```javascript
// ============================================================================
// 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 ---
```
{% endtab %}
{% tab title="AI Agents" %}
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
{% hint style="warning" %}
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".
{% endhint %}
{% endtab %}
{% endtabs %}
### 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.
[^1]: Replace this placeholder
