Skip to content

Latest commit

 

History

History
315 lines (252 loc) · 10.5 KB

README.md

File metadata and controls

315 lines (252 loc) · 10.5 KB

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.

Logo

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 +84845882882
Country Vietnam

If you want donate for me!

Bitcoin

Vietnam

MIT License. Copyright (C) 2023.