QRコードを読む

Tweet

angularでQRコードを読み込むサンプルについて記す。

使うライブラリはzxingです。QRを読み取るだけならかなり簡単です。

インストール

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

サンプルコード

まずは、app.module.tsで★の部分を追記します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';
import { MessageComponent } from './message/message.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { QrcodeComponent } from './qrcode/qrcode.component';
import { ZXingScannerModule } from '@zxing/ngx-scanner';//★

const routes:Routes = [
  {path:'hello', component:HelloComponent},
  {path:'qrcode', component:QrcodeComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
    MessageComponent,
    QrcodeComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes),
    MatProgressSpinnerModule,
    BrowserAnimationsModule,
    ZXingScannerModule//★
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

適当にコンポーネントを作成します。ここではQrCodeComponentを作成してみます。

[qrcode.component.html]

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

これだけでカメラが起動します。読み取ったQRコードを受け取るにはコンポーネントにscanSuccessHandler関数を追加します。

[qrcode.compoent.ts]

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

@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.css']
})
export class QrcodeComponent implements OnInit {

  /**https://github.com/zxing-js/ngx-scanner/wiki/Advanced-Usage */
  constructor() { }

  ngOnInit(): void {
  }

  scanSuccessHandler(event:string) {
    console.log(event);
  }
}

これで、QRコードを読むとscanSuccessHandlerが呼ばれ、eventに読み取ったQRコードが渡されます。

詳細はこちら。
https://github.com/zxing-js/ngx-scanner/wiki/Advanced-Usage