Construiește un scaner QR: un tutorial pentru camera nativă React

În acest tutorial React Native Camera, vom crea o aplicație de citire a codurilor QR. Acesta va putea citi codurile QR în timp real și va reda conținutul acestora pe ecran în momentul detectării. Vom folosi CLI Quickstart de la React Native.

(Notă: dacă aveți nevoie de ajutor pentru configurarea acesteia, puteți oricând să consultați pagina React Native Introducere — nu uitați să faceți clic pe butonul „React Native CLI Quickstart”, deoarece „Expo CLI Quickstart” este preselectat la momentul respectiv. de a scrie acest articol.)

De ce React Native?

React Native este un cadru valoros care împrumută paradigma React și principiile de proiectare pentru a permite dezvoltarea rapidă, pe mai multe platforme, a interfețelor de utilizare rapide. Facebook, Airbnb, Uber și multe altele au deja cele mai recente aplicații create cu React Native.

Ce este React Native Camera?

React Native Camera (RNCamera) este componenta de bază atunci când vine vorba de implementarea funcționalității camerei într-o aplicație React Native. Această componentă vă ajută să comunicați cu sistemul de operare nativ prin intermediul unor funcții simple, astfel încât să puteți utiliza hardware-ul dispozitivului. Vă puteți construi aplicațiile în jurul acestor funcții fără a intra în problema codului nativ. RNCamera acceptă deja:

• Fotografii
• Videoclipuri
• Detectare facială
• Scanarea codurilor de bare
• Recunoaștere text (numai Android)

Rețineți că RNCamera venea în două variante:

1. RNCamera
2. RCTCamera (învechit)

…deci asigurați-vă că utilizați RNCamera, astfel încât să puteți continua să primiți cele mai recente actualizări.

Notă: React Native Camera se bazează în mare parte pe modulul de cameră Expo și trecerea înainte și înapoi între cele două este destul de ușoară.

Crearea primei aplicații folosind RNCamera

Înainte de a începe scanerul nostru React Native QR, există câteva dependențe pe care va trebui să le instalăm.

Instalarea dependențelor RNCamera

Configurarea noastră are nevoie de un minim de versiunea JDK 1.7 (pe care cel mai probabil o aveți) și, dacă sunteți pe Android, veți avea nevoie de buildToolsVersion mai nouă decât 25.0.2. (Pentru a fi sigur, există o listă mai detaliată și mai actualizată în documente.)

Mai întâi, să începem prin a crea un nou proiect React Native:

 react-native init CameraExample

Acum, să implementăm prima versiune a exemplului nostru React Native Camera pe telefon.

 cd CameraExample react-native run-android

Ar trebui să arate ca captura de ecran de mai jos:

Acum este timpul să instalăm pachetul react-native-camera în proiectul nostru. Vom folosi opțiunea „Instalare în cea mai mare parte automată cu react-native”. (Există și altele precum Instalarea în mare parte automată cu CocoaPods și Instalarea manuală, dar vom rămâne la prima opțiune, deoarece este cea mai eficientă.) Pur și simplu rulați:

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

De asemenea, trebuie să adăugați următoarele permisiuni la 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"

De asemenea, va trebui să setați strategia de dimensiune în android/app/build.gradle — nu are implicit și veți primi o eroare dacă nu o definiți:

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

Notă: în mod normal, strategia de dimensiune ar trebui să fie setată la general ca mai sus. Cu toate acestea, îl puteți seta la mlkit în schimb, dacă doriți să utilizați MLKit pentru recunoașterea text/față/cod de bare.

După instalare, va trebui să utilizați run-android pentru a instala noile dependențe:

 react-native run-android

Dacă totul a mers bine, ar trebui să vedeți din nou același ecran de bun venit React Native pe dispozitiv sau simulator.

Configurarea camerei

În primul rând, să începem prin a modifica App.js și a importa acolo RNCamera :

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

În continuare, vom modifica funcția de render pentru a include RNCamera nou importată. Observați atributul de style adăugat camerei pentru ca aceasta să ia întregul ecran. Fără aceste stiluri, este posibil să nu puteți vedea randamentul camerei pe ecran, deoarece nu va ocupa spațiu:

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

După adăugarea acestui cod, interfața dvs. ar trebui să aibă camera pornită, pe ecran complet, la fel ca în captura de ecran de mai jos:

Acum putem vedea coduri de bare (așa cum putem vedea codurile noastre QR de testare afișate pe monitorul de mai sus), dar nu le putem citi încă. Să folosim algoritmul RNCamera pentru a recunoaște ce este scris în fiecare dintre ele.

Citirea informațiilor despre codul de bare

Pentru a citi informațiile codurilor de bare, vom folosi prop onGoogleVisionBarcodesDetected , astfel încât să putem apela o funcție și să extragem informațiile. Să adăugăm asta în componenta <RNCamera> și să o conectăm la o funcție de cod de barcodeRecognized pentru a avea grijă de ea. Rețineți că onGoogleVisionBarcodesDetected returnează un obiect care conține proprietatea coduri de barcodes , care conține o matrice cu toate codurile de bare recunoscute în cameră.

Notă: tehnologia codului QR onGoogleVisionBarcodesDetected este disponibilă numai pe Android, dar dacă doriți o abordare multiplatformă, ar fi bine să onBarCodeRead . Acceptă doar un singur cod de bare la un moment dat - folosirea lui ca rezervă este lăsată ca un exercițiu pentru cititor.

Iată cum ar trebui să arate <RNCamera> după adăugarea onGoogleVisionBarcodesDetected :

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

Și acum putem gestiona codurile de bare din App.js cu funcția de mai jos, care ne va avertiza doar când este detectat un cod de bare și ar trebui să-și afișeze conținutul pe ecran:

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

Iată cum arată în acțiune:

Redarea suprapunerilor de coduri de bare

Captura de ecran anterioară arată acum informațiile conținute în codul de bare, dar nu ne permite să știm ce mesaj aparține cărui cod de bare. Pentru aceasta, vom aprofunda codurile de barcodes returnate de pe onGoogleVisionBarcodesDetected și vom încerca să identificăm fiecare dintre codurile de bare de pe ecranul nostru.

Dar mai întâi, va trebui să salvăm codurile de bare recunoscute în stare, astfel încât să le putem accesa și să redăm o suprapunere pe baza datelor conținute. Vom modifica acum funcția definită anterior pentru a arăta astfel:

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

Acum va trebui să adăugăm un obiect de state inițializat la o matrice goală de coduri de bare, astfel încât să nu creeze erori în funcțiile noastre de render :

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

Să creăm acum funcția renderBarCodes care ar trebui adăugată în componenta <RNCamera> :

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

Această funcție ar trebui să ia acum codurile de bare recunoscute din stat și să le arate pe ecran:

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

Observați că maparea este îndreptată către renderBarcode , care ar trebui să redă fiecare cod de bare pe ecran. Am adăugat câteva stiluri minore pentru ca noi să le putem recunoaște cu ușurință:

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

Fiecare cod de bare recunoscut are:

• O proprietate bounds pentru a ne spune unde pe ecran a fost găsit codul de bare, pe care îl vom folosi pentru a reda suprapunerea acestuia
• O proprietate data care ne arată ce este codificat în acel cod de bare specific
• O proprietate type care ne spune ce fel de cod de bare este (2D, QR etc.)

Folosind acești trei parametri așa cum îi avem în funcția de randare de mai sus dă următorul rezultat:

Implementare pe mai multe platforme

După cum sa menționat, RNCamera retrage părțile native ale modulului camerei într-un limbaj universal multiplatform. Este important de reținut că unele dintre funcții ar fi disponibile doar pe o platformă sau pot avea o modalitate diferită de a fi scrise pe alta. Pentru a vă asigura că ceea ce intenționați să construiți este acceptat pe toate platformele de care aveți nevoie, asigurați-vă că citiți întotdeauna documentația ca prim pas. În plus, este întotdeauna mai bine să testați carcasele de margine pe diferite dispozitive după ce ați terminat implementarea, astfel încât să fiți sigur de robustețea produsului dvs.

Du-te înainte și decodează

Sper că acest mic gust de dezvoltare a realității augmentate a fost de ajutor și că acum aveți aplicația de bază React Native Camera care rulează pe telefon sau simulator. Simțiți-vă liber să lăsați un comentariu dacă aveți întrebări sau solicitări!