개요

진행하는 프로젝트에선 사진을 업로드 하면 OCR로 사진의 텍스트를 분석하여 서비스를 제공해주는 기능을 제공한다.

OCR를 연동하기 이전, 사용자가 사진을 업로드 할 수 있도록 다음과 같은 기능을 제공해야 했다.

• 카메라로 촬영하기
• 앨범에서 선택하기

해당 게시물에선 카메라 기능을 구현해 볼 생각이다.

1. EXPO Camera 설치

원하는 기능을 구현하기 위해 찾아보던 중, expo에서 카메라 기능을 제공하는 것을 확인하였다!

>> EXPO Camera Doc 링크 <<

공식 사이트는 이쪽~

사용을 위해 프로젝트 터미널에서 다음과 같이 입력한다.

npx expo install expo-camera

2. 사용하려는 Component에 expo-camera 관련 hook을 import 한다.

import { CameraView, useCameraPermissions } from "expo-camera";

• useCameraPermissions : 카메라 권한을 위함
• CameraView: Camera를 띄우는 View

3. 사용자에게 카메라 권한을 받아온다.

1) 카메라 권한을 받아오기 위한 변수를 선언한다.

const [permission, requestPermission] = useCameraPermissions();

• permission: 권한 여부를 저장
• requestPermission: 사용자에게 권한을 요청

2) 권한을 요청하는 함수를 작성한다.

// 권한 상태 확인 및 요청 함수
  const checkPermissions = async () => {
    if (!permission) return; // 권한 정보가 없으면 리턴

    if (permission.status !== "granted") {
      // 권한이 거부되었을 때
      if (!permission.canAskAgain) {
        // 권한을 다시 물어볼 수 없을 때 설정을 엽니다.
        Alert.alert(
          "권한 필요",
          "앱 설정에서 카메라 권한을 변경해주세요.",
          [
            { text: "취소", style: "cancel" },
            {
              text: "설정 열기",
              onPress: () => {
                Linking.openSettings(); // 설정을 여는 기능
              },
            },
          ],
          { cancelable: false }
        );
      } else {
        // 권한을 다시 요청할 수 있을 때
        requestPermission();
      }
    }
  };

  useEffect(() => {
    checkPermissions(); // 컴포넌트가 마운트될 때 권한 상태 확인
  }, [permission]);

• 권한?(permission)
  • granted: 권한이 부여되었는지 여부를 판단
  • status: 권한의 허용 여부를 판단
  • canAskAgain: 만약 사용자가 권한 여부를 거절하였을 경우 다시 물어볼 수 있는지 여부

useEffect를 통해 컴포넌트 마운트 시 권한 여부를 물어보거나 판단한다.

4. 카메라 View를 통해 다양한 기능을 구현한다!

앞서 import 한 CameraView를 작성해보자.

<CameraView
        style={styles.camera}
        facing={facing}
        ref={cameraRef}
        zoom={zoom}
        animateShutter={true}
        flash={flash}
      >

차례대로 사용된 props에 대해 살펴본다.

• facing
  • 카메라 전면/ 후면 여부를 결정
• zoom
  • 카메라 줌 여부를 결정.
  • 0 ~ 1 까지의 값을 갖는다.
• animateShutter
  • 카메라 촬영 시 셔터 여부를 결정
  • (있으면…카메라 같다!)
• flash
  • 카메라 촬영 시 플래쉬 여부를 결정

위 Props 들을 이용해 다음과 같이 카메라를 구성할 수 있었다.

UI는 본인의 재량이니, 파이팅 하도록 하자!

이렇게 expo Camera 라이브러리를 이용해 카메라 기능을 구현하는 작업에 대해 알아보았다.

다음엔 갤러리 기능으로…슝슝