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

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

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

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

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

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

<small>Result</small>

<strong>{{ qrResultString }}</strong>

</section>

</div>

<ng-container *ngIf="hasPermission === undefined">

<h2>Waiting for permissions.</h2>

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>

This may be caused by some security error.

</blockquote>

</ng-container>

<ng-container *ngIf="hasDevices === false">

<h2>No devices were found.</h2>

I believe your device has no media devices attached to.

</blockquote>

</ng-container>

<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

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];
  }
}

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.