카메라

권한 설정이 필요해요

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

사진 촬영하기

SDK 함수: openCamera

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

시그니처

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를 통해 확인할 수 있어요.

시그니처

class OpenCameraPermissionError extends PermissionError {
  constructor();
}

예제

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

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

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;
}

React

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);
        }}
      />

  );
}

React Native

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>
  );
}