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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// 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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
1 |
public selectedFiles: SelectedFiles[] = []; |
As you can see we are importing the required
library at the top of the file as shown below
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.