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