Erstellen Sie einen QR-Scanner: Ein React-Native-Kamera-Tutorial

In diesem React Native Camera-Tutorial erstellen wir eine QR-Code-Reader-App. Es wird in der Lage sein, QR-Codes in Echtzeit zu lesen und deren Inhalt zum Zeitpunkt der Erkennung auf dem Bildschirm darzustellen. Wir werden den CLI-Schnellstart von React Native verwenden.

(Hinweis: Wenn Sie Hilfe bei der Einrichtung benötigen, können Sie jederzeit auf die React Native-Erste-Schritte-Seite verweisen – vergessen Sie nicht, auf die Schaltfläche „React Native CLI Quickstart“ zu klicken, da „Expo CLI Quickstart“ zu diesem Zeitpunkt vorausgewählt ist diesen Artikel zu schreiben.)

Warum nativ reagieren?

React Native ist ein wertvolles Framework, das das Paradigma und die Designprinzipien von React übernimmt, um eine blitzschnelle, plattformübergreifende Entwicklung von bissigen UIs zu ermöglichen. Facebook, Airbnb, Uber und viele andere haben bereits ihre neuesten Apps mit React Native erstellt.

Was ist React Native Camera?

React Native Camera (RNCamera) ist die ideale Komponente, wenn es darum geht, Kamerafunktionen in einer React Native-App zu implementieren. Diese Komponente unterstützt Sie bei der Kommunikation mit dem nativen Betriebssystem durch einige einfache Funktionen, sodass Sie Gerätehardware verwenden können. Sie können Ihre Apps um diese Funktionen herum erstellen, ohne sich mit nativem Code herumschlagen zu müssen. RNCamera unterstützt bereits:

• Fotografien
• Videos
• Gesichtserkennung
• Barcode-Scannen
• Texterkennung (nur Android)

Beachten Sie, dass RNCamera früher in zwei Varianten erhältlich war:

1. RNKamera
2. RCTCamera (veraltet)

… stellen Sie also sicher, dass Sie RNCamera verwenden, damit Sie immer die neuesten Updates erhalten.

Hinweis: React Native Camera basiert stark auf dem Expo-Kameramodul und es ist ziemlich einfach, zwischen den beiden hin und her zu wechseln.

Erstellen Sie Ihre erste App mit RNCamera

Bevor wir mit unserem React Native QR-Scanner beginnen, müssen einige Abhängigkeiten installiert werden.

Installieren der Abhängigkeiten von RNCamera

Unser Setup benötigt mindestens die JDK-Version 1.7 (die Sie höchstwahrscheinlich haben) und wenn Sie Android verwenden, benötigen Sie buildToolsVersion neuer als 25.0.2. (Natürlich gibt es eine ausführlichere und aktuellere Liste in den Dokumenten.)

Beginnen wir zunächst mit der Erstellung eines neuen React Native-Projekts:

 react-native init CameraExample

Lassen Sie uns nun die erste Version unseres React Native Camera-Beispiels über unser Telefon bereitstellen.

 cd CameraExample react-native run-android

Es sollte wie im folgenden Screenshot aussehen:

Jetzt ist es an der Zeit, das Paket „ react-native-camera “ in unserem Projekt zu installieren. Wir werden die Option „Meistens automatische Installation mit React-Native“ verwenden. (Es gibt andere wie Mostly automatic install with CocoaPods und Manual install, aber wir bleiben bei der ersten Option, da sie am effizientesten ist.) Führen Sie einfach Folgendes aus:

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

Sie müssen auch die folgenden Berechtigungen zu 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"

Sie müssen auch die Dimensionsstrategie in android/app/build.gradle – sie hat keinen Standardwert und Sie erhalten eine Fehlermeldung, wenn Sie sie nicht definieren:

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

Hinweis: Die Bemaßungsstrategie sollte normalerweise wie oben auf general eingestellt sein. Sie können es jedoch stattdessen auf mlkit , wenn Sie MLKit für die Text-/Gesichts-/Barcodeerkennung verwenden möchten.

Nach der Installation müssen Sie run-android verwenden, um die neuen Abhängigkeiten zu installieren:

 react-native run-android

Wenn alles gut gelaufen ist, sollten Sie wieder denselben React Native-Begrüßungsbildschirm auf Ihrem Gerät oder Simulator sehen.

Einrichten der Kamera

Beginnen wir zunächst damit, App.js zu App.js und RNCamera dort zu importieren:

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

Als Nächstes ändern wir die render so, dass sie unsere neu importierte RNCamera . Beachten Sie das style , das der Kamera hinzugefügt wurde, damit sie den gesamten Bildschirm einnimmt. Ohne diese Stile können Sie das Kamera-Rendering möglicherweise nicht auf Ihrem Bildschirm sehen, da es keinen Platz einnimmt:

 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> ); }

Nachdem Sie diesen Code hinzugefügt haben, sollte Ihre Benutzeroberfläche die Kamera im Vollbildmodus haben, genau wie im folgenden Screenshot:

Jetzt können wir Barcodes sehen (wie wir unsere Test-QR-Codes auf dem Monitor oben sehen können), aber wir können sie noch nicht lesen. Lassen Sie uns den Algorithmus von RNCamera verwenden, um zu erkennen, was in jedem von ihnen geschrieben ist.

Lesen von Barcode-Informationen

Um Barcode-Informationen zu lesen, verwenden wir die onGoogleVisionBarcodesDetected , damit wir eine Funktion aufrufen und die Informationen extrahieren können. Lassen Sie uns das in der <RNCamera> -Komponente hinzufügen und es mit einer barcodeRecognized Funktion verknüpfen, um sich darum zu kümmern. Beachten Sie, dass onGoogleVisionBarcodesDetected ein Objekt zurückgibt, das die barcodes-Eigenschaft enthält, die ein Array aller von der Kamera erkannten barcodes enthält.

Hinweis: Die onGoogleVisionBarcodesDetected -QR-Code-Technologie ist nur auf Android verfügbar, aber wenn Sie einen plattformübergreifenden Ansatz bevorzugen, sollten Sie sich besser für onBarCodeRead . Es unterstützt jeweils nur einen einzigen Barcode – die Verwendung als Fallback bleibt dem Leser als Übung überlassen.

So sollte unsere <RNCamera> aussehen, nachdem sie onGoogleVisionBarcodesDetected hinzugefügt hat:

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

Und jetzt können wir die Barcodes in App.js mit der folgenden Funktion handhaben, die uns nur warnt, wenn ein Barcode erkannt wird, und seinen Inhalt auf dem Bildschirm anzeigen sollte:

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

So sieht es in Aktion aus:

Rendern von Barcode-Overlays

Der vorherige Screenshot zeigt nun die im Barcode enthaltenen Informationen, lässt uns aber nicht wissen, welche Nachricht zu welchem ​​Barcode gehört. Dazu gehen wir tiefer in die von onGoogleVisionBarcodesDetected zurückgegebenen barcodes ein und versuchen, jeden der Barcodes auf unserem Bildschirm zu lokalisieren.

Aber zuerst müssen wir die erkannten Barcodes im Status speichern, damit wir darauf zugreifen und ein Overlay basierend auf den enthaltenen Daten rendern können. Wir werden nun unsere zuvor definierte Funktion so ändern, dass sie wie folgt aussieht:

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

Wir müssen jetzt ein state hinzufügen, das zu einem leeren Array von Barcodes initialisiert wurde, damit es keine Fehler in unseren render erzeugt:

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

Lassen Sie uns nun die Funktion renderBarCodes erstellen, die in der Komponente <RNCamera> hinzugefügt werden sollte:

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

Diese Funktion sollte nun die vom Staat erkannten Barcodes übernehmen und auf dem Bildschirm anzeigen:

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

Beachten Sie, dass das Mapping auf renderBarcode , das jeden Barcode auf dem Bildschirm rendern sollte. Ich habe einige kleinere Stile hinzugefügt, damit wir diese leicht erkennen können:

 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> );

Jeder erkannte Barcode hat:

• Eine bounds , die uns mitteilt, wo auf unserem Bildschirm der Barcode gefunden wurde, die wir verwenden, um das Overlay dafür zu rendern
• Eine data , die uns zeigt, was in diesem bestimmten Barcode codiert ist
• Eine type , die uns sagt, um welche Art von Barcode es sich handelt (2D, QR usw.)

Die Verwendung dieser drei Parameter, wie wir sie in der Render-Funktion oben haben, ergibt das folgende Ergebnis:

Plattformübergreifende Bereitstellung

Wie bereits erwähnt, abstrahiert RNCamera die nativen Teile des Kameramoduls in eine universelle plattformübergreifende Sprache. Es ist wichtig zu beachten, dass einige der Funktionen nur auf einer Plattform verfügbar sind oder auf einer anderen möglicherweise anders geschrieben werden. Um sicherzustellen, dass das, was Sie zu erstellen beabsichtigen, auf allen erforderlichen Plattformen unterstützt wird, sollten Sie immer zuerst die Dokumentation lesen. Darüber hinaus ist es immer besser, die Edge Cases auf verschiedenen Geräten zu testen, nachdem Sie Ihre Implementierung abgeschlossen haben, damit Sie sich über die Robustheit Ihres Produkts sicher sind.

Gehen Sie weiter und decodieren Sie

Ich hoffe, dieser kleine Vorgeschmack auf die Entwicklung von Augmented Reality war hilfreich und dass Sie jetzt die grundlegende React Native Camera-App auf Ihrem Telefon oder Simulator ausführen. Fühlen Sie sich frei, einen Kommentar zu hinterlassen, wenn Sie Fragen oder Wünsche haben!