f:id:kasssssy:20200706020344p:plain

はじめに

カメラを使わずにQRコードの画像から情報を取得する方法です。
↓こんな感じで、画像を選択してQRコードからURLを取得してアラートに表示することをします。 f:id:kasssssy:20200706001411g:plain

環境

react-native 0.62.2
typescript 3.8.3
@react-native-firebase/app 7.3.1
@react-native-firebase/ml-vision 7.1.7
react-native-image-picker 2.3.1

Setup

react-native-image-pickerを入れる
画像選択で使います。 ↓こちらのページを参考にして導入します。
https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md
※ 権限周りはちゃんと設定しないとクラッシュするので気をつけます。
ml kitを入れる
firebaseのMl Kitを使います。様々な機能を提供してくれますが今回はQRコードの画像から情報を抜き取るために使います。
はじめに、↓ここを参考に@react-native-firebase/appを入れます。
https://rnfirebase.io/
次に、↓ここを参考に@react-native-firebase/ml-visionを入れます。
https://rnfirebase.io/ml-vision/usage
モデルは、"ml_vision_barcode_model"のみ有効にしておけばQR読み込み処理を実現できます。

コード

38行目：ImagePickerのオプションを定義しています。指定できるオプションはこちらを参考にしてください。

49行目：ボタンを押したらimagePickerを開くことをやってます。第一引数にしていしたオプションで表示する項目や文言を変更することができます。

50行目：エラーになったときの処理を書いてます。レスポンスの情報はこちらを参考にしてください。

55行目：選択した画像のPathは、プラットフォームによって取得の仕方が違うので、このような書き方になっています。

60行目：画像が選択されていない場合は何もせずに終了するようにしています。57行目のresponse.pathの戻り値の型がnullを含むのでチェックする必要があります。

64行目：選択した画像からQRコードの情報を抜き取っています。ここでML Kitが提供しているライブラリを使っています。

65行目：画像からなんの情報も取得できなかった場合はreturnしています。

69行目：情報は配列で取得されるのでfor文を使います。

70行目：QRコードから取得した情報がURLだった場合に処理をする分岐を定義しています。中では取得したURLをアラートのメッセージに表示しています。

追記 2020/07/22

64行目〜74行目あたりの処理はbarcodeDetectorProcessImageの第二引数に読み込むバーコードのフォーマットを指定する、以下のような書き方の方がいいかもしれません。

import vision, { VisionBarcodeFormat, VisionBarcodeValueType } from '@react-native-firebase/ml-vision'
...
const [barcode, ...otherBarcodes] = await vision().barcodeDetectorProcessImage(path, {barcodeFormats: [VisionBarcodeFormat.QR_CODE]})

if (barcode && barcode.valueType === VisionBarcodeValueType.URL) {
    Alert.alert('Barcode contains URL info: ', barcode.url.url)
}