angularJS 調用攝像頭掃描二維碼，輸出結果

背景：在一個angularJS的項目中，需要添加點擊某個按鈕之后調用手機的照相機，掃描二維碼輸出所掃描二維碼的結果，利用這個結果來處理其他的事情。

效果如下

 

掃描玩二維碼把結果alert出來如下圖

 

掃描二維碼

 

1.在本地需要安裝下面的包文件

在現有的angularJS項目中，執行下面的命令

npm install
npm i @zxing/browser@latest --save
npm i @zxing/library@latest --save
npm i @zxing/ngx-scanner@latest --save

2.在module 文件中引入下面的代碼

// some.module.ts
import { NgModule } from '@angular/core';

// your very important imports here

// the scanner!
import { ZXingScannerModule } from '@zxing/ngx-scanner';

// your other nice stuff

@NgModule({
  imports: [ 
    // ...
    // gets the scanner ready!
    ZXingScannerModule,
    // ...
  ]
})
export class SomeModule {}

3.html上面添加下面的代碼

【scannerEnabled】指的是是否啟動照相機，true的場合啟動，false的場合不啟動

 

<zxing-scanner [enable]="scannerEnabled" (scanSuccess)="onCodeResult($event)" [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']">
            </zxing-scanner>

 

備注：zxing標簽的所有屬性，根據自己的需求來定

中文的

 

英文

  

<zxing-scanner [enable]="scannerEnabled" [(device)]="desiredDevice" [torch]="torch" (torchCompatible)="onTorchCompatible($event)" (camerasFound)="camerasFoundHandler($event)" ( cameraNotFound)="camerasNotFoundHandler($event)" (scanSuccess)="scanSuccessHandler($event)" (scanError)="scanErrorHandler($event)" (scanFailure)="scanFailureHandler($event)" (scanComplete)="scanCompleteHandler( $事件）”

 

4.在component.ts文件中寫入下面的代碼

    onCodeResult(resultString: string) {
        this.qrResultString = resultString;
        alert(resultString);
    }

備注：根據自己的需求來定

 clearResult(): void {
    this.qrResultString = null;
  }

  onCamerasFound(devices: MediaDeviceInfo[]): void {
    this.availableDevices = devices;
    this.hasDevices = Boolean(devices && devices.length);
  }

  onCodeResult(resultString: string) {
    this.qrResultString = resultString;
  }

  onDeviceSelectChange(selected: string) {
    const selectedStr = selected || '';
    if (this.deviceSelected === selectedStr) { return; }
    this.deviceSelected = selectedStr;
    const device = this.availableDevices.find(x => x.deviceId === selected);
    this.deviceCurrent = device || undefined;
  }

  onDeviceChange(device: MediaDeviceInfo) {
    const selectedStr = device?.deviceId || '';
    if (this.deviceSelected === selectedStr) { return; }
    this.deviceSelected = selectedStr;
    this.deviceCurrent = device || undefined;
  }

  openFormatsDialog() {
    const data = {
      formatsEnabled: this.formatsEnabled,
    };

    this._dialog
      .open(FormatsDialogComponent, { data })
      .afterClosed()
      .subscribe(x => {
        if (x) {
          this.formatsEnabled = x;
        }
      });
  }

  onHasPermission(has: boolean) {
    this.hasPermission = has;
  }

  openInfoDialog() {
    const data = {
      hasDevices: this.hasDevices,
      hasPermission: this.hasPermission,
    };

    this._dialog.open(AppInfoDialogComponent, { data });
  }

  onTorchCompatible(isCompatible: boolean): void {
    this.torchAvailable$.next(isCompatible || false);
  }

  toggleTorch(): void {
    this.torchEnabled = !this.torchEnabled;
  }

  toggleTryHarder(): void {
    this.tryHarder = !this.tryHarder;
  }

 

之后運行angularJS項目，測試是沒問題的。

 

相關資料

https://github.com/zxing-js/ngx-scanner/wiki/Getting-Started

https://www.npmjs.com/package/@zxing/ngx-scanner

https://www.npmjs.com/package/angular-weblineindia-qrcode-scanner

 

 

演示地址

https://zxing-ngx-scanner.stackblitz.io/