Aprende a crear un lector de c贸digos QR con Angular 13 馃叞

Crearemos una aplicaci贸n para leer c贸digo de barras y c贸digos QR con las c谩maras de nuestros dispositivos y con Angular 13

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谩metroDefaultDescripci贸n
enabletrueActiva/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.
camerasFoundEvento que emite un array de c谩maras de tu dispositivo despu茅s de que la aplicaci贸n haya iniciado.
camerasNotFoundEvento 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.
scanErrorEvento 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.
scanCompleteEvento 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 馃枛

Servicios

Software

IoT

Digitalizaci贸n

Aplicaciones m贸viles

Consultor铆a

fjmduran.com v0.1.2