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

  • 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
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • 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