React native camera + google vision barcode detection (android)

0. 테스트 스펙
- React 16.3.0
- React native 0.55.4
- Android studio 3.2.1
- Galaxy S8 + SDK 26
- Gradle 3.1.3


1. React native camera

https://github.com/react-native-community/react-native-camera 이 페이지에 상세히 나와있으니 설치하면 된다.

2. 기본 바코드 읽기(onBarcodeReaded)

React native camera에서 자체적으로 지원하는 바코드 읽기 기능.
{ data: ...,  rawData: ..., type: ..., bounds: ... } 형식의 object로 결과가 리턴된다.
https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md 상세는 이 페이지 참조.
리턴되는 bounds가 문서와 좀 다른 것 같다.


3. Google vision 사용한 바코드 읽기(onGoogleVisionBarcodesDetected)

Google mobile vision을 사용한 바코드 읽기 기능.
읽어오는 바코드는 https://developers.google.com/android/reference/com/google/android/gms/vision/barcode/Barcode 이 페이지 참조.
기본 기능보다 빠르고 정확하지만 위치정보(이미지 내에서)를 알려주지 않는다.

그래서 위치정보를 숫자 배열로 받아오도록 수정.

1) node_modules\react-native-camera\android\src\main\java\org\reactnative\camera\BarcodesDetectedEvent.java의 serializeEventData method가 이벤트 발생 시 callback으로 리턴하는 데이터를 serialize하는 것 같다.
해당 함수를 이런 식으로 수정.

...

for (int i = 0; i < mBarcodes.size(); i++) {
...
WritableArray points = Arguments.createArray();
for (int j = 0; j < barcode.cornerPoints.length; j++) {
points.pushInt(barcode.cornerPoints[j].x);
points.pushInt(barcode.cornerPoints[j].y);
}
serializedBarcode.putArray("points", points);
...
}

...

2) node_modules\react-native-camera\types\index.d.ts 파일의 Interface Barcode에 points: number[]; 를 추가한다. 

리턴되는 배열은 [왼쪽위x, 왼쪽위y, 오른쪽위x, 오른쪽위y, 오른쪽아래x, 오른쪽아래y, 왼쪽아래x, 왼쪽아래y] 형식.

4. Firebase와 함께 사용

react native firebase와 react native camera에서 시키는대로 하면 firebase와 vision에서 google services 버전이 다르다고 에러가 발생하는 경우가 있는 것 같다. 현재기준 firebase는 16이므로 vision의 버전을 16.2.0으로 올려준다.

[프로젝트]\android\app\build.gradle에서 이런식으로 수정

...

implementation (project(':react-native-camera')) {
  exclude group: "com.google.android.gms"
  implementation 'com.android.support:exifinterface:27.+'
  implementation ('com.google.android.gms:play-services-vision:16.2.0') {
  force = true
 }
}

...