# Camera Blocks

## Overview

The camera blocks provide functionalities to interact with the device's camera. These blocks enable users to capture images or record videos directly within the app.&#x20;

## Advanced Blocks

Each block in the camera blocks drawer has a regular and advanced block. To access the advanced version of a block:

1. Add the block to your workspace.
2. Right-click on it.
3. Select **Show advanced block**.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWcC8rHhZNiN0CSme5%2F-MJWchC-pUrSUWvesck7%2Fimage.png?alt=media&#x26;token=852c3dae-8c13-4f66-9ce1-61ce21beb98c" alt="" width="563"></div>

### Outputs

The advanced blocks return an "error" output block. If there is an error when executing the block, the error block will return an error message. If not, the error block will return a null value.

## Photo from Camera

The "photo from camera" block opens the device's camera and allows the user to take a photo. The photo can then be used in the app.

### Regular Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWcC8rHhZNiN0CSme5%2F-MJWcll4kOJIL7_xllsO%2Fimage.png?alt=media&#x26;token=97ad573f-91a4-483c-a7d4-296169eb70c9" alt="" width="188"></div>

### Advanced Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWcC8rHhZNiN0CSme5%2F-MJWcpM_83D3TmLxqVeC%2Fimage.png?alt=media&#x26;token=a95e2976-e20c-42df-b046-6af79b206a91" alt="" width="375"></div>

<table><thead><tr><th width="180">Output Name</th><th width="158.33333333333331">Data Type</th><th>Function</th></tr></thead><tbody><tr><td>photo</td><td>image</td><td>If a photo was taken, returns the photo.</td></tr><tr><td>was cancelled</td><td>true/false</td><td>Returns whether the user cancelled taking the photo.</td></tr><tr><td>error</td><td>text</td><td>If there was an error, returns the error.</td></tr></tbody></table>

### Video Tutorial

#### How to Use the Device’s Camera in a Thunkable App

In this tutorial, you’ll use Thunkable camera app features to create an app that takes a photo with the device's camera.

{% embed url="<https://youtu.be/2vAzECsNKyc>" %}

## Image Recognition

The "description of image from" block generates a description of a given image. This block requires internet access.

This component is powered by [Microsoft Azure](https://blogs.microsoft.com/ai/azure-image-captioning/). You can get your own server URL and subscription key for Microsoft Azure [here](https://azure.microsoft.com/en-us/free/). You can add these details to your app in the [Project Settings panel](https://docs.thunkable.com/settings/project-settings#api-keys), which you can access by clicking on your app icon.

### Regular Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWdyIKyih8QG2NMdPR%2F-MJWe78cumnH8kcGT_-N%2Fimage.png?alt=media&#x26;token=366b818e-9e3e-4259-a77e-f982c5bd1579" alt="" width="375"></div>

### Advanced Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWdyIKyih8QG2NMdPR%2F-MJWe9PkgzMZTGd-ps7R%2Fimage.png?alt=media&#x26;token=17012c88-133f-4130-926a-77b28204b558" alt="" width="375"></div>

<table><thead><tr><th width="218.33333333333331">Output</th><th width="240">Data Type</th><th>Function</th></tr></thead><tbody><tr><td>description</td><td>text</td><td>Description of the image.</td></tr><tr><td>tags</td><td>list of text</td><td>Returns tags used to identify the image.</td></tr><tr><td>confidence level</td><td>number between 0 and 1</td><td>Returns calculated confidence level that the given description is accurate.</td></tr><tr><td>error</td><td>text</td><td>If there was an error, returns the error.</td></tr></tbody></table>

### Video Tutorial

#### How to Create an Image Recognition App with Thunkable

In this tutorial, you’ll use Thunkable camera app features to create an app that takes a photo with the device's camera and utilizes image recognition functionality to identify the photo’s content.

{% embed url="<https://youtu.be/tH4k9sXgzFY>" %}

Some more examples:

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FPnwF8G8fyVdJ8di0rUBE%2Fdescription%20of%20image%201.png?alt=media&#x26;token=057e613e-a9ec-43fc-a2ff-0dd693a29740" alt=""><figcaption></figcaption></figure></div>

Connect the `photo from photo library` block to the `description of image from` block to allow users to browse and select any image stored on their device's photo library.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FFh66JEdDxVgvIKFGWMlA%2Fdescription%20of%20image%202.png?alt=media&#x26;token=beabb068-5eac-4672-b9fb-85e0bbf3be60" alt=""><figcaption></figcaption></figure></div>

Connect the `photo from camera` block to the `description of image from` block to let users take a picture from their device's camera and upload it instantly.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FrZdinJyC8nNQf16Tb4wo%2Fdescription%20of%20image%203.png?alt=media&#x26;token=abe1f570-989f-458e-a224-164a30996240" alt=""><figcaption></figcaption></figure></div>

Connect the `image file from device` block to the `description of image from` block for a more universal option that works on Android, iOS, and even in web apps, allowing users to upload any image file from their device, no matter the platform.

## Barcode or QR Code Scanner

The "barcode scanned using camera" block scans a barcode or QR code and returns its value.

### Regular Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWdyIKyih8QG2NMdPR%2F-MJWeD9wEKJkpmNZN2nk%2Fimage.png?alt=media&#x26;token=6d208a4a-58b3-4499-b437-d0b038a07b96" alt="" width="375"></div>

### Advanced Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJWdyIKyih8QG2NMdPR%2F-MJWeF_hn0uOgK61vGwz%2Fimage.png?alt=media&#x26;token=8938568d-2c70-42b0-9d1d-60110b1fbf15" alt="" width="563"></div>

<table><thead><tr><th width="190.33333333333331">Output</th><th width="179">Data Type</th><th>Function</th></tr></thead><tbody><tr><td>value</td><td>text</td><td>Value of scanned barcode/QR code.</td></tr><tr><td>type</td><td>text</td><td>Returns whether it was a barcode or QR code that was scanned.</td></tr><tr><td>was cancelled</td><td>true/false</td><td>Returns whether the user cancelled scanning a code.</td></tr><tr><td>error</td><td>text</td><td>If there was an error, returns the error.</td></tr></tbody></table>

### Video Tutorial

#### How to Use the Device’s Camera as a QR or Barcode Scanner in a Thunkable App

In this tutorial, we’ll add the functionality to scan a barcode or QR code with the device's camera.

{% embed url="<https://youtu.be/FylKKJwu7nI>" %}

**Template App**

1. Click: <https://x.thunkable.com/projectPage/65316fd3f5f2ffa55473cc9a>
2. Click **Copy Project** in the upper right.

## Record Timed Video

The "video file from \[5] second recording using \[back] camera" block opens the device's camera and films from the selected camera for the chosen amount of time and then returns the video file.

### Regular Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-1024951234%2Fuploads%2FDfP2qcCVNW5oXv8no2LP%2Fvideo.png?alt=media&#x26;token=ba35f891-4f11-4e67-a4c6-a99910bbf5c2" alt="" width="563"></div>

### Advanced Block

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FXN4KpOihSx31YT7bDFRU%2Fadvanced%20timed%20video%20record%20block.png?alt=media&#x26;token=191ea735-c450-46e7-a36d-72e5e666583c" alt="" width="386"><figcaption></figcaption></figure></div>

<table><thead><tr><th width="211.16857602766436">Input</th><th width="177.93102570628662">Data Type</th><th>Function</th></tr></thead><tbody><tr><td>Number of Seconds</td><td>Number</td><td>Set how long to record for.</td></tr><tr><td>Using [...] Camera</td><td>Select from menu</td><td>Select camera to record with (front or back).</td></tr></tbody></table>

<table><thead><tr><th width="214.33333333333331">Output</th><th width="177">Data Type</th><th>Function</th></tr></thead><tbody><tr><td>videoFile</td><td>Video file</td><td>The recorded video footage.</td></tr><tr><td>error</td><td>Text</td><td>If there is an error, returns the error. Else returns NULL.</td></tr></tbody></table>

## Record Untimed Video

The "video file from recording using \[back] camera" block opens the device's camera and films from the selected camera until the user ends the recording using the controls on the device's camera. It returns the video file.

### Regular Block

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-1024951234%2Fuploads%2F3aN780h9zrg80wnvPlv7%2Funtimed%20video.png?alt=media&#x26;token=5c47c4e9-b8d9-49ec-8bd5-f2960cdc6f52" alt="" width="563"></div>

### Advanced Block

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FO4Esn7T4KtboY9poJTY5%2Frecord%20untimed%20video%20block.png?alt=media&#x26;token=a86b66c0-2609-4a7c-be31-4d79d53b4735" alt="" width="383"><figcaption></figcaption></figure></div>

| Input               | Data Type        | Function                                        |
| ------------------- | ---------------- | ----------------------------------------------- |
| Using \[...] Camera | Select from menu | Select a camera to record with (front or back). |

| Output     | Data Type  | Function                                                    |
| ---------- | ---------- | ----------------------------------------------------------- |
| video file | Video file | Returns the recorded video footage.                         |
| Error      | Text       | If there is an error, returns the error. Else returns NULL. |

### Video Tutorial

#### How to Use the Device’s Video Camera in a Thunkable App

In this tutorial, you’ll use Thunkable camera app features to create an app that records a video with the device's camera.

{% embed url="<https://youtu.be/zO-i4YKTNvw>" %}
