Buat Pemindai QR: Tutorial Kamera React Native

Dalam tutorial React Native Camera ini, kita akan membuat aplikasi pembaca kode QR. Ini akan dapat membaca kode QR secara real time dan menampilkan kontennya ke layar pada saat deteksi. Kami akan menggunakan Quickstart CLI React Native.

(Catatan: Jika Anda memerlukan bantuan untuk menyiapkan ini, Anda selalu dapat merujuk ke halaman Memulai React Native—jangan lupa untuk mengklik tombol "React Native CLI Quickstart", karena "Expo CLI Quickstart" telah dipilih sebelumnya pada saat itu. menulis artikel ini.)

Mengapa Bereaksi Asli?

React Native adalah kerangka kerja berharga yang meminjam paradigma dan prinsip-prinsip desain React untuk memungkinkan pengembangan lintas platform yang cepat dari UI yang cepat. Facebook, Airbnb, Uber, dan banyak lainnya sudah memiliki aplikasi terbaru yang dibuat dengan React Native.

Apa itu React Native Camera?

React Native Camera (RNCamera) adalah komponen masuk untuk mengimplementasikan fungsionalitas kamera di aplikasi React Native. Komponen ini membantu Anda berkomunikasi dengan OS asli melalui beberapa fungsi sederhana sehingga Anda dapat menggunakan perangkat keras perangkat. Anda dapat membangun aplikasi Anda di sekitar fungsi-fungsi ini tanpa harus repot dengan kode asli. RNCamera sudah mendukung:

• foto-foto
• Video
• Deteksi wajah
• Pemindaian kode batang
• Pengenalan teks (khusus Android)

Perhatikan bahwa RNCamera dulu datang dalam dua rasa:

1. kamera
2. RCTCamera (tidak digunakan lagi)

…jadi pastikan untuk menggunakan RNCamera agar Anda dapat terus mendapatkan pembaruan terbaru.

Catatan: React Native Camera sangat didasarkan pada modul kamera Expo dan bolak-balik di antara keduanya cukup mudah.

Membuat Aplikasi Pertama Anda Menggunakan RNCamera

Sebelum kita memulai pemindai React Native QR, ada beberapa dependensi yang perlu kita instal.

Menginstal Dependensi RNCamera

Penyiapan kami membutuhkan minimal JDK versi 1.7 (yang kemungkinan besar Anda miliki) dan jika Anda menggunakan Android, Anda memerlukan buildToolsVersion lebih baru dari 25.0.2. (Yang pasti, ada daftar yang lebih detail dan terbaru di dokumen.)

Pertama mari kita mulai dengan membuat proyek React Native baru:

 react-native init CameraExample

Sekarang mari kita gunakan versi pertama dari contoh React Native Camera kita melalui telepon kita.

 cd CameraExample react-native run-android

Seharusnya terlihat seperti tangkapan layar di bawah ini:

Sekarang saatnya menginstal paket react-native-camera di proyek kita. Kami akan menggunakan opsi "Sebagian besar otomatis menginstal dengan reaksi-asli". (Ada yang lain seperti Kebanyakan instal otomatis dengan CocoaPods dan instal Manual, tetapi kami akan tetap menggunakan opsi pertama, karena ini yang paling efisien.) Jalankan saja:

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

Anda juga harus menambahkan izin berikut ke 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"

Anda juga harus menyetel strategi dimensi di android/app/build.gradle tidak memiliki default dan Anda akan mendapatkan kesalahan jika tidak mendefinisikannya:

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

Catatan: Strategi dimensi biasanya harus disetel ke general seperti di atas. Namun, Anda dapat menyetelnya ke mlkit , jika Anda ingin menggunakan MLKit untuk pengenalan teks/wajah/kode batang.

Setelah instalasi, Anda harus menggunakan run-android untuk menginstal dependensi baru:

 react-native run-android

Jika semuanya berjalan dengan baik, Anda akan melihat layar selamat datang React Native yang sama di perangkat atau simulator Anda lagi.

Menyiapkan Kamera

Pertama, mari kita mulai dengan memodifikasi App.js dan mengimpor RNCamera di sana:

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

Selanjutnya, kita akan memodifikasi fungsi render untuk menyertakan RNCamera yang baru diimpor. Perhatikan atribut style yang ditambahkan ke kamera untuk mengambil layar penuh. Tanpa gaya ini, Anda mungkin tidak dapat melihat tampilan kamera di layar Anda, karena tidak akan menempati ruang apa pun:

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

Setelah menambahkan kode ini, antarmuka Anda harus memiliki kamera, layar penuh, seperti tangkapan layar di bawah ini:

Sekarang kita dapat melihat kode batang (seperti yang kita lihat kode QR pengujian kami ditampilkan pada monitor di atas) tetapi kami belum dapat membacanya. Mari kita gunakan algoritma RNCamera untuk mengenali apa yang tertulis di dalamnya masing-masing.

Membaca Informasi Kode Batang

Untuk membaca informasi barcode, kita akan menggunakan prop onGoogleVisionBarcodesDetected sehingga kita dapat memanggil fungsi dan mengekstrak informasi. Mari tambahkan itu di komponen <RNCamera> dan tautkan ke fungsi barcodeRecognized untuk menanganinya. Perhatikan bahwa onGoogleVisionBarcodesDetected mengembalikan objek yang berisi properti barcodes , yang berisi larik semua kode batang yang dikenali di kamera.

Catatan: Teknologi kode QR onGoogleVisionBarcodesDetected hanya tersedia di Android, tetapi jika Anda menginginkan pendekatan lintas platform, Anda sebaiknya menggunakan onBarCodeRead . Ini hanya mendukung satu kode batang pada satu waktu—menggunakannya sebagai mundur dibiarkan sebagai latihan untuk pembaca.

Berikut tampilan <RNCamera> kami setelah menambahkan onGoogleVisionBarcodesDetected :

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

Dan sekarang kita dapat menangani barcode di App.js dengan fungsi di bawah ini, yang hanya akan memperingatkan kita ketika barcode terdeteksi dan akan menampilkan kontennya di layar:

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

Berikut tampilannya saat beraksi:

Rendering Barcode Overlay

Tangkapan layar sebelumnya sekarang menunjukkan informasi yang terkandung dalam kode batang tetapi tidak memungkinkan kami untuk mengetahui pesan mana yang termasuk dalam kode batang mana. Untuk ini, kita akan masuk lebih dalam ke barcodes yang dikembalikan dari onGoogleVisionBarcodesDetected dan mencoba menunjukkan dengan tepat setiap kode batang di layar kita.

Tapi pertama-tama, kita perlu menyimpan barcode yang dikenali ke dalam status sehingga kita bisa mengaksesnya dan membuat overlay berdasarkan data yang ada. Sekarang kita akan memodifikasi fungsi yang kita definisikan sebelumnya agar terlihat seperti ini:

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

Sekarang kita perlu menambahkan objek state yang diinisialisasi ke larik kode batang kosong sehingga tidak membuat kesalahan dalam fungsi render kita:

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

Sekarang mari kita buat fungsi renderBarCodes yang harus ditambahkan di dalam komponen <RNCamera> :

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

Fungsi ini sekarang harus mengambil kode batang yang dikenali dari status dan menunjukkannya di layar:

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

Perhatikan bahwa pemetaan diarahkan ke renderBarcode yang seharusnya membuat setiap kode batang di layar. Saya telah menambahkan beberapa gaya kecil agar kita dapat mengenalinya dengan mudah:

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

Setiap kode batang yang dikenali memiliki:

• Properti bounds untuk memberi tahu kami di mana di layar kami kode batang ditemukan, yang akan kami gunakan untuk merender overlay untuk itu
• Properti data yang menunjukkan kepada kita apa yang dikodekan dalam kode batang tertentu
• type properti yang memberi tahu kita jenis kode batang itu (2D, QR, dll.)

Menggunakan ketiga parameter tersebut seperti yang kita miliki dalam fungsi render di atas memberikan hasil sebagai berikut:

Penerapan lintas platform

Seperti disebutkan, RNCamera mengabstraksi bagian asli modul kamera ke dalam bahasa lintas platform universal. Penting untuk dicatat bahwa beberapa fitur hanya akan tersedia di satu platform atau mungkin memiliki cara berbeda untuk ditulis di platform lain. Untuk memastikan bahwa apa yang ingin Anda bangun didukung di semua platform yang Anda perlukan, pastikan untuk selalu membaca dokumentasi sebagai langkah pertama. Selain itu, selalu lebih baik untuk menguji kasus tepi pada perangkat yang berbeda setelah Anda selesai menerapkan Anda, sehingga Anda yakin tentang kekokohan produk Anda.

Maju dan Dekode

Saya harap sedikit pengembangan augmented reality ini bermanfaat, dan Anda sekarang memiliki aplikasi React Native Camera dasar yang berjalan di ponsel atau simulator Anda. Jangan ragu untuk memberikan komentar jika Anda memiliki pertanyaan atau permintaan!