> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/common/permission/camera.md).

# Camera

{% hint style="info" %}
**Permission settings are required**

`openCamera`Before using it, you need to set camera permissions. Please check the permission setup guide first.
{% endhint %}

### Take a photo

**SDK function:** `openCamera`

A function that launches the camera and returns the captured image.

**Signature**

```typescript
function openCamera(options: { base64: boolean; maxWidth: number }): Promise<ImageResponse>;
```

**Parameters**

* **options** · Required · `OpenCameraOptions`

  An options object used when launching the camera.

  * **options.base64** · `boolean`

    A boolean value indicating whether to return the image in Base64 format. The default is `false`. `true`to `dataUri` Instead, it returns a Base64-encoded string.
  * **options.maxWidth** · `number`

    A numeric value indicating the maximum width of the image. The default is `1024`.

**Properties**

* openPermissionDialog

  Displays a dialog to request camera access permission again. The user can choose one of "Allow", "Allow once", or "Don't allow". If they choose "Allow" or "Allow once", `allowed`it returns `denied`is returned.
* getPermission

  Returns the current status of camera access permission. `allowed`is the state where the user has granted camera access permission. `denied`is the state where the user has denied camera access permission. `notDetermined`is the state where camera access permission has never been requested.

If camera permission is denied in the Toss app settings, `osPermissionDenied`is returned.

**Return value**

* `Promise<ImageResponse>`

Returns an object containing information about the captured image. The structure of the returned object is as follows:

* `id`: The unique identifier of the image.
* `dataUri`: A data URI representing the image data.

### Camera permission error

**Error type:** `OpenCameraPermissionError`

An error that occurs when camera permission is denied. When an error occurs, `error instanceof OpenCameraPermissionError`you can check it with.

**Signature**

```typescript
class OpenCameraPermissionError extends PermissionError {
  constructor();
}
```

**Example**

**Get the photo taken after opening the camera**

An example of taking a photo with the camera and getting the result. During this process, you can check the current camera permission status, and if there is no permission, you request it. If the user has denied permission or if the system has restricted permission, `OpenCameraPermissionError`is returned.

{% tabs %}
{% tab title="js" %}

```js
import { openCamera, OpenCameraPermissionError } from '@apps-in-toss/web-framework';

const base64 = true;

async function handleOpenCamera() {
  try {
    const response = await openCamera({ base64 });
    const imageUri = base64 ? 'data:image/jpeg;base64,' + response.dataUri : response.dataUri;
    console.log('Photo capture successful:', imageUri);
  } catch (error) {
    if (error instanceof OpenCameraPermissionError) {
      console.log('Permission error');
    }
    console.error('Failed to retrieve the photo:', error);
  }
}

async function handleGetPermissionForOpenCamera() {
  const permission = await openCamera.getPermission();
  return permission;
}

async function handleOpenPermissionDialogForOpenCamera() {
  const permission = await openCamera.openPermissionDialog();
  return permission;
}
```

{% endtab %}

{% tab title="React" %}

```tsx
import { ImageResponse, openCamera, OpenCameraPermissionError } from '@apps-in-toss/web-framework';
import { useState } from 'react';

const base64 = true;

// Component that launches the camera and displays the captured image on the screen
function Camera() {
  const [image, setImage] = useState<ImageResponse | null>(null);

  const handlePress = async () => {
    try {
      const response = await openCamera({ base64 });
      setImage(response);
    } catch (error) {
      if (error instanceof OpenCameraPermissionError) {
        console.log('Permission error');
      }

      console.error('Failed to retrieve the photo:', error);
    }
  };

  // To display an image returned in Base64 format, you need to add the data URL scheme prefix.
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <div>
      {image ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : <span>No photo</span>}
      <input type="button" value="Take a photo" onClick={handlePress} />
      <input
        type="button"
        value="Check permission"
        onClick={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <input
        type="button"
        value="Request permission"
        onClick={async () => {
          const currentPermission = await openCamera.openPermissionDialog();
          Alert.alert(currentPermission);
        }}
      />

  );
}
```

{% endtab %}

{% tab title="React Native" %}

```tsx
import { ImageResponse, openCamera, OpenCameraPermissionError } from '@apps-in-toss/framework';
import { useState } from 'react';
import { Alert, Button, Image, Text, View } from 'react-native';

const base64 = true;

// Component that launches the camera and displays the captured image on the screen
function Camera() {
  const [image, setImage] = useState<ImageResponse | null>(null);

  const handlePress = async () => {
    try {
      const response = await openCamera({ base64 });
      setImage(response);
    } catch (error) {
      if (error instanceof OpenCameraPermissionError) {
        console.log('Permission error');
      }

      console.error('Failed to retrieve the photo:', error);
    }
  };

  // To display an image returned in Base64 format, you need to add the data URL scheme prefix.
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <View>
      {image ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : <Text>No photo</Text>}
      <Button title="Take a photo" onPress={handlePress} />
      <Button
        title="Check Permission"
        onPress={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <Button
        title="Request permission"
        onPress={async () => {
          const currentPermission = await openCamera.openPermissionDialog();
          Alert.alert(currentPermission);
        }}
      />
    </View>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/common/permission/camera.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.