Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
Menu

Angular 14 Zxing QR or Bar Codes Scanner in Browser Using ngx-scanner Library in TypeScript

Posted on January 23, 2023

 

 

Welcome folks today in this blog post we will be scanning qr and bar codes in browser using ngx-scanner library in browser using TypeScript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new angular project using the below command

 

 

ng new angularapp

 

 

cd angularapp

 

 

And after that you need to install the below libraries using the below command as shown below

 

 

npm i ngx-scanner

 

 

And after that you will seeing the below directory structure of the angular app as shown below

 

 

 

 

 

Now first of all you need to go 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
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { ZXingScannerModule } from '@zxing/ngx-scanner';
 
import { AppComponent } from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    ZXingScannerModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

As you can see we are including the ngx-scanner library and including it inside the imports array

 

 

And now we need to go to app.component.html file and copy paste the following code

 

 

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div class="scanner-shell" [hidden]="!hasDevices">
 
<header>
<select (change)="onDeviceSelectChange($event.target.value)">
      <option value="" [selected]="!currentDevice">No Device Selected</option>
      <option *ngFor="let device of availableDevices" [value]="device.deviceId" [selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{ device.label }}</option>
        </select>
</header>
 
<zxing-scanner #scanner start="true" [device]="currentDevice" (scanSuccess)="handleQrCodeResult($event)" [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']"></zxing-scanner>
 
<section class="results" *ngIf="qrResultString">
<small>Result</small>
<strong>{{ qrResultString }}</strong>
</section>
 
</div>
 
<ng-container *ngIf="hasPermission === undefined">
 
<h2>Waiting for permissions.</h2>
 
<blockquote>
If your device does not has cameras, no permissions will be asked.
</blockquote>
 
</ng-container>
 
<ng-container *ngIf="hasPermission === false">
 
<h2>You denied the camera permission, we can't scan anything without it. 😪</h2>
 
</ng-container>
 
<ng-container *ngIf="hasDevices === undefined">
 
<h2>Couldn't check for devices.</h2>
 
<blockquote>
This may be caused by some security error.
</blockquote>
 
</ng-container>
 
<ng-container *ngIf="hasDevices === false">
 
<h2>No devices were found.</h2>
 
<blockquote>
I believe your device has no media devices attached to.
</blockquote>
 
</ng-container>
 
<footer>
<table class="table-scanner-state">
<thead>
<tr>
<th>Status</th>
<th>Property</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ stateToEmoji(hasDevices) }}</td>
<td>Devices</td>
</tr>
<tr>
<td>{{ stateToEmoji(hasPermission) }}</td>
<td>Permissions</td>
</tr>
</tbody>
</table>
<p class="ng-version">Angular version: {{ ngVersion }}</p>
</footer>

 

 

As you can see we have the simple dropdown where we are showing all the camera devices where we can scan the qr and bar code and then we are displaying the result in the section of the qrcode

 

 

 

 

 

And now we need to go to app.component.ts file and copy paste the following code

 

 

app.component.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { Component, VERSION, OnInit, ViewChild } from '@angular/core';
 
import { ZXingScannerComponent } from '@zxing/ngx-scanner';
 
import { Result } from '@zxing/library';
 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 
  ngVersion = VERSION.full;
 
  @ViewChild('scanner')
  scanner: ZXingScannerComponent;
 
  hasDevices: boolean;
  hasPermission: boolean;
  qrResultString: string;
  qrResult: Result;
 
  availableDevices: MediaDeviceInfo[];
  currentDevice: MediaDeviceInfo;
 
  ngOnInit(): void {
 
    this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
      this.hasDevices = true;
      this.availableDevices = devices;
    });
 
    this.scanner.camerasNotFound.subscribe(() => this.hasDevices = false);
    this.scanner.scanComplete.subscribe((result: Result) => this.qrResult = result);
    this.scanner.permissionResponse.subscribe((perm: boolean) => this.hasPermission = perm);
  }
 
  displayCameras(cameras: MediaDeviceInfo[]) {
    console.debug('Devices: ', cameras);
    this.availableDevices = cameras;
  }
 
  handleQrCodeResult(resultString: string) {
    console.debug('Result: ', resultString);
    this.qrResultString = resultString;
  }
 
  onDeviceSelectChange(selectedValue: string) {
    console.debug('Selection changed: ', selectedValue);
    this.currentDevice = this.scanner.getDeviceById(selectedValue);
  }
 
  stateToEmoji(state: boolean): string {
 
    const states = {
      // not checked
      undefined: '❔',
      // failed to check
      null: '⭕',
      // success
      true: '✔',
      // can't touch that
      false: '❌'
    };
 
    return states['' + state];
  }
}

 

 

As you can see we are importing the ngx-scanner library at the top and then we are scanning the qr and bar code using the webcam and then we will be displaying the result.

 

 

 

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme