> 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 setup is required**

`openCamera`You need to set camera permissions before using it. 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`

  The options object used when launching the camera.

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

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

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

**Properties**

* openPermissionDialog

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

  Returns the current status of camera access permission. `allowed`means the user has granted camera access permission. `denied`means the user has denied camera access permission. `notDetermined`means a camera access permission request has never been made.

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

**Return value**

* `Promise<ImageResponse>`

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

* `id`: The image's unique identifier.
* `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 using

**Signature**

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

**Example**

**Retrieve the photo taken after launching the camera**

This is an example of taking a photo with the camera and retrieving the result. In 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 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 taken successfully:', 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 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 prepend 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>There is 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 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 prepend 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>There is 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.