react-native-vision-camera

react-native-vision-camera

🔥 1. 개발 셋팅

yarn add react-native-vision-camera
cd ios && pod install && cd ..

🔥 2. 권한 설정

(1) : IOS

//Info.plist
 
<!-- 카메라 권한 -->
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>
 
<!-- 마이크 권한 -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone.</string>

(2) : AOS

//AndroidManifest.xml
 
<!-- 카메라 권한 -->
<uses-permission android:name="android.permission.CAMERA" />
 
<!-- 마이크 권한 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

(3) : 권한 가져오기 / 권한 요청 하기

(1) : 권한 가져오기 : 사용자가 권한을 부여했는지 체크

const cameraPermission = await Camera.getCameraPermissionStatus();
const microphonePermission = await Camera.getMicrophonePermissionStatus();

(2) : 권한 요청하기 : 사용자에게 권한을 요청

const newCameraPermission = await Camera.requestCameraPermission();
const newMicrophonePermission = await Camera.requestMicrophonePermission();

🔥 3. 예시

(1) : 권한 확인 / 요청

useEffect(() => {
  const checkPermission = async () => {
    // 카메라 권한 확인
    const cameraPermission = await Camera.getCameraPermissionStatus();
 
    switch (cameraPermission) {
      case "authorized":
        // 카메라 권한이 있을때 실행할 로직
        break;
 
      case "not-determined":
        // 아직 권한 요청을 하지 않은 상태로 새롭게 권한 요청하기
        const newCameraPermission = await Camera.requestCameraPermission();
 
        if (newCameraPermission === "authorized") {
          // 카메라 권한이 있을때 실행할 로직
        } else if (newCameraPermission === "denied") {
          // 권한 요청을 했지만 거부됐을때 실행할 로직
          // ex) 설정으로 이동, 권한이 없으면 카메라 실행할 수 없다는 알림창 등등
          await Linking.openSettings();
        }
        break;
 
      case "denied":
        // 권한 요청을 했지만 거부됐을때 실행할 로직
        // ex) 설정으로 이동, 권한이 없으면 카메라 실행할 수 없다는 알림창 등등
        await Linking.openSettings();
        break;
    }
  };
 
  checkPermission();
}, []);

(2) : Camera 태그 및 props

function App() {
  const devices = useCameraDevices();
  const device = devices.back;
 
  if (device == null) return <LoadingView />;
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      photo={true}
      video={false}
      audio={false} // 선택사항
      isActive={true}
    />
  );
}
  • **style : 내가 원하는 카메라의 스타일을 지정. StyleSheet.absoluteFill을 사용했을때는 화면 전체가 카메라로 꽉 차게됌**
  • **useCameraDevices() : 현재 사용하고 있는 기기의 카메라 정보. 객체로 이루어져있으며 보통 앞, 뒷면(front, back) 카메라의 정보가 담겨 있음.**
  • **deviceuseCameraDevices() : 현재 사용하고 있는 기기의 카메라들의 정보. 객체로 이루어져있으며 보통 앞, 뒷면(front, back) 카메라의 정보, back에서 back자리를 state로 관리해, 카메라 전환버튼을 눌렀을때 front와 back으로 변경되는 형식으로 어떤 카메라를 사용할지 선택할 수 있음**
  • **photo : 사진 촬영할 때 true로 설정되어야 촬영이 가능**
  • **video, audio : 영상 촬영과 마이크를 사용할 때 true로 설정되어야 촬영이 가능**
  • **isActive : true일 때 카메라를 사용할 수 있음.**
react-native-vision-camera