React Native 카메라로 QR code 읽어오기 (react-native-vision-camera)

리액트 네이티브에서 카메라로 QR Code를 읽어오는 방법에 대해서 기록을 남기고자 한다.

사용한 카메라 라이브러리는 가장 많이 사용되었지만 deprecated된 react-native-camera의 공식문서에서 추천하는 react-native-vision-camera를 사용하였다.

사용한 라이브러리는 다음과 같이 설치할 수 있다.

npm i react-native-vision-camera vision-camera-code-scanner react-native-reanimated
npx pod-install

react-native-reanimated가 사용되었기에 최상단 index.js에서 import 'react-native-reanimated';로 불러온 뒤 babel.config.js를 다음과 같이 수정해준다.

module.exports = {
  ...
  plugins: [
    ...
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanCodes'],
      },
    ],
  ],
};

카메라 권한을 얻기 위해서 ios, android 모두 네이티브단의 설정이 필요한데, 이는 공식문서를 참고한다.

https://mrousavy.com/react-native-vision-camera/docs/guides/#updating-manifests

Getting Started | VisionCamera

그리고 다음과 같이 권한 요청을 보낼 수 있다.

// 카메라 권한 요청하기
const cameraPermission = await Camera.getCameraPermissionStatus();
// 마이크 권한 요청하기
const microphonePermission = await Camera.getMicrophonePermissionStatus();

권한 요청의 결과값이 "authorized"라면 해당 권한을 획득한 것이다.

 

기본적인 카메라의 사용법은 공식문서에도 확인할 수 있듯 다음과 같다.

import {useCameraDevices, Camera} from 'react-native-vision-camera';

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

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

다만, 카메라에 barcode를 읽을 수 있는 기능을 추가하기 위해서는 vision-camera-code-scanner를 사용하고 react-native-reanimated를 설정해야 한다. (위에서 미리 설정했다)

설정이 끝났다면, vision-camera-code-scanner 공식문서에서 제공하는 예제코드가 작동하는 것을 알 수 있다.

이를 간략화해서 설명하자면,

import React, {useState, useEffect} from 'react';

import {Text} from 'react-native';
import {useCameraDevices, Camera} from 'react-native-vision-camera';
import {useScanBarcodes, BarcodeFormat} from 'vision-camera-code-scanner';

function App() {
  const [hasPermission, setHasPermission] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
    checkInverted: true,
  });

  useEffect(() => {
    // 권한을 요청한다.
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);
  
  useEffect(() => {
    if (barcodes && barcodes[0]?.displayValue) {
      // 바코드(QR Code)를 읽었을 때 값을 출력한다.
      console.log(barcodes[0].displayValue);
    }
  }, [barcodes]);

  if (!device || !hasPermission) {
    return null;
  }
  return (
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
      />
    )
  );
}

export default App;

다만, 위의 useEffect로 바코드 값을 가져오는 방식은 렌더링이 계속 일어나기에 최적화가 필요한 부분 같다.

이렇게 react-native-vision-camera를 사용하여 QR Code를 읽어오는 법을 확인했다.

카메라 컴포넌트는 필요한 부분에서만 조건부 렌더링으로 렌더링되고 값을 읽어오면 렌더링을 하지 않는 방식으로 조작하는 것이 좋을 것 같다.

만약, QR Code가 아닌 다른 바코드값을 읽어오고자 한다면, useScanBarcodes의 첫 번째 인자인 배열 내부의 BarcodeFormat 값을 변경할 수 있다.

 

 

https://www.npmjs.com/package/react-native-vision-camera

react-native-vision-camera

https://www.npmjs.com/package/vision-camera-code-scanner

vision-camera-code-scanner

 

🍨 QR 코드를 읽을 수 있는 다른 카메라 라이브러리로는 react-native-camera-kit이 있다.

https://www.npmjs.com/package/react-native-camera-kit

react-native-camera-kit