Angular 14 QR Code Scanner Using Webcam and Display Info in Browser Using ngx-scanner-qrcode in TS

Welcome folks today in this blog post we will be scanning the qrcode using webcam and display info in browser using ngx-scanner-qrcode in Angular 14 Using Typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to initialize a new angular project using the below command as shown below

ng new scannerapp

cd scannerapp

Now we need to install the dependencies for our angular project using the below command as shown below

npm i ngx-scanner-qrcode

Now we need to see the directory structure of the angular project as shown below

Now we need to go to app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {NgxScannerQrcodeModule} from 'ngx-scanner-qrcode'
import { SafePipe } from './safe.pipe';
@NgModule({
  declarations: [
    AppComponent,
    SafePipe
  ],
  imports: [
    BrowserModule,
    NgxScannerQrcodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import {NgxScannerQrcodeModule} from 'ngx-scanner-qrcode'

import { SafePipe } from './safe.pipe';

@NgModule({

declarations: [

AppComponent,

SafePipe

imports: [

BrowserModule,

NgxScannerQrcodeModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

As you can see we are importing the ngxScannerQrcodeModule from the ngx-scanner-qrcode library. And also we are importing the SafePipe file also we need to define this file. And also we need to add this library into the imports array and also we need to add it inside the declarations array.

Now we need to define the safe.pipe.ts file and copy paste the following code

safe.pipe.ts

// Angular
import { Pipe, PipeTransform } from '@angular/core';
import {
  DomSanitizer,
  SafeHtml,
  SafeStyle,
  SafeScript,
  SafeUrl,
  SafeResourceUrl,
} from '@angular/platform-browser';

/**
 * Sanitize HTML
 * Author: DaiDH
 */
@Pipe({
  name: 'safe',
})
export class SafePipe implements PipeTransform {
  /**
   * Pipe Constructor
   *
   * @param _sanitizer: DomSanitezer
   */
  // tslint:disable-next-line
  constructor(protected _sanitizer: DomSanitizer) {}

  /**
   * Transform
   *
   * @param value: string
   * @param type: string
   */
  transform(
    value: string,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        return this._sanitizer.bypassSecurityTrustHtml(value);
    }
  }
}

// Angular

import { Pipe, PipeTransform } from '@angular/core';

import {

DomSanitizer,

SafeHtml,

SafeStyle,

SafeScript,

SafeUrl,

SafeResourceUrl,

} from '@angular/platform-browser';

/**

* Sanitize HTML

* Author: DaiDH

@Pipe({

name: 'safe',

})

export class SafePipe implements PipeTransform {

/**

* Pipe Constructor

* @param _sanitizer: DomSanitezer

// tslint:disable-next-line

constructor(protected _sanitizer: DomSanitizer) {}

/**

* Transform

* @param value: string

* @param type: string

transform(

value: string,

type: string

): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {

switch (type) {

case 'html':

return this._sanitizer.bypassSecurityTrustHtml(value);

case 'style':

return this._sanitizer.bypassSecurityTrustStyle(value);

case 'script':

return this._sanitizer.bypassSecurityTrustScript(value);

case 'url':

return this._sanitizer.bypassSecurityTrustUrl(value);

case 'resourceUrl':

return this._sanitizer.bypassSecurityTrustResourceUrl(value);

default:

return this._sanitizer.bypassSecurityTrustHtml(value);

}

Now we need to write some code inside the app.component.ts file and copy paste the below code

app.component.ts

public config: Object = {
    isAuto: true,
    text: { font: '25px serif' }, // Hiden { font: '0px' },
    frame: { lineWidth: 8 },
    medias: {
      audio: false,
      video: {
        facingMode: 'environment', // To require the rear camera https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
        width: { ideal: 1280 },
        height: { ideal: 720 }
      }
    }
  };

public config: Object = {

isAuto: true,

text: { font: '25px serif' }, // Hiden { font: '0px' },

frame: { lineWidth: 8 },

medias: {

audio: false,

video: {

facingMode: 'environment', // To require the rear camera https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

width: { ideal: 1280 },

height: { ideal: 720 }

}

};

As you can see we are defining the configuration object where we will be defining the webcam properties such as webcam font text and size and then we are defining the lineWidth of the frame and then we defining the properties of the webcam such as audio and video properties and inside here we are defining the facingMode to environment and then we are defining the width and height properties of the webcam.

Now we need to define the selectedFiles array variable where we will be selecting the qrcode image files which will be uploaded by the user as shown below

public selectedFiles: SelectedFiles[] = [];

1	public selectedFiles: SelectedFiles[] = [];

As you can see we are importing the required library at the top of the file as shown below

import { NgxScannerQrcodeService, SelectedFiles } from 'ngx-scanner-qrcode';

1	import { NgxScannerQrcodeService, SelectedFiles } from 'ngx-scanner-qrcode';

Now we need to write code inside the app.component.html file and here we need to copy paste the html code of the angular app as shown below

app.component.html

<div class="container">
  <h1> ngx-scanner-qrcode </h1>

  <!-- ngx-scanner-qrcode -->
  <ngx-scanner-qrcode #action="scanner" [config]="config" (error)="onError($event)"></ngx-scanner-qrcode>

  <!-- data  -->
  <p class="data">{{ action.data | async }}</p>

  <!-- Loading -->
  <p *ngIf="action.isLoading">⌛ Loading...</p>

  <!-- toggleCamera -->
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading">
    <img *ngIf="!action.isStart" (click)="handle(action, 'start')" src="https://img.icons8.com/ios/50/000000/no-camera--v2.png" width="30px"/>
    <img *ngIf="action.isStart" (click)="handle(action, 'stop')" src="https://img.icons8.com/ios/50/000000/no-camera--v1.png" width="30px"/>
  </button>

  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, 'start')">Start</button>
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, 'play')">Play</button>
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, 'pause')">Pause</button>
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, 'stop')">Stop</button>
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="action.download('ngx-scanner-qrcode')">Cap</button>

  <br>
  
  <!-- For select files -->
  <input #file type="file" (change)="onSelects(file.files)" [multiple]="'multiple'" [accept]="'.jpg, .png, .gif, .jpeg'" class="btn btn-success my-2"/>

  <ol>
    <li *ngFor="let row of selectedFiles">
      <img [src]="row.urlQR" [alt]="row.name">
      <p class="data">{{row.dataQR}}</p>
    </li>
  </ol>

</div>

<h1> ngx-scanner-qrcode </h1>

<ngx-scanner-qrcode #action="scanner" [config]="config" (error)="onError($event)"></ngx-scanner-qrcode>

<p class="data">{{ action.data | async }}</p>

<p *ngIf="action.isLoading">⌛ Loading...</p>

</button>

<button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, 'start')">Start</button>

<button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, 'pause')">Pause</button>

<br>

<ol>

<p class="data">{{row.dataQR}}</p>

</li>

</ol>

</div>

As you can see we are displaying the different buttons to start and stop the webcam and also we have the input file element where we will be able to upload the qrcode image files and then we have the space to display the qrcode info as shown below

As you can see we have different buttons and we are displaying the webcam video of the user. And then we need to write the code for the various methods as shown below

constructor(private qrcode: NgxScannerQrcodeService) { }

  public onError(e: any): void {
    alert(e);
  }

  public handle(action: any, fn: string): void {
    action[fn]().subscribe(console.log, console.error);
  }

  public onSelects(files: any) {
    this.qrcode.loadFiles(files, this.config).subscribe(res => {
      this.selectedFiles = res.filter(f => f.urlQR);
      console.log(res); // v1.0.25 Fixed issue https://stackoverflow.com/questions/74245551/ngx-scanner-qrcode-reading-data-in-ts
    });
  }

constructor(private qrcode: NgxScannerQrcodeService) { }

public onError(e: any): void {

alert(e);

}

public handle(action: any, fn: string): void {

action[fn]().subscribe(console.log, console.error);

}

public onSelects(files: any) {

this.qrcode.loadFiles(files, this.config).subscribe(res => {

this.selectedFiles = res.filter(f => f.urlQR);

console.log(res); // v1.0.25 Fixed issue https://stackoverflow.com/questions/74245551/ngx-scanner-qrcode-reading-data-in-ts

});

}

As you can see we have defined the methods when we scan the qrcode then we need to handle this in the above methods and then we are displaying the result also. And also when we upload the qrcode image using the input element then also we are handling the qrcode image and sending the resultant qrcode info data and displaying it inside the browser.