ngx-scanner-qrcode
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.
Supported Barcode Types |
---|
QR Code | Code-39 | Code-93 | Code-128 |
Codabar | Databar/Expanded | EAN/GTIN-5/8/13 | ISBN-10/13 |
ISBN-13+2 | ISBN-13+5 | ITF (Interleaved 2 of 5) | UPC-A/E. |
Installation
Install ngx-scanner-qrcode
from npm
:
npm install ngx-scanner-qrcode@<version> --save
Add wanted package to NgModule imports:
import { NgxScannerQrcodeModule, LOAD_WASM } from 'ngx-scanner-qrcode';
LOAD_WASM().subscribe();
@NgModule({
imports: [
NgxScannerQrcodeModule
]
})
angular.json
{
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "**/*",
"input": "node_modules/ngx-scanner-qrcode/wasm/",
"output": "./assets/wasm/"
}
]
}
}
}
}
In the Component:
<ngx-scanner-qrcode #action="scanner"></ngx-scanner-qrcode>
<span>{{ action.data.value | json }}</span>
<span>{{ action.data | async | json }}</span>
<p *ngIf="action.isLoading">⌛ Loading...</p>
<button (click)="action.isStart ? action.stop() : action.start()">{{action.isStart ? 'Stop' : 'Start'}}</button>
Image src
<ngx-scanner-qrcode #action="scanner" [src]="'https://domain.com/test.png'"></ngx-scanner-qrcode>
<span>{{ action.data.value | json }}</span>
<span>{{ action.data | async | json }}</span>
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 #actionFile="scanner" [src]="item.url" [config]="config"></ngx-scanner-qrcode>
<p>{{ actionFile.data.value | json }}</p>
<p>{{ actionFile.data | async | json }}</p>
</div>
import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode';
@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
<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%">
<p>{{ item.data | json }}</p>
</div>
import { Component } from '@angular/core';
import { NgxScannerQrcodeService, ScannerQRCodeSelectedFiles } from 'ngx-scanner-qrcode';
@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 |
[decode] | decode value | string | utf-8 |
[isBeep] | beep | boolean | true |
[constraints] | setting video | MediaStreamConstraints | {audio:false,video:true} |
[canvasStyles] | setting canvas | CanvasRenderingContext2D[] | [{ lineWidth: 1, strokeStyle: 'green', fillStyle: '#55f02880' },{ font: '15px serif', strokeStyle: '#fff0', fillStyle: '#ff0000' }] |
[config] | config | ScannerQRCodeConfig | {src:..,fps..,vibrate..,decode:..,isBeep:..,config:..,constraints:..,canvasStyles:..} |
Ouput
Field | Description | Type | Default |
---|
(event) | data response | BehaviorSubject<ScannerQRCodeResult[]> | [] |
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<ScannerQRCodeResult[]> | [] |
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;
decode?: string;
isBeep?: boolean;
constraints?: MediaStreamConstraints;
canvasStyles?: CanvasRenderingContext2D[];
}
ScannerQRCodeDevice
interface ScannerQRCodeDevice {
kind: string;
label: string;
groupId: string;
deviceId: string;
}
ScannerQRCodeResult
class ScannerQRCodeResult {
type: ScannerQRCodeSymbolType;
typeName: string;
data: Int8Array;
points: Array<ScannerQRCodePoint>;
orientation: ScannerQRCodeOrientation;
time: number;
cacheCount: number;
quality: number;
value: string;
}
enum ScannerQRCodeSymbolType {
ScannerQRCode_NONE = 0,
ScannerQRCode_PARTIAL = 1,
ScannerQRCode_EAN2 = 2,
ScannerQRCode_EAN5 = 5,
ScannerQRCode_EAN8 = 8,
ScannerQRCode_UPCE = 9,
ScannerQRCode_ISBN10 = 10,
ScannerQRCode_UPCA = 12,
ScannerQRCode_EAN13 = 13,
ScannerQRCode_ISBN13 = 14,
ScannerQRCode_COMPOSITE = 15,
ScannerQRCode_I25 = 25,
ScannerQRCode_DATABAR = 34,
ScannerQRCode_DATABAR_EXP = 35,
ScannerQRCode_CODABAR = 38,
ScannerQRCode_CODE39 = 39,
ScannerQRCode_PDF417 = 57,
ScannerQRCode_QRCODE = 64,
ScannerQRCode_SQCODE = 80,
ScannerQRCode_CODE93 = 93,
ScannerQRCode_CODE128 = 128,
ScannerQRCode_SYMBOL = 0x00ff,
ScannerQRCode_ADDON2 = 0x0200,
ScannerQRCode_ADDON5 = 0x0500,
ScannerQRCode_ADDON = 0x0700,
}
interface ScannerQRCodePoint {
x: number;
y: number;
}
enum ScannerQRCodeOrientation {
ScannerQRCode_ORIENT_UNKNOWN = -1,
ScannerQRCode_ORIENT_UP,
ScannerQRCode_ORIENT_RIGHT,
ScannerQRCode_ORIENT_DOWN,
ScannerQRCode_ORIENT_LEFT,
}
ScannerQRCodeSelectedFiles
interface ScannerQRCodeSelectedFiles {
url: string;
name: string;
file: File;
data?: ScannerQRCodeResult[];
canvas?: HTMLCanvasElement;
}
Support versions
Support versions |
---|
Angular 6 | 1.6.6 |
Author Information
Author Information |
---|
Author | DaiDH |
Phone | +84845882882 |
Country | Vietnam |
To make this library more complete, please donate to me if you can!
LGPL-2.1+ License. Copyright (C) 1991, 1999 Free Software Foundation, Inc.