QRスキャナーの構築：ReactNativeCameraチュートリアル

公開: 2022-03-11

このReactNativeCameraチュートリアルでは、QRコードリーダーアプリを作成します。 QRコードをリアルタイムで読み取り、検出時に画面にコンテンツを表示することができます。 ReactNativeのCLIクイックスタートを使用します。

（注：これの設定についてサポートが必要な場合は、いつでもReact Nativeのはじめにページを参照できます。「ExpoCLIクイックスタート」が事前に選択されているため、「ReactNativeCLIクイックスタート」ボタンをクリックすることを忘れないでください。この記事を書くことの。）

なぜネイティブに反応するのですか？

React Nativeは、Reactのパラダイムと設計原則を取り入れて、スナッピーなUIの超高速のクロスプラットフォーム開発を可能にする貴重なフレームワークです。 Facebook、Airbnb、Uber、およびその他の多くのアプリには、ReactNativeで構築された最新のアプリがすでにあります。

React Native Cameraとは何ですか？

React Native Camera（RNCamera）は、 ReactNativeアプリにカメラ機能を実装する際の頼りになるコンポーネントです。 このコンポーネントは、デバイスのハードウェアを使用できるように、いくつかの簡単な機能を介してネイティブOSと通信するのに役立ちます。 ネイティブコードの煩わしさを感じることなく、これらの関数を中心にアプリを構築できます。 RNCameraはすでに以下をサポートしています：

  • 写真
  • ビデオ
  • 顔検出
  • バーコードスキャン
  • テキスト認識（Androidのみ）

RNCameraには2つのフレーバーがあったことに注意してください。

  1. RNCカメラ
  2. RCTCamera（非推奨）

…したがって、最新の更新を継続して取得できるように、必ずRNCameraを使用してください。

注： React Native Cameraは、Expoカメラモジュールに大きく基づいており、2つの間を行き来するのは非常に簡単です。

RNCameraを使用して最初のアプリを作成する

React Native QRスキャナーを開始する前に、インストールする必要のある依存関係がいくつかあります。

RNCameraの依存関係のインストール

私たちのセットアップには、少なくともJDKバージョン1.7（おそらく持っている）が必要であり、Androidを使用している場合は、 buildToolsVersionが必要になります。 （確かに、ドキュメントにはより詳細で最新のリストがあります。）

まず、新しいReactNativeプロジェクトを作成することから始めましょう。

 react-native init CameraExample

それでは、ReactNativeCameraの例の最初のバージョンを電話にデプロイしてみましょう。

 cd CameraExample react-native run-android

以下のスクリーンショットのようになります。

ReactNativeのウェルカム画面を表示するAndroidエミュレーター。

次に、 react-native-cameraパッケージをプロジェクトにインストールします。 「react-nativeを使用したほとんどの自動インストール」オプションを使用します。 （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

すべてがうまくいけば、デバイスまたはシミュレーターに同じReactNativeウェルカム画面が再び表示されるはずです。

カメラのセットアップ

まず、 RNCameraを変更し、そこにApp.jsをインポートすることから始めましょう。

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

次に、 render関数を変更して、新しくインポートしたRNCameraを含めます。 カメラを全画面表示にするために、カメラに追加された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> ); }

このコードを追加すると、以下のスクリーンショットのように、インターフェースでカメラが全画面表示になります。

フルスクリーンカメラコンポーネントを示すスクリーンショット。カメラは、2つのQRコードサンプルを表示しているコンピューターモニターに向けられています。

これでバーコードを見ることができますが（上のモニターにテストQRコードが表示されているので）、まだ読み取ることができません。 RNCameraのアルゴリズムを使用して、それぞれの内部に何が書き込まれているかを認識してみましょう。

バーコード情報の読み取り

バーコード情報を読み取るために、 onGoogleVisionBarcodesDetectedを使用して、関数を呼び出して情報を抽出できるようにします。 これを<RNCamera>コンポーネントに追加し、 barcodeRecognized関数にリンクして処理しましょう。 onGoogleVisionBarcodesDetectedは、カメラで認識されたすべてのバーコードの配列を含むbarcodesプロパティを含むオブジェクトを返すことに注意してください。

注： onGoogleVisionBarcodesDetected QRコードテクノロジーはAndroidでのみ利用できますが、クロスプラットフォームのアプローチが必要な場合は、 onBarCodeReadを使用することをお勧めします。 一度にサポートされるバーコードは1つだけです。これをフォールバックとして使用することは、読者の練習問題として残されています。

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コードのメッセージ「HifromQR1」とToptalのWebサイトアドレスがデコードされています。

バーコードオーバーレイのレンダリング

前のスクリーンショットはバーコードに含まれる情報を示していますが、どのメッセージがどのバーコードに属しているかを知ることはできません。 このために、 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プロパティ
  • バーコードの種類（2D、QRなど）を示すtypeプロパティ

上記のレンダリング関数のようにこれらの3つのパラメーターを使用すると、次の結果が得られます。

同じカメラアングルで、今度はデコードされたメッセージが対応するQRコードの上にオーバーレイされます。

クロスプラットフォーム展開

前述のように、RNCameraはカメラモジュールのネイティブ部分をユニバーサルクロスプラットフォーム言語に抽象化します。 一部の機能は1つのプラットフォームでのみ使用可能であるか、別のプラットフォームでの記述方法が異なる場合があることに注意することが重要です。 構築しようとしているものが必要なすべてのプラットフォームでサポートされていることを確認するには、最初のステップとして常にドキュメントを読んでください。 さらに、実装が完了した後、さまざまなデバイスでエッジケースをテストすることをお勧めします。これにより、製品の堅牢性を確認できます。

前進してデコードする

拡張現実開発のこの小さな味がお役に立てば幸いです。また、基本的なReactNativeCameraアプリを携帯電話またはシミュレーターで実行できるようになったことを願っています。 ご不明な点やご要望がございましたら、お気軽にコメントをお寄せください。

関連： React Nativeへのコールドダイブ（初心者向けチュートリアル）