WebアプリでQRコードを読み込む

はじめに

AngularのWebアプリケーションでQRコードを読み込む機能を作ります。
作ると言っても、 @zxing/ngx-scanner を組み込むだけでとても簡単です。

パッケージの追加

Getting Started ページを参考に、Angularのバージョンに対応した ngx-scanner をインストールします。 browser と library は latest で問題ないようです。

npm install @zxing/browser@latest --save
npm install @zxing/library@latest --save
npm install @zxing/ngx-scanner@{対応したバージョン} --save

app.module.ts もしくは任意の *.module.ts に、以下のようにモジュールを追記します。

import { NgModule } from '@angular/core';
// ...
import { ZXingScannerModule } from '@zxing/ngx-scanner';

@NgModule({
  imports: [
    // ...
    ZXingScannerModule,
  ],
})

コンポーネントの作成

ここではQRコードリーダーのコンポーネントとして qr-reader を作ります。

ng generate component qr-reader

qr-reader.compoment.ts には、読み取り結果の変数 readString と 読み取り成功時のイベントハンドラを作成します。

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

@Component({
  selector: 'app-qr-reader',
  templateUrl: './qr-reader.component.html',
  styleUrls: ['./qr-reader.component.scss']
})
export class QrReaderComponent {
  readString: string = '';

  scanSuccessHandler(readStr: string) {
    this.readString = readStr;
  }
}

qr-reader.component.html には zxing-scanner と読み取り結果を配置します。

<zxing-scanner
  (scanSuccess)="scanSuccessHandler($event)">
</zxing-scanner>
<div>
  読取結果：{{readString}}
</div>

これだけです。

あとはお好きなように

カメラがついているPCやスマートフォンなどでこのコンポーネントを表示すると、カメラが起動し、QRコードをカメラに写るようにすると、QRコードが読み取られてQRコードに入っている文字列が「読取結果」に表示されます。

これだけだとごくシンプルな内容ですが、イベントハンドラに処理を書けば、QRコードの内容によっていろいろできます。

その他、カメラが無かった場合や、インカメラとアウトカメラの切り替えなど、 Advanced Usage を参考に作ることができます。