[RN] React Native 카메라 사용하기 react-native-vision-camera

# React Native 앱에서 카메라를 사용해보자

# 들어가며

지금까지 React Native에서 가장 많이 사용되는 카메라 라이브러리는 react-native-camera였다

---

React Native Camera · The comprehensive camera module for React Native.

---

그러나 react-native-camera 라이브러리는 유지보수를 해줄 지원자가 부족하고 코드 복잡도가 많이 올라가는 바람에 deprecated 되었다. 그래서 찾아낸 대안이 오늘 소개할 react-native-vision-camera다

 

# 깃헙 페이지

 

Hello from VisionCamera | VisionCamera

 

# 사용방법

1. 설치

※ iOS 11, Android-SDK version 21이나 더 최신 환경에서 동작하며, 사용에 문제가 있을 경우 문제해결을 참조하자

 

npm i react-native-vision-camera
npx pod-install

 

2. 권한 설정

- IOS / info.plist / <dict>

 

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

<!-- optionally, if you want to record audio: -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone.</string>

 

- Android / AndroidManifest.xml / <manifest>

 

<uses-permission android:name="android.permission.CAMERA" />

<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

 

- 아래의 코드로 권한을 요청하자

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

 

- 예제 코드

 

function App() {
  const devices = useCameraDevices()
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

---

# 추가 기능

react-native-vision-camera에서는 Frame Processors를 통해 카메라를 활용한 다양한 기능을 사용할 수 있다

 

 

Frame Processors | VisionCamera

 

위의 문서 페이지에서 보면 Frame Processors를 다음과 같은 경우에 활용할 수 있다고 한다

• AI for facial recognition - 얼굴 인식
• AI for object detection - 물체 감지
• Using Tensorflow, MLKit Vision, Apple Vision or other libraries - AI관련
• Creating realtime video-chats using WebRTC to directly send the camera frames over the network - 화상 채팅, WEB RTC
• Creating scanners for QR codes, Barcodes or even custom codes such as Snapchat's SnapCodes or Apple's AppClips - QR코드, 바코드 등
• Creating snapchat-like filters, e.g. draw a dog-mask filter over the user's face
• Creating color filters with depth-detection - 

 

Frame Processors의 예제 코드

 

function App() {
  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    const isHotdog = detectIsHotdog(frame)
    console.log(isHotdog ? "Hotdog!" : "Not Hotdog.")
  }, [])

  return (
    <Camera
      {...cameraProps}
      frameProcessor={frameProcessor}
    />
  )
}

---