# Camera

* [Bubble.io Plugin](#bubble.io-plugin)
* [JavaScript SDK](#javascript-sdk)

### 🧋 Bubble.io Plugin

#### \[Element] Natively - Camera

#### Events:

* **Camera Result Updated** - get called after
* **File Uploaded** - get called after the file was successfully uploaded on S3 (You can find a file URL in element's state)
* **File Size over limit** - Triggered when file size is more then File Size Limit param

#### States:

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

#### Actions:

* **Show Camera**
  * **Content Type** - Photo or Video
  * **Quality** - Low, Medium, or High
  * **Upload File** - checkbox (Upload file to Amazon S3)
  * **File Name** - will be used if **Upload File** is checked
  * **Camera Type** - FRONT / BACK
  * **File Size Limit** - (in KB) prevent uploading big files to Bubble's amazon S3

### 🛠 JavaScript SDK

#### NativelyCamera

{% code overflow="wrap" lineNumbers="true" %}

```javascript
const camera = new NativelyCamera()
const open_camera_callback = function (resp) {
    console.log(resp.base64); // base64 string of media file
    console.log(resp.content_type); // "image/png"
    console.log(resp.size); // "1024" <- file size in KB
};
const type = "photo" // "photo"/"video"
const quality = "high" // "high"/"medium"/"low"
const cameraType = "FRONT" // "FRONT"/"BACK"
camera.showCamera(type, quality, cameraType, open_camera_callback);
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.buildnatively.com/guides/integration/camera.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.