Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on November 5, 2022

 

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

TypeScript
1
public selectedFiles: SelectedFiles[] = [];

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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.

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme