Construya un escáner QR: un tutorial de cámara nativa React

En este tutorial de React Native Camera, crearemos una aplicación de lector de código QR. Podrá leer códigos QR en tiempo real y mostrar su contenido en la pantalla en el momento de la detección. Usaremos el inicio rápido de la CLI de React Native.

(Nota: si necesita ayuda para configurar esto, siempre puede consultar la página de inicio de React Native; no olvide hacer clic en el botón "React Native CLI Quickstart", ya que "Expo CLI Quickstart" viene preseleccionado en ese momento de escribir este artículo.)

¿Por qué reaccionar nativo?

React Native es un marco valioso que toma prestado el paradigma y los principios de diseño de React para permitir un desarrollo rápido y multiplataforma de interfaces de usuario ágiles. Facebook, Airbnb, Uber y muchos otros ya tienen sus últimas aplicaciones creadas con React Native.

¿Qué es la cámara nativa React?

React Native Camera (RNCamera) es el componente de referencia cuando se trata de implementar la funcionalidad de la cámara en una aplicación React Native. Este componente lo ayuda a comunicarse con el sistema operativo nativo a través de algunas funciones simples para que pueda usar el hardware del dispositivo. Puede crear sus aplicaciones en torno a estas funciones sin meterse en la molestia del código nativo. RNCamera ya es compatible con:

• Fotografías
• Vídeos
• Detección de rostro
• Escaneo de código de barras
• Reconocimiento de texto (solo Android)

Tenga en cuenta que RNCamera solía venir en dos sabores:

1. RNCamera
2. RCTCamera (en desuso)

…así que asegúrese de usar RNCamera para poder seguir recibiendo las últimas actualizaciones.

Nota: React Native Camera se basa en gran medida en el módulo de cámara Expo y alternar entre los dos es bastante fácil.

Creando tu primera aplicación usando RNCamera

Antes de comenzar nuestro escáner React Native QR, hay algunas dependencias que necesitaremos instalar.

Instalación de las dependencias de RNCamera

Nuestra configuración necesita como mínimo la versión 1.7 de JDK (que es muy probable que tenga) y, si está en Android, necesitará buildToolsVersion más reciente que 25.0.2. (Para estar seguro, hay una lista más detallada y actualizada en los documentos).

Primero, comencemos creando un nuevo proyecto React Native:

 react-native init CameraExample

Ahora implementemos la primera versión de nuestro ejemplo de React Native Camera en nuestro teléfono.

 cd CameraExample react-native run-android

Debería verse como la siguiente captura de pantalla:

Ahora es el momento de instalar el paquete react-native-camera en nuestro proyecto. Usaremos la opción "Instalación principalmente automática con react-native". (Hay otras, como la instalación principalmente automática con CocoaPods y la instalación manual, pero nos ceñiremos a la primera opción, ya que es la más eficiente). Simplemente ejecute:

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

También debe agregar los siguientes permisos a 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"

También deberá configurar la estrategia de dimensión en android/app/build.gradle ; no tiene valores predeterminados y obtendrá un error si no la define:

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

Nota: La estrategia de dimensión normalmente debe establecerse en general como se indicó anteriormente. Sin embargo, puede establecerlo en mlkit en su lugar, si desea utilizar MLKit para el reconocimiento de texto/rostro/código de barras.

Después de la instalación, deberá usar run-android para instalar las nuevas dependencias:

 react-native run-android

Si todo salió bien, debería volver a ver la misma pantalla de bienvenida de React Native en su dispositivo o simulador.

Configuración de la cámara

Primero, comencemos modificando App.js e importando RNCamera allí:

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

A continuación, modificaremos la función de render para incluir nuestra RNCamera recién importada. Observe el atributo de style agregado a la cámara para que ocupe la pantalla completa. Sin estos estilos, es posible que no pueda ver el renderizado de la cámara en su pantalla, ya que no ocupará ningún espacio:

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

Después de agregar este código, su interfaz debería tener la cámara encendida, en pantalla completa, tal como se muestra en la siguiente captura de pantalla:

Ahora podemos ver los códigos de barras (como podemos ver nuestros códigos QR de prueba que se muestran en el monitor de arriba) pero aún no podemos leerlos. Usemos el algoritmo de RNCamera para reconocer lo que está escrito dentro de cada uno de ellos.

Lectura de información de código de barras

Para leer la información del código de barras, usaremos la propiedad onGoogleVisionBarcodesDetected para que podamos llamar a una función y extraer la información. Agreguemos eso en el componente <RNCamera> y barcodeRecognized a una función de código de barras reconocido para encargarse de ello. Tenga en cuenta que onGoogleVisionBarcodesDetected devuelve un objeto que contiene la propiedad de barcodes de barras, que contiene una matriz de todos los códigos de barras reconocidos en la cámara.

Nota: La tecnología de código QR onGoogleVisionBarcodesDetected solo está disponible en Android, pero si desea un enfoque multiplataforma, es mejor que opte por onBarCodeRead . Solo admite un único código de barras a la vez; usarlo como respaldo se deja como ejercicio para el lector.

Así es como debería verse nuestra <RNCamera> después de agregar onGoogleVisionBarcodesDetected :

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

Y ahora podemos manejar los códigos de barras en App.js con la siguiente función, que solo nos avisará cuando se detecte un código de barras y debería mostrar su contenido en la pantalla:

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

Así es como se ve en acción:

Representación de superposiciones de códigos de barras

La captura de pantalla anterior ahora muestra la información contenida en el código de barras pero no nos permite saber qué mensaje pertenece a qué código de barras. Para ello, profundizaremos en los códigos de barcodes devueltos por onGoogleVisionBarcodesDetected e intentaremos identificar cada uno de los códigos de barras en nuestra pantalla.

Pero primero, necesitaremos guardar los códigos de barras reconocidos en el estado para que podamos acceder a ellos y generar una superposición basada en los datos contenidos. Ahora modificaremos nuestra función previamente definida para que se vea así:

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

Ahora necesitaremos agregar un objeto de state inicializado a una matriz vacía de códigos de barras para que no cree ningún error en nuestras funciones de render :

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

Ahora vamos a crear la función renderBarCodes que debe agregarse dentro del componente <RNCamera> :

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

Esta función ahora debería tomar los códigos de barras reconocidos del estado y mostrarlos en la pantalla:

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

Tenga en cuenta que la asignación apunta a renderBarcode , que debería representar cada código de barras en la pantalla. He agregado algunos estilos menores para que podamos reconocerlos fácilmente:

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

Cada código de barras reconocido tiene:

• Una propiedad de bounds para decirnos en qué parte de nuestra pantalla se encontró el código de barras, que usaremos para representar la superposición para él.
• Una propiedad data que nos muestra qué está codificado en ese código de barras específico
• Una propiedad de type que nos dice qué tipo de código de barras es (2D, QR, etc.)

El uso de esos tres parámetros que tenemos en la función de representación anterior da el siguiente resultado:

Implementación multiplataforma

Como se mencionó, RNCamera abstrae las partes nativas del módulo de la cámara en un lenguaje multiplataforma universal. Es importante tener en cuenta que algunas de las funciones solo estarán disponibles en una plataforma o pueden tener una forma diferente de escribirse en otra. Para asegurarse de que lo que pretende construir sea compatible con todas las plataformas que necesita, asegúrese de leer siempre la documentación como primer paso. Además, siempre es mejor probar los casos extremos en diferentes dispositivos después de que haya terminado su implementación, para que esté seguro de la solidez de su producto.

Ir adelante y decodificar

Espero que esta pequeña muestra del desarrollo de la realidad aumentada haya sido útil y que ahora tenga la aplicación React Native Camera básica ejecutándose en su teléfono o simulador. ¡Siéntase libre de dejar un comentario si tiene alguna pregunta o solicitud!