QR 스캐너 빌드: React 네이티브 카메라 튜토리얼

게시 됨: 2022-03-11

이 React Native Camera 튜토리얼에서는 QR 코드 리더 앱을 만듭니다. QR 코드를 실시간으로 읽고 감지 시점에 해당 콘텐츠를 화면에 렌더링할 수 있습니다. 우리는 React Native의 CLI Quickstart를 사용할 것입니다.

(참고: 이것을 설정하는 데 도움이 필요하면 항상 React Native 시작하기 페이지를 참조할 수 있습니다. “Expo CLI Quickstart”가 미리 선택되어 있으므로 “React Native CLI Quickstart” 버튼을 클릭하는 것을 잊지 마십시오. 이 기사를 작성하는 것입니다.)

왜 네이티브에 반응합니까?

React Native는 빠른 UI의 플랫폼 간 개발을 번개처럼 빠르게 가능하게 하기 위해 React의 패러다임과 디자인 원칙을 차용한 귀중한 프레임워크입니다. Facebook, Airbnb, Uber 및 기타 많은 기업은 이미 React Native로 구축된 최신 앱을 보유하고 있습니다.

React 네이티브 카메라 란 무엇입니까?

React Native Camera(RNCamera)는 React Native 앱에서 카메라 기능을 구현할 때 사용 하는 구성 요소입니다. 이 구성 요소는 장치 하드웨어를 사용할 수 있도록 몇 가지 간단한 기능을 통해 기본 OS와 통신하는 데 도움이 됩니다. 네이티브 코드의 번거로움 없이 이러한 기능을 중심으로 앱을 구축할 수 있습니다. RNCamera는 이미 다음을 지원합니다.

  • 사진
  • 비디오
  • 얼굴 인식
  • 바코드 스캐닝
  • 텍스트 인식(Android만 해당)

RNCamera는 두 가지 버전으로 제공되었습니다.

  1. RN카메라
  2. RCTCamera(더 이상 사용되지 않음)

...그래서 최신 업데이트를 계속 받을 수 있도록 RNCamera를 사용하십시오.

참고: React Native Camera는 Expo 카메라 모듈을 기반으로 하며 둘 사이를 오가는 것은 매우 쉽습니다.

RNCamera를 사용하여 첫 번째 앱 만들기

React Native QR 스캐너를 시작하기 전에 설치해야 할 몇 가지 종속성이 있습니다.

RNCamera의 종속성 설치

우리의 설정에는 최소 JDK 버전 1.7(가장 가능성이 높음)이 필요하고 Android를 사용하는 경우 buildToolsVersion 보다 최신 buildToolsVersion이 필요합니다. (확실히, 문서에 더 자세한 최신 목록이 있습니다.)

먼저 새로운 React Native 프로젝트를 만들어 시작하겠습니다.

 react-native init CameraExample

이제 전화를 통해 React Native Camera 예제의 첫 번째 버전을 배포해 보겠습니다.

 cd CameraExample react-native run-android

아래 스크린샷과 같아야 합니다.

React Native 시작 화면을 보여주는 Android Emulator.

이제 프로젝트에 react-native-camera 패키지를 설치할 차례입니다. 우리는 "반응 네이티브로 대부분 자동 설치" 옵션을 사용할 것입니다. (CocoaPods를 사용한 대부분 자동 설치 및 수동 설치와 같은 다른 방법이 있지만 가장 효율적인 첫 번째 옵션을 사용하겠습니다.) 다음을 실행하기만 하면 됩니다.

 npm install react-native-camera --save react-native link react-native-camera

android/app/src/main/AndroidManifest.xml 에 다음 권한도 추가해야 합니다.

 package="com.cameraexample"> <uses-permission android:name="android.permission.INTERNET" /> + <uses-permission android:name="android.permission.CAMERA" /> + <uses-permission android:name="android.permission.RECORD_AUDIO"/> + <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> + <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <application android:name=".MainApplication"

또한 android/app/build.gradle 에서 차원 전략을 설정해야 합니다. 기본값이 없으며 정의하지 않으면 오류가 발생합니다.

 defaultConfig { applicationId "com.cameraexample" minSdkVersion rootProject.ext.minSdkVersion + missingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0"

참고: 차원 전략은 일반적으로 위와 같이 general 으로 설정해야 합니다. 그러나 텍스트/얼굴/바코드 인식에 MLKit을 사용하려는 경우 대신 mlkit 으로 설정할 수 있습니다.

설치 후 run-android 를 사용하여 새 종속성을 설치해야 합니다.

 react-native run-android

모든 것이 잘 되었다면 기기나 시뮬레이터에 동일한 React Native 시작 화면이 다시 표시되어야 합니다.

카메라 설정

먼저 RNCamera 를 수정하고 App.js 를 가져와 시작하겠습니다.

 import { RNCamera } from 'react-native-camera';

다음으로 새로 가져온 RNCamera 를 포함하도록 render 함수를 수정합니다. 전체 화면을 찍기 위해 카메라에 추가된 style 속성에 주목하세요. 이러한 스타일이 없으면 공간을 차지하지 않기 때문에 화면에서 카메라 렌더링을 볼 수 없습니다.

 render() { return ( <View style={styles.container}> - <Text style={styles.welcome}>Welcome to React Native!</Text> - <Text style={styles.instructions}>To get started, edit App.js</Text> - <Text style={styles.instructions}>{instructions}</Text> + <RNCamera + ref={ref => { + this.camera = ref; + }} + style={{ + flex: 1, + width: '100%', + }} + > + </RNCamera> </View> ); }

이 코드를 추가하면 아래 스크린샷과 같이 인터페이스에 카메라가 전체 화면으로 켜져 있어야 합니다.

전체 화면 카메라 구성 요소를 보여주는 스크린샷. 카메라는 두 개의 QR 코드 샘플을 표시하는 컴퓨터 모니터를 가리킵니다.

이제 우리는 바코드를 볼 수 있지만(위의 모니터에 표시되는 테스트 QR 코드를 볼 수 있듯이) 아직 읽을 수 없습니다. RNCamera의 알고리즘을 사용하여 각각 내부에 기록된 내용을 인식해 보겠습니다.

바코드 정보 읽기

바코드 정보를 읽기 위해 onGoogleVisionBarcodesDetected 소품을 사용하여 함수를 호출하고 정보를 추출할 수 있습니다. < barcodeRecognized <RNCamera> 구성 요소에 추가하고 이를 처리하기 위해 바코드 인식 기능에 연결해 보겠습니다. onGoogleVisionBarcodesDetected 는 카메라에서 인식되는 모든 바코드의 배열을 포함하는 barcodes 속성을 포함하는 객체를 반환합니다.

참고: onGoogleVisionBarcodesDetected QR 코드 기술은 Android에서만 사용할 수 있지만 플랫폼 간 접근 방식을 onBarCodeRead 를 사용하는 것이 좋습니다. 한 번에 하나의 바코드만 지원합니다. 이를 대체 수단으로 사용하는 것은 독자의 연습 문제로 남겨둡니다.

다음은 onGoogleVisionBarcodesDetected 를 추가한 후 <RNCamera> 의 모습입니다.

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > </RNCamera>

이제 아래 기능을 사용하여 App.js 에서 바코드를 처리할 수 있습니다. 이 기능은 바코드가 감지될 때만 경고하고 해당 내용을 화면에 표시해야 합니다.

 barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.warn(barcode.data)) };

작동 방식은 다음과 같습니다.

이전과 동일한 카메라 앵글, 이제 하단에 콘솔 팝업이 표시되어 QR 코드의 메시지를 디코딩했습니다: "Hi from QR1" 및 Toptal의 웹 사이트 주소.

바코드 오버레이 렌더링

이전 스크린샷은 이제 바코드에 포함된 정보를 보여주지만 어떤 메시지가 어떤 바코드에 속하는지 알 수 없습니다. 이를 위해 onGoogleVisionBarcodesDetected 에서 반환된 barcodes 에 대해 자세히 살펴보고 화면의 각 바코드를 정확히 찾아내려고 합니다.

그러나 먼저 인식된 바코드를 상태로 저장해야 액세스할 수 있고 포함된 데이터를 기반으로 오버레이를 렌더링할 수 있습니다. 이제 이전에 정의한 함수를 다음과 같이 수정합니다.

 barcodeRecognized = ({ barcodes }) => this.setState({ barcodes });

이제 render 기능에서 오류를 생성하지 않도록 빈 바코드 배열에 초기화된 state 개체를 추가해야 합니다.

 export default class App extends Component<Props> { state = { barcodes: [], } // ...

이제 <RNCamera> 구성 요소 내부에 추가되어야 하는 renderBarCodes 함수를 생성해 보겠습니다.

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > {this.renderBarcodes()} </RNCamera>

이 함수는 이제 상태에서 인식된 바코드를 가져와 화면에 표시해야 합니다.

 renderBarcodes = () => ( <View> {this.state.barcodes.map(this.renderBarcode)} </View> );

매핑은 화면의 각 바코드를 렌더링해야 하는 renderBarcode 를 가리킵니다. 나는 우리가 그것들을 쉽게 알아볼 수 있도록 약간의 스타일을 추가했습니다:

 renderBarcode = ({ bounds, data }) => ( <React.Fragment key={data + bounds.origin.x}> <View style={{ borderWidth: 2, borderRadius: 10, position: 'absolute', borderColor: '#F00', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0.9)', padding: 10, ...bounds.size, left: bounds.origin.x, top: bounds.origin.y, }} > <Text style={{ color: '#F00', flex: 1, position: 'absolute', textAlign: 'center', backgroundColor: 'transparent', }}>{data}</Text> </View> </React.Fragment> );

인식된 각 바코드에는 다음이 포함됩니다.

  • 화면에서 바코드가 발견된 위치를 알려주는 bounds 속성은 오버레이를 렌더링하는 데 사용할 것입니다.
  • 특정 바코드에 인코딩된 내용을 보여주는 data 속성
  • 어떤 종류의 바코드인지 알려주는 type 속성(2D, ​​QR 등)

위의 렌더링 함수에서와 같이 이 세 가지 매개변수를 사용하면 다음과 같은 결과를 얻을 수 있습니다.

동일한 카메라 각도에서 이번에는 디코딩된 메시지가 해당 QR 코드 위에 오버레이됩니다.

플랫폼 간 배포

언급했듯이 RNCamera는 카메라 모듈의 기본 부분을 범용 크로스 플랫폼 언어로 추상화합니다. 일부 기능은 한 플랫폼에서만 사용할 수 있거나 다른 플랫폼에서 작성하는 방법이 다를 수 있습니다. 빌드하려는 것이 필요한 모든 플랫폼에서 지원되는지 확인하려면 항상 문서를 첫 번째 단계로 읽어야 합니다. 또한 구현을 완료한 후 다양한 장치에서 엣지 케이스를 테스트하여 제품의 견고성에 대해 확신하는 것이 항상 더 좋습니다.

앞으로 나아가 디코딩

증강 현실 개발에 대한 이 작은 경험이 도움이 되었기를 바랍니다. 이제 휴대폰이나 시뮬레이터에서 기본 React Native Camera 앱이 실행되기를 바랍니다. 질문이나 요청 사항이 있으면 언제든지 댓글을 남겨주세요!

관련 항목: React Native에 대해 자세히 알아보기(초보자를 위한 자습서)