npm i ngx-scanner-qrcode

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';
import { SafePipe } from './safe.pipe';

@NgModule({
  imports:      [ 
    FormsModule,
    BrowserModule, 
    NgxScannerQrcodeModule 
  ],
  declarations: [ AppComponent, SafePipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';

import { SafePipe } from './safe.pipe';

@NgModule({

imports: [

FormsModule,

BrowserModule,

NgxScannerQrcodeModule

declarations: [ AppComponent, SafePipe ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.ts

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import {
  ScannerQRCodeConfig,
  ScannerQRCodeResult,
  NgxScannerQrcodeService,
  NgxScannerQrcodeComponent,
  ScannerQRCodeSelectedFiles,
  ScannerQRCodeDevice,
} from 'ngx-scanner-qrcode';
import { delay } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {

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

  public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];
  public qrCodeResult2: ScannerQRCodeSelectedFiles[] = [];

  @ViewChild('action') action: NgxScannerQrcodeComponent;

  constructor(private qrcode: NgxScannerQrcodeService) { }

  ngAfterViewInit(): void {
    this.action.isReady.pipe(delay(1000)).subscribe(() => {
      this.handle(this.action, 'start');
    });
  }
  
  public onEvent(e: ScannerQRCodeResult[], action?: any): void {
    e?.length && action && action.pause(); // Detect once and pause scan!

    let binArrayToString = function(binArray) {
      let str = "";
      for (let i = 0; i < binArray.length; i++) {        
          str += String.fromCharCode(parseInt(binArray[i]));
      }
      return str;
  }
    console.log('utf8ArrayToString',binArrayToString(e[0].data));
  }

  public handle(action: any, fn: string): void {
    const playDeviceFacingBack = (devices: ScannerQRCodeDevice[]) => {
      // front camera or back camera check here!
      const device = devices.find(f => (/back|rear|environment/gi.test(f.label))); // Default Back Facing Camera
      action.playDevice(device ? device.deviceId : devices[0].deviceId);
    }

    if (fn === 'start') {
      action[fn](playDeviceFacingBack).subscribe((r: any) => console.log(fn, r), alert);
    } else {
      action[fn]().subscribe((r: any) => console.log(fn, r), alert);
    }
  }

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

  public onSelects2(files: any): void {
    this.qrcode.loadFilesToScan(files, this.config).subscribe((res: ScannerQRCodeSelectedFiles[]) => {
      console.log(res);
      this.qrCodeResult2 = res;
    });
  }
}

import { AfterViewInit, Component, ViewChild } from '@angular/core';

import {

ScannerQRCodeConfig,

ScannerQRCodeResult,

NgxScannerQrcodeService,

NgxScannerQrcodeComponent,

ScannerQRCodeSelectedFiles,

ScannerQRCodeDevice,

} from 'ngx-scanner-qrcode';

import { delay } from 'rxjs';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent implements AfterViewInit {

public config: ScannerQRCodeConfig = {

constraints: {

video: {

width: window.innerWidth

}

};

public qrCodeResult: ScannerQRCodeSelectedFiles[] = [];

public qrCodeResult2: ScannerQRCodeSelectedFiles[] = [];

@ViewChild('action') action: NgxScannerQrcodeComponent;

constructor(private qrcode: NgxScannerQrcodeService) { }

ngAfterViewInit(): void {

this.action.isReady.pipe(delay(1000)).subscribe(() => {

this.handle(this.action, 'start');

});

}

public onEvent(e: ScannerQRCodeResult[], action?: any): void {

e?.length && action && action.pause(); // Detect once and pause scan!

let binArrayToString = function(binArray) {

let str = "";

for (let i = 0; i < binArray.length; i++) {

str += String.fromCharCode(parseInt(binArray[i]));

}

return str;

}

console.log('utf8ArrayToString',binArrayToString(e[0].data));

}

public handle(action: any, fn: string): void {

const playDeviceFacingBack = (devices: ScannerQRCodeDevice[]) => {

// front camera or back camera check here!

const device = devices.find(f => (/back|rear|environment/gi.test(f.label))); // Default Back Facing Camera

action.playDevice(device ? device.deviceId : devices[0].deviceId);

}

if (fn === 'start') {

action[fn](playDeviceFacingBack).subscribe((r: any) => console.log(fn, r), alert);

} else {

action[fn]().subscribe((r: any) => console.log(fn, r), alert);

}

public onSelects(files: any): void {

this.qrcode.loadFiles(files).subscribe((res: ScannerQRCodeSelectedFiles[]) => {

this.qrCodeResult = res;

});

}

public onSelects2(files: any): void {

this.qrcode.loadFilesToScan(files, this.config).subscribe((res: ScannerQRCodeSelectedFiles[]) => {

console.log(res);

this.qrCodeResult2 = res;

});

}

app.component.html

<div class="container">
  <h1> ngx-scanner-qrcode </h1>

  <!-- devices -->
  <div class="row">
    <div class="col-xs-12 col-md-6 col-lg-4 col-xl-3 my-1">
      <select #select1 (change)="action.playDevice(select1.value)" class="form-select form-select-sm">
        <option [value]="null" selected>Select device</option>
        <option *ngFor="let c of action.devices.value; let i = index" [value]="c.deviceId" [selected]="i == action.deviceIndexActive">{{c.label}}</option>
      </select>
    </div>

    <div class="col-xs-12 col-md-6 col-lg-4 col-xl-3 my-1">
      <select #select2 (change)="action.decode = select2.value" class="form-select form-select-sm">
        <option value="utf-8" [selected]="action.decode == 'utf-8'">UTF-8</option>
        <option value="iso-8859-15" [selected]="action.decode == 'iso-8859-15'">ISO-8859-15</option>
        <option value="windows-1252" [selected]="action.decode == 'windows-1252'">Windows-1252</option>
        <option value="macintosh" [selected]="action.decode == 'macintosh'">Macintosh</option>
      </select>
    </div>
  </div>

  <!-- ngx-scanner-qrcode -->
  <ngx-scanner-qrcode #action="scanner" [config]="config" (event)="onEvent($event, action)"></ngx-scanner-qrcode>

  <!-- data  -->
  <!-- <p class="data">{{ (action.data | async | json) }}</p> -->

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

  <!-- start/stop -->
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="action.isLoading" (click)="handle(action, action.isStart ? 'stop' : 'start')">
    <img [src]="action.isStart ? 'https://id1945.github.io/images/svg/camera-off.svg' : 'https://id1945.github.io/images/svg/camera-on.svg'" width="30px"/>
  </button>

  <!-- play/pause -->
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="!action.isStart" (click)="handle(action, action.isPause ? 'play' : 'pause')">
    <img [src]="action.isPause ? 'https://id1945.github.io/images/svg/play.svg': 'https://id1945.github.io/images/svg/pause.svg'" width="30px"/>
  </button>

  <!-- isTorch -->
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="!action.isStart" (click)="action.isTorch = !action.isTorch; handle(action, 'torcher')">
    <img [src]="action.isTorch ? 'https://id1945.github.io/images/svg/flash-off.svg' : 'https://id1945.github.io/images/svg/flash-on.svg'" width="30px"/>
  </button>

  <!-- download -->
  <button class="btn" [class.btn-info]="!action.isStart" [class.btn-warning]="action.isStart" [disabled]="!action.isStart" (click)="handle(action, 'download')">
    <img src="https://id1945.github.io/images/svg/capture.svg" width="30px"/>
  </button>
  <br>

  <!-- for select files -->
  <input #file type="file" (change)="onSelects(file.files)" [multiple]="'multiple'" [accept]="'.jpg, .png, .gif, .jpeg'" class="btn btn-success my-2"/>
  <br>
  <input #file2 type="file" (change)="onSelects2(file2.files)" [multiple]="'multiple'" [accept]="'.jpg, .png, .gif, .jpeg'" class="btn btn-success my-2"/>
  <br>

  <div *ngFor="let item of qrCodeResult">
    <ngx-scanner-qrcode #actionFile="scanner" [src]="item.url" [config]="config" (event)="onEvent($event)"></ngx-scanner-qrcode>
    <!-- <p class="data">{{ actionFile.data | async }}</p> -->
  </div>

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

  <ngx-scanner-qrcode
    #actionFile="scanner"
    (event)="onEvent($event)"
    [src]="'https://raw.githubusercontent.com/id1945/ngx-scanner-qrcode/master/supported-barcode-types.png'"
    [config]="config"> 
  </ngx-scanner-qrcode>
  <!-- <p class="data">{{ (actionFile.data | async | json) }}</p> -->

  <!-- license -->
  <p class="center"><a href="https://github.com/id1945/ngx-scanner-face/blob/master/LICENSE">LGPL-2.1+ License</a></p>

  <!-- copyright -->
  <p class="center">Author: DaiDH</p>
  <p class="center">Copyright (C) 1991, 1999 Free Software Foundation, Inc.</p>
</div>

<h1> ngx-scanner-qrcode </h1>

<option [value]="null" selected>Select device</option>

<option *ngFor="let c of action.devices.value; let i = index" [value]="c.deviceId" [selected]="i == action.deviceIndexActive">{{c.label}}</option>

</select>

</div>

<option value="windows-1252" [selected]="action.decode == 'windows-1252'">Windows-1252</option>

<option value="macintosh" [selected]="action.decode == 'macintosh'">Macintosh</option>

</select>

</div>

<ngx-scanner-qrcode #action="scanner" [config]="config" (event)="onEvent($event, action)"></ngx-scanner-qrcode>

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

</button>

</button>

</button>

</button>

<br>

<br>

<br>

<ngx-scanner-qrcode #actionFile="scanner" [src]="item.url" [config]="config" (event)="onEvent($event)"></ngx-scanner-qrcode>

</div>

</div>

<ngx-scanner-qrcode

#actionFile="scanner"

(event)="onEvent($event)"

[src]="'https://raw.githubusercontent.com/id1945/ngx-scanner-qrcode/master/supported-barcode-types.png'"

[config]="config">

</ngx-scanner-qrcode>

<p class="center"><a href="https://github.com/id1945/ngx-scanner-face/blob/master/LICENSE">LGPL-2.1+ License</a></p>

<p class="center">Author: DaiDH</p>

</div>

Build a Angular QRCode Reader & Scanner From Webcam & File Using ngx-scanner-qrcode Library in TS

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives