Ionic+AnglerJSでブラウザでQRやバーコードのReader

Ionicでウェブアプリ的にQRなどのコードリーダーの実装に関するメモ

※開発環境がSSL必須になるので下記の記事でIonicのSSLするとちょうど良いです
https://qiita.com/mmt/items/78c2d76f3c648fc757a2

開発環境

ブラウザはChromeのみ動作確認してます。

Ionicは新しいプロジェクト構築したあとの状態を想定しています。
「home」のページに機能を追加する想定です。
メモのため実際にIonicのページを最初から構築していないため、動作不良があるかもしれません。
ご了承ください。。

package.json
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"@zxing/ngx-scanner": "^2.0.1",

ionic -v
5.2.5

手順

ngモジュールのインストールと初期設定
動作サンプル用HTMLとtsの実装
Ionic実行

1. ngモジュールのインストールと初期設定

モジュールインストール

//コンソール
npm i @zxing/ngx-scanner@latest --save

初期設定

利用したいPageモジュールに利用を宣言
src/app/my/my.module.ts

import の末尾に下記を追加

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

@NgModuleのimportsの最後にZXingScannerModuleを追加

  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ZXingScannerModule
  ],

追加した後のsrc/app/home/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { ZXingScannerModule } from '@zxing/ngx-scanner';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ZXingScannerModule
  ],
  declarations: [
    HomePage
  ]
})
export class HomePage{}

2. 動作サンプルの実装

home.page.html にzxingタグ(カメラ読み込み)を追加

<zxing-scanner 
[formats]="allowedFormats" 
(camerasFound)="camerasFoundHandler($event)" 
(scanSuccess)="scanSuccessHandler($event)"
></zxing-scanner>

設定できるプロパティはコチラにまとめてあるみたいです
https://github.com/zxing-js/ngx-scanner/wiki/Advanced-Usage

home.page.ts にフォーマット指定と関数取得を追加

import の末尾に下記を追加

import { BarcodeFormat } from '@zxing/library';

export class FieldPage implements OnInit {にallowedFormatsを追加
HTMLに記載した[formats]に渡す情報、読み込む形式を指定できる
バーコードやQR検知するなど

  allowedFormats = [
    BarcodeFormat.QR_CODE,
    BarcodeFormat.EAN_13,
    BarcodeFormat.CODE_128,
    BarcodeFormat.DATA_MATRIX
  ];

export class FieldPage implements OnInit {にcamerasFoundHandler()とscanSuccessHandler()を追加
HTMLに記載した(camerasFound)(scanSuccess)の結果を受け取る
取得できるカメラ一覧と読み込み結果がある場合の受け取り

  camerasFoundHandler(evt: any) {
    console.log('camerasFoundHandler');
    console.log(evt);
  }
  scanSuccessHandler(evt: any) {
    console.log('scanSuccessHandler');
    console.log(evt);
  }

追加した後のsrc/app/home/home.page.ts

import { Component } from '@angular/core';
import { BarcodeFormat } from '@zxing/library';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  allowedFormats = [
    BarcodeFormat.QR_CODE,
    BarcodeFormat.EAN_13,
    BarcodeFormat.CODE_128,
    BarcodeFormat.DATA_MATRIX
  ];
  constructor() {}
  camerasFoundHandler(evt: any) {
    console.log('camerasFoundHandler');
    console.log(evt);
  }
  scanSuccessHandler(evt: any) {
    console.log('scanSuccessHandler');
    console.log(evt);
  }
}

3. Ionic実行

SSLの状態で実行が必要なので下記コマンド

ionic serve --ssl --key-path=./.ionic/ssl/key.pem --cert-path=./.ionic/ssl/cert.pem

保護されていないサイトだよって言われるけど、警告を無視して表示してます。。

バーコード的なや色々

初めて見る形式もあったので余談的にGoogleの検索結果をリスト

参考サイト

@zxing/ngx-scanner
https://github.com/zxing-js/ngx-scanner
@zxing/ngx-scanner GettingStart
https://github.com/zxing-js/ngx-scanner/wiki/Getting-Started
ZXing TypeScript Examples
https://zxing-js.github.io/library/