> 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/common/permission/camera.md).

# 카메라

{% hint style="info" %}
**권한 설정이 필요해요**

`openCamera`를 사용하기 전에 카메라 권한을 설정해야 해요. 권한 설정 가이드를 먼저 확인해 주세요.
{% endhint %}

### 사진 촬영하기

**SDK 함수:** `openCamera`

카메라를 실행해서 촬영된 이미지를 반환하는 함수예요.

**시그니처**

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

**파라미터**

* **options** · 필수 · `OpenCameraOptions`

  카메라 실행 시 사용되는 옵션 객체예요.

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

    이미지를 Base64 형식으로 반환할지 여부를 나타내는 불리언 값이에요. 기본값은 `false`예요. `true`로 설정하면 `dataUri` 대신 Base64 인코딩된 문자열을 반환해요.
  * **options.maxWidth** · `number`

    이미지의 최대 너비를 나타내는 숫자 값이에요. 기본값은 `1024`예요.

**프로퍼티**

* openPermissionDialog

  카메라 접근 권한을 다시 요청하는 다이얼로그를 표시해요. 사용자는 "허용", "한 번만 허용", "안하기" 중 하나를 선택할 수 있어요. "허용"이나 "한 번만 허용"을 선택하면 `allowed`를 반환하고, "안하기"를 선택하면 `denied`를 반환해요.
* getPermission

  카메라 접근 권한의 현재 상태를 반환해요. `allowed`는 사용자가 카메라 접근 권한을 허용한 상태예요. `denied`는 사용자가 카메라 접근 권한을 거부한 상태예요. `notDetermined`는 카메라 접근 권한 요청을 한 번도 하지 않은 상태예요.

토스앱 설정에서 카메라 권한이 거절되어 있는 경우에는 `osPermissionDenied`를 반환해요.

**반환 값**

* `Promise<ImageResponse>`

촬영된 이미지 정보를 포함한 객체를 반환해요. 반환 객체의 구성은 다음과 같아요:

* `id`: 이미지의 고유 식별자예요.
* `dataUri`: 이미지 데이터를 표현하는 데이터 URI예요.

### 카메라 권한 에러

**에러 타입:** `OpenCameraPermissionError`

카메라 권한이 거부되었을 때 발생하는 에러예요. 에러가 발생했을 때 `error instanceof OpenCameraPermissionError`를 통해 확인할 수 있어요.

**시그니처**

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

**예제**

**카메라 실행 후 촬영된 사진 가져오기**

카메라로 사진을 찍고 결과를 가져오는 예제예요. 이 과정에서 현재 카메라 권한 상태를 확인할 수 있고, 권한이 없으면 권한을 요청해요. 사용자가 권한을 거부했거나 시스템에서 권한이 제한된 경우에는 `OpenCameraPermissionError`를 반환해요.

{% 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('사진 촬영 성공:', imageUri);
  } catch (error) {
    if (error instanceof OpenCameraPermissionError) {
      console.log('권한 에러');
    }
    console.error('사진을 가져오는 데 실패했어요:', 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;

// 카메라를 실행하고 촬영된 이미지를 화면에 표시하는 컴포넌트
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('권한 에러');
      }

      console.error('사진을 가져오는 데 실패했어요:', error);
    }
  };

  // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 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>사진이 없어요</span>}
      <input type="button" value="사진 촬영하기" onClick={handlePress} />
      <input
        type="button"
        value="권한 확인하기"
        onClick={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <input
        type="button"
        value="권한 요청하기"
        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;

// 카메라를 실행하고 촬영된 이미지를 화면에 표시하는 컴포넌트
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('권한 에러');
      }

      console.error('사진을 가져오는 데 실패했어요:', error);
    }
  };

  // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 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>사진이 없어요</Text>}
      <Button title="사진 촬영하기" onPress={handlePress} />
      <Button
        title="권한 확인하기"
        onPress={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <Button
        title="권한 요청하기"
        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/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.