ngx-scanner-qrcode-single

ngx-scanner-qrcode-single

This library is built to provide a solution scanner QR code.
This library takes in raw images and will locate, extract and parse any QR code found within.
This demo Github, Stackblitz.

Installation

Install ngx-scanner-qrcode-single from npm:

npm install ngx-scanner-qrcode-single@<version> --save

Add wanted package to NgModule imports:

import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode-single';
@NgModule({
    imports: [
        NgxScannerQrcodeModule
    ]
})

In the Component:

<!-- For camera -->
<ngx-scanner-qrcode-single #action="scanner"></ngx-scanner-qrcode-single>

<!-- data  -->
<span>{{ action.data.value | json }}</span><!-- value -->
<span>{{ action.data | async | json }}</span><!-- async -->

<!-- Loading -->
<p *ngIf="action.isLoading">⌛ Loading...</p>

<!-- start -->
<button (click)="action.isStart ? action.stop() : action.start()">{{action.isStart ? 'Stop' : 'Start'}}</button>

Image src

<!-- For image src -->
<ngx-scanner-qrcode-single #action="scanner" [src]="'https://domain.com/test.png'"></ngx-scanner-qrcode-single>

<span>{{ action.data.value | json }}</span><!-- value -->
<span>{{ action.data | async | json }}</span><!-- async -->

Select files

<!-- For select files -->
<input #file type="file" (change)="onSelects(file.files)" [multiple]="'multiple'" [accept]="'.jpg, .png, .gif, .jpeg'"/>

<div *ngFor="let item of qrCodeResult">
  <ngx-scanner-qrcode-single #actionFile="scanner" [src]="item.url" [config]="config"></ngx-scanner-qrcode-single>
  <p>{{ actionFile.data.value | json }}</p><!-- value -->
  <p>{{ actionFile.data | async | json }}</p><!-- async -->
</div>

import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode-single';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];

  public config: ScannerQRCodeConfig = {
    constraints: { 
      video: {
        width: window.innerWidth
      }
    } 
  };

  constructor(private qrcode: NgxScannerQrcodeService) { }

  public onSelects(files: any) {
    this.qrcode.loadFiles(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {
      this.qrCodeResult = res;
    });
  }
}

Select files to Scan

<!-- For select files -->
<input #file type="file" (change)="onSelects(file.files)" [multiple]="'multiple'" [accept]="'.jpg, .png, .gif, .jpeg'"/>

<div *ngFor="let item of qrCodeResult">
  <img [src]="item.url | safe: 'url'" [alt]="item.name" style="max-width: 100%"><!-- Need bypassSecurityTrustUrl -->
  <p>{{ item.data | json }}</p>
</div>

import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode-single';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];

  public config: ScannerQRCodeConfig = {
    constraints: { 
      video: {
        width: window.innerWidth
      }
    } 
  };

  constructor(private qrcode: NgxScannerQrcodeService) { }

  public onSelects(files: any) {
    this.qrcode.loadFilesToScan(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {
      this.qrCodeResult = res;
    });
  }
}

API Documentation

Input

Field	Description	Type	Default
[src]	image url	string	-
[fps]	fps/ms	number	30
[vibrate]	vibrate for mobile	number	300
[isBeep]	beep	boolean	true
[constraints]	setting video	MediaStreamConstraints	{audio:false,video:true}
[canvasStyles]	setting canvas	CanvasRenderingContext2D	{font:'15px serif',lineWidth:1,strokeStyle:'green',fillStyle:'#55f02880'}
[config]	config	ScannerQRCodeConfig	{src:..,fps..,vibrate..,isBeep:..,config:..,constraints:..,canvasStyles:..}

Ouput

Field	Description	Type	Default
(event)	data response	BehaviorSubject	null

Component exports

Field	Description	Type	Default
isStart	status	boolean	false
isLoading	status	boolean	false
isTorch	torch	boolean	false
isPause	status	boolean	-
isReady	status wasm	AsyncSubject	-
data	data response	BehaviorSubject	null
devices	data devices	BehaviorSubject<ScannerQRCodeDevice[]>	[]
deviceIndexActive	device index	number	0
---	---	---	---
(start)	start camera	AsyncSubject	-
(stop)	stop camera	AsyncSubject	-
(play)	play video	AsyncSubject	-
(pause)	pause video	AsyncSubject	-
(torcher)	toggle on/off flashlight	AsyncSubject	-
(applyConstraints)	set media constraints	AsyncSubject	-
(getConstraints)	get media constraints	AsyncSubject	-
(playDevice)	play deviceId	AsyncSubject	-
(loadImage)	load image from src	AsyncSubject	-
(download)	download image	AsyncSubject<ScannerQRCodeSelectedFiles[]>	-

Service

Field	Description	Type	Default
(loadFiles)	Convert files	AsyncSubject<ScannerQRCodeSelectedFiles[]>	[]
(loadFilesToScan)	Scanner files	AsyncSubject<ScannerQRCodeSelectedFiles[]>	[]

Models

ScannerQRCodeConfig

interface ScannerQRCodeConfig {
  src?: string;
  fps?: number;
  vibrate?: number /** support mobile */;
  isBeep?: boolean;
  constraints?: MediaStreamConstraints;
  canvasStyles?: CanvasRenderingContext2D;
}

ScannerQRCodeDevice

interface ScannerQRCodeDevice {
  kind: string;
  label: string;
  groupId: string;
  deviceId: string;
}

ScannerQRCodeResult

class ScannerQRCodeResult {
  binaryData: number[];
  data: string;
  chunks: Chunks;
  version: number;
  location: {
    topRightCorner: Point;
    topLeftCorner: Point;
    bottomRightCorner: Point;
    bottomLeftCorner: Point;
    topRightFinderPattern: Point;
    topLeftFinderPattern: Point;
    bottomLeftFinderPattern: Point;
    bottomRightAlignmentPattern?: Point | undefined;
  };
}

interface Point {
  x: number;
  y: number;
}

declare type Chunks = Array<Chunk | ByteChunk | ECIChunk>;

ScannerQRCodeSelectedFiles

interface ScannerQRCodeSelectedFiles {
  url: string;
  name: string;
  file: File;
  data?: ScannerQRCodeResult;
  canvas?: HTMLCanvasElement;
}

Support versions

Support versions
Angular 6	1.0.0

Author Information

Author Information
Author	DaiDH
Phone	[phone]
Country	Vietnam

If you want donate for me!

Bitcoin

MIT License. Copyright (C) 2023.