Construire un scanner QR : un didacticiel sur l'appareil photo natif React

Dans ce didacticiel React Native Camera, nous allons créer une application de lecteur de code QR. Il sera capable de lire les codes QR en temps réel et de restituer leur contenu à l'écran au moment de la détection. Nous utiliserons le CLI Quickstart de React Native.

(Remarque : si vous avez besoin d'aide pour le configurer, vous pouvez toujours vous reporter à la page de démarrage de React Native. N'oubliez pas de cliquer sur le bouton "React Native CLI Quickstart", car "Expo CLI Quickstart" est présélectionné à l'époque. d'écrire cet article.)

Pourquoi React Native ?

React Native est un cadre précieux qui emprunte le paradigme et les principes de conception de React pour permettre un développement rapide et multiplateforme d'interfaces utilisateur dynamiques. Facebook, Airbnb, Uber et bien d'autres ont déjà leurs dernières applications construites avec React Native.

Qu'est-ce que la caméra native React ?

React Native Camera (RNCamera) est le composant incontournable lorsqu'il s'agit d'implémenter la fonctionnalité de caméra dans une application React Native. Ce composant vous aide à communiquer avec le système d'exploitation natif via quelques fonctions simples afin que vous puissiez utiliser le matériel de l'appareil. Vous pouvez créer vos applications autour de ces fonctions sans vous soucier du code natif. RNCamera prend déjà en charge :

• Photographies
• Vidéos
• Détection facial
• Lecture de code-barres
• Reconnaissance de texte (Android uniquement)

Notez que RNCamera était disponible en deux versions :

1. RNCaméra
2. RTCCamera (obsolète)

… alors assurez-vous d'utiliser RNCamera pour pouvoir continuer à recevoir les dernières mises à jour.

Remarque : React Native Camera est fortement basé sur le module de caméra Expo et il est assez facile de faire des allers-retours entre les deux.

Création de votre première application à l'aide de RNCamera

Avant de commencer notre scanner React Native QR, nous devrons installer certaines dépendances.

Installation des dépendances de RNCamera

Notre configuration nécessite au minimum la version 1.7 de JDK (que vous avez très probablement) et si vous êtes sur Android, vous aurez besoin de buildToolsVersion plus récent que 25.0.2. (Pour être sûr, il existe une liste plus détaillée et à jour dans la documentation.)

Commençons d'abord par créer un nouveau projet React Native :

 react-native init CameraExample

Déployons maintenant la première version de notre exemple React Native Camera sur notre téléphone.

 cd CameraExample react-native run-android

Cela devrait ressembler à la capture d'écran ci-dessous :

Il est maintenant temps d'installer le package react-native-camera dans notre projet. Nous utiliserons l'option "Installation principalement automatique avec réaction native". (Il y en a d'autres comme l'installation principalement automatique avec CocoaPods et l'installation manuelle, mais nous nous en tiendrons à la première option, car c'est la plus efficace.) Exécutez simplement :

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

Vous devez également ajouter les permissions suivantes à 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"

Vous devrez également définir la stratégie de dimension dans android/app/build.gradle — elle n'a pas de valeur par défaut et vous obtiendrez une erreur si vous ne la définissez pas :

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

Remarque : La stratégie de dimension doit normalement être définie sur general comme ci-dessus. Cependant, vous pouvez le définir sur mlkit à la place, si vous souhaitez utiliser MLKit pour la reconnaissance de texte/visage/code-barres.

Après l'installation, vous devrez utiliser run-android pour installer les nouvelles dépendances :

 react-native run-android

Si tout s'est bien passé, vous devriez voir à nouveau le même écran d'accueil React Native sur votre appareil ou votre simulateur.

Configuration de la caméra

Tout d'abord, commençons par modifier App.js et y importer RNCamera :

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

Ensuite, nous allons modifier la fonction de render pour inclure notre RNCamera nouvellement importé. Remarquez l'attribut de style ajouté à la caméra pour qu'elle prenne le plein écran. Sans ces styles, vous ne pourrez peut-être pas voir le rendu de la caméra sur votre écran, car il n'occupera aucun espace :

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

Après avoir ajouté ce code, votre interface devrait avoir la caméra allumée, en plein écran, tout comme la capture d'écran ci-dessous :

Maintenant, nous pouvons voir les codes-barres (comme nous pouvons voir nos codes QR de test affichés sur le moniteur ci-dessus), mais nous ne pouvons pas encore les lire. Utilisons l'algorithme de RNCamera pour reconnaître ce qui est écrit à l'intérieur de chacun d'eux.

Lire les informations du code-barres

Afin de lire les informations de code-barres, nous utiliserons la prop onGoogleVisionBarcodesDetected afin que nous puissions appeler une fonction et extraire les informations. Ajoutons cela dans le composant <RNCamera> et lions-le à une fonction barcodeRecognized pour s'en occuper. Notez que onGoogleVisionBarcodesDetected renvoie un objet contenant la propriété barcodes , qui contient un tableau de tous les codes-barres reconnus dans la caméra.

Remarque : La technologie de code QR onGoogleVisionBarcodesDetected n'est disponible que sur Android, mais si vous souhaitez une approche multiplateforme, vous feriez mieux d'opter pour onBarCodeRead . Il ne prend en charge qu'un seul code-barres à la fois - son utilisation comme solution de repli est laissée comme un exercice pour le lecteur.

Voici à quoi devrait ressembler notre <RNCamera> après l'ajout de onGoogleVisionBarcodesDetected :

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

Et maintenant, nous pouvons gérer les codes-barres dans App.js avec la fonction ci-dessous, qui ne nous avertira que lorsqu'un code-barres est détecté et devrait afficher son contenu à l'écran :

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

Voici à quoi ça ressemble en action:

Rendu des superpositions de codes-barres

La capture d'écran précédente montre maintenant les informations contenues dans le code-barres mais ne permet pas de savoir quel message appartient à quel code-barres. Pour cela, nous allons approfondir les codes- barcodes renvoyés par onGoogleVisionBarcodesDetected et essayer de repérer chacun des codes-barres sur notre écran.

Mais d'abord, nous devrons enregistrer les codes-barres reconnus dans l'état afin que nous puissions y accéder et rendre une superposition basée sur les données contenues. Nous allons maintenant modifier notre fonction précédemment définie pour qu'elle ressemble à ceci :

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

Nous allons maintenant devoir ajouter un objet d' state initialisé à un tableau vide de codes-barres afin qu'il ne crée aucune erreur dans nos fonctions de render :

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

Créons maintenant la fonction renderBarCodes qui doit être ajoutée dans le composant <RNCamera> :

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

Cette fonction devrait maintenant prendre les codes-barres reconnus par l'état et les afficher à l'écran :

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

Notez que le mappage pointe vers renderBarcode qui devrait afficher chaque code-barres à l'écran. J'ai ajouté quelques styles mineurs afin que nous puissions les reconnaître facilement :

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

Chaque code-barres reconnu possède :

• Une propriété bounds pour nous dire où sur notre écran le code-barres a été trouvé, que nous utiliserons pour rendre la superposition pour celui-ci
• Une propriété data qui nous montre ce qui est encodé dans ce code-barres spécifique
• Une propriété de type qui nous indique de quel type de code-barres il s'agit (2D, QR, etc.)

L'utilisation de ces trois paramètres comme nous l'avons dans la fonction de rendu ci-dessus donne le résultat suivant :

Déploiement multiplateforme

Comme mentionné, RNCamera résume les parties natives du module de caméra dans un langage multiplateforme universel. Il est important de noter que certaines des fonctionnalités ne seraient disponibles que sur une plate-forme ou qu'elles pourraient avoir une manière différente d'être écrites sur une autre. Pour vous assurer que ce que vous avez l'intention de construire est pris en charge sur toutes les plates-formes dont vous avez besoin, assurez-vous de toujours lire la documentation dans un premier temps. De plus, il est toujours préférable de tester les boîtiers périphériques sur différents appareils après avoir terminé votre implémentation, afin d'être sûr de la robustesse de votre produit.

Allez de l'avant et décodez

J'espère que ce petit aperçu du développement de la réalité augmentée a été utile et que vous avez maintenant l'application React Native Camera de base en cours d'exécution sur votre téléphone ou votre simulateur. N'hésitez pas à laisser un commentaire si vous avez des questions ou des demandes !