[RN] 'react-native-vision-camera' 사용기!

원래 진행하던 프로젝트에 'react-native-camera'를 사용했었는데 카메라를 사용할 때마다

ERROR ViewPropTypes will be removed from React Native, along with all other PropTypes.

이런 에러가 발생했었다. 사실 동영상을 촬영하고 저장하는 데는 문제가 없고 실행도 잘 되어서 그냥 패스..했었다. (이러면 안 됐는데)

프로젝트를 넘길 때쯤 되어서 이대로 넘길 순 없다는 생각이 들어서 에러를 까봤더니 패키지 자체가 deprecated 된 것이었다! 기술 검토 시에 좀 더 꼼꼼히 알아봤어야 하는데 소홀했던 것 같다. (당연한 것이지만 하나 배웠다고 생각하자)

아무튼 알아봤더니 'react-native-vision-camera'를 많이 사용하는 것 같아서 이 녀석으로 마이그레이션 하기로 결정! docs 가 정말 잘 나와있으니 꼼꼼히 살펴보자!

 

우선 패키지를 install 한다!

npm i react-native-vision-camera
cd ios && pod install

 

이후 

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>

 

권한 확인 부분은 생략하고 내가 구현한 코드는 아래와 같다!

카메라로 동영상을 촬영하고 전/후면 카메라를 전환할 수 있는 코드이다. 촬영한 동영상을 저장하는 코드는 생략되었다!

import { Camera, useCameraDevice } from 'react-native-vision-camera';
import React, { useEffect, useState, useRef, useContext } from 'react';

function App() {
   const cameraRef = useRef(null);
   const device = useCameraDevice('back'); // 후면 카메라 사용
   const frontDevice = useCameraDevice('front')
   const [cameraType, setCameraType] = useState('back');
   
   const switchCameraType = async () => {
     setCameraType((prevCameraType) => (prevCameraType === 'back' ? 'front' : 'back'));

   };
   
   const currentDevice = cameraType === 'back' ? device : frontDevice;

  if (device == null) 카메라를 사용할 수 없습니다 <LoadingView />
  return (
    <Camera
       ref={cameraRef}
       style={styles.preview}
       device={currentDevice}
       isActive={true} // 필요한 경우 다른 설정 적용
       video={true}
       audio={true}
     />
  )
}

• ref: 컴포넌트 제어를 위해 사용
• style: Camera 컴포넌트의 스타일 지정!
• device: 위 코드에서는 currentDevice 값을 받아온 것으로, 사용할 카메라 디바이스를 지정한다
• isActive: 카메라의 활성 여부를 나타낸다
• video: 비디오 활성화 여부를 나타낸다. 비디오 촬영 메소드를 사용하고 해당 설정을 true로 지정하지 않으면 에러가 발생하니 꼭 확인하도록 하자!
• audio: 오디오 활성화 여부를 나타낸다. 비디오 촬영시 선택사항이다! 

---

🚫 마주친 에러!

처음엔 useCameraDevices를 사용했는데 촬영 기능을 실행하면 계속 그냥 흰색 화면이 나와서 황당했다. 권한은 확실히 줬고 뭐가 문제인지 모르겠어서 하나씩 확인해 보기로 했다.

우선 기기의 카메라 장치를 아예 확인하지 못하는 것인지 확인해보았다!

const devices = useCameraDevices();

useEffect(() => {
  console.log('사용 가능한 카메라 장치:', devices);
}, [devices]);

이렇게 useEffect로 console.log를 활용해 디바이스를 검사해 봤다.

원인이 바로 요녀석이었다! 요즘 기기들이 워낙 좋아져서 어떤 카메라를 특정해서 선택할지 못 찾는 것이었다!

> useCameraDevice를 사용했더니 동작했다. useCameraDevice는 sorting filter를 사용해 가장 잘 맞는 카메라를 선택한다고 한다! docs를 잘 읽어야겠다 🥹

 

📚Reference

https://react-native-vision-camera.com/docs/guides