Aprende a crear un lector de c贸digos QR con Angular 13 馃叞
Publicado el 09.07.2022 a las 13:59
Aprende a crear un lector de c贸digos QR con Angular 13 馃叞
Aprende a crear un lector de c贸digos QR con Angular 13 馃叞
La aplicaci贸n que vamos a crear no s贸lo leer谩 c贸digos QR, sino que tambi茅n podr谩 leer c贸digo de barra de toda la vida.
Crearemos el core de la aplicaci贸n, ser谩 funcional pero no ser谩 muy bonita. Ya te encargas t煤 de darle estilo 馃榿
驴C贸mo ser谩 la aplicaci贸n que vamos a desarrollar?
Tendr谩 un desplegable en donde podremos seleccionar que c谩mara del dispositivo usar y cada 200 ms leeremos la pantalla en busca de alg煤n c贸digo, si encontramos alguno v谩lido lo imprimimos en consola y en el HMTL como un p谩rrafo.
As铆 ser谩 馃憞
No es la aplicaci贸n m谩s bonita del mundo pero funciona.
Al turr贸n 馃捇
Puedes descargar o clonar este proyecto desde mi GitHub 馃憟馃殌
Nos vamos a apoyar en una librer铆a que nos va a hacer la vida m谩s f谩cil, dicha librer铆a es ngx-scanner.
Actualmente tiene m谩s de 20.000 descargar semanales, te dejo aqu铆 el link al repositorio de npm.
La librer铆a es f谩cil de usar, pero me pegu茅 2 horas intentando seleccionar la c谩mara web de mi port谩til y por eso me decid铆 a escribir este art铆culo.
La versi贸n v谩lida de la librer铆a para Angular 13 es la 3.5.0
Para seleccionar los medios de captura de imagen de tu dispositivo de forma nativa usando la api del navegador 馃憞
navigator.mediaDevices.enumerateDevices().then((devices) => {
for (var i = 0; i < devices.length; i++) {
var device = devices[i];
if (device.kind === 'videoinput') {
console.log(device);
this.myDevice = devices[1];
}
}
console.log(this.myDevice);
});
No obstante la librer铆a ya te facilita el m茅todo camerasFound
Te dejo todas las propiedades y m茅todos que puedes usar con la librer铆a
<zxing-scanner
[enable]="scannerEnabled"
[(device)]="desiredDevice"
[torch]="torch"
(torchCompatible)="onTorchCompatible($event)"
(camerasFound)="camerasFoundHandler($event)"
(camerasNotFound)="camerasNotFoundHandler($event)"
(scanSuccess)="scanSuccessHandler($event)"
(scanError)="scanErrorHandler($event)"
(scanFailure)="scanFailureHandler($event)"
(scanComplete)="scanCompleteHandler($event)"
></zxing-scanner>
| Par谩metro | Default | Descripci贸n |
|---|---|---|
| enable | true | Activa/desactiva el escaneo de la c谩mara en busca de c贸digos. |
device | Ser谩 la c谩mara que se usar谩 para escanear los c贸digo. | |
torch (experimental) | Podremos activar/desactivar el flash de la c谩mara | |
torchCompatible (experimental) | Nos dir谩 si el flash es compatible con la c谩mara. | |
camerasFound | Evento que emite un array de c谩maras de tu dispositivo despu茅s de que la aplicaci贸n haya iniciado. | |
camerasNotFound | Evento emitido cuando no se encuentran c谩maras en tu dispositivo. | |
scanSuccess | Evento que emite la cadena de texto detr谩s del c贸digo le铆do por la c谩mara. | |
scanError | Evento emitido por un error durante la lectura de la c谩mara. | |
scanFailure | Evento emitido cuando no se puede leer el c贸digo por la c谩mara. | |
scanComplete | Evento emitido tras el escaneo de un c贸digo, independientemente de si el escaneo es satisfactorio o no. |
El c贸digo
HTML
<select #selectList (change)="selectCamera(selectList.value)">
<option *ngFor="let camera of cameras" value={{camera.label}}>
{{ camera.label }}
</option>
</select>
<zxing-scanner style="width: 500px;"
[enable]="scannerEnabled"
[device]="myDevice"
(camerasFound)="camerasFoundHandler($event)"
(scanSuccess)="scanSuccessHandler($event)"
></zxing-scanner>
<p *ngFor="let result of results">{{result}}</p>
El typescript del componente
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'qr-reader';
public cameras:MediaDeviceInfo[]=[];
public myDevice!: MediaDeviceInfo;
public scannerEnabled=false;
public results:string[]=[];
constructor() {
}
camerasFoundHandler(cameras: MediaDeviceInfo[]){
this.cameras=cameras;
this.selectCamera(this.cameras[0].label);
}
scanSuccessHandler(event:string){
console.log(event);
this.results.unshift(event);
}
selectCamera(cameraLabel: string){
this.cameras.forEach(camera=>{
if(camera.label.includes(cameraLabel)){
this.myDevice=camera;
console.log(camera.label);
this.scannerEnabled=true;
}
})
}
}
El app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ZXingScannerModule } from '@zxing/ngx-scanner';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ZXingScannerModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Como ya te he dicho, lo tienes todo en mi GitHub 馃憟馃殌
Hasta luego 馃枛
驴Te gusta mi contenido? Ap贸yame
Puede que te interesen los siguientes art铆culos 馃憞
