AngularでQuaggaJSを使用してバーコードスキャンする

2019年12月31日 2020年8月31日

Contents

1 概要
2 前提
3 実装

概要

AngularでQuaggaJSを使ってカメラ画像からバーコードをスキャンする方法の紹介。

前提

Angular 8.2.14
npmでQuaggaJSをインストール

実装

レイアウト

カメラ動画を表示するためのdivタグを用意します。

  <div id="camera-area">
  </div>

1 2	<div id="camera-area"> </div>

コンポーネント

Quaggaを呼び出すための処理を実装します。
今回はstartCaptureといったメソッドを用意し、ボタン押下等で撮影を開始する場合を想定して記載します。

// Quaggaのインポート
import Quagga from 'quagga';

export class  ScanComponent {

public startCapture() {
    // Quaggaの設定項目
    const config = {
      // カメラの映像の設定
      inputStream: {
        type: 'LiveStream',
        // カメラ映像を表示するHTML要素の設定
        target: '#camera-area',
        // バックカメラの利用を設定. (フロントカメラは"user")
        constraints: {
          height: 300,
          facingMode: 'environment'
        },
        size: 900,
        // 検出範囲の指定:
        area: { top: '0%', right: '0%', left: '0%', bottom: '30%' },
        singleChannel: false
      },
      // 解析するワーカ数の設定
      numOfWorkers: navigator.hardwareConcurrency || 4,
      // バーコードの種類を設定
      decoder: { readers: ['ean_reader'] },
      locate: false
    };

    Quagga.onDetected(result => {
      // 検出時の処理
      this.onDetected(result);
    });
    Quagga.onProcessed(result => {
      // 検出中の処理
      this.onProcessed(result);
    });
    // 初期化処理
    Quagga.init(config, error => {
      if (!!error) {
        console.error(`Error: ${error}`, error);
        return;
      }
      // エラーがない場合は、読み取りを開始
      Quagga.start();
    });
  }
}

private onDetected(result): void {
　const barcode = result.codeResult.code;
  if(barcode) {
    // バーコード検出時の処理を実装

    // 撮影を止める
    this.stopCapture();
  }
}

private onProcessed(result): void {
}

private stopCapture(): void {
    Quagga.stop();
}

// Quaggaのインポート

import Quagga from 'quagga';

export class ScanComponent {

public startCapture() {

// Quaggaの設定項目

const config = {

// カメラの映像の設定

inputStream: {

type: 'LiveStream',

// カメラ映像を表示するHTML要素の設定

target: '#camera-area',

// バックカメラの利用を設定. (フロントカメラは"user")

constraints: {

height: 300,

facingMode: 'environment'

size: 900,

// 検出範囲の指定:

area: { top: '0%', right: '0%', left: '0%', bottom: '30%' },

singleChannel: false

// 解析するワーカ数の設定

numOfWorkers: navigator.hardwareConcurrency || 4,

// バーコードの種類を設定

decoder: { readers: ['ean_reader'] },

locate: false

};

Quagga.onDetected(result => {

// 検出時の処理

this.onDetected(result);

});

Quagga.onProcessed(result => {

// 検出中の処理

this.onProcessed(result);

});

// 初期化処理

Quagga.init(config, error => {

if (!!error) {

console.error(`Error: ${error}`, error);

return;

}

// エラーがない場合は、読み取りを開始

Quagga.start();

});

}

private onDetected(result): void {

　const barcode = result.codeResult.code;

if(barcode) {

// バーコード検出時の処理を実装

// 撮影を止める

this.stopCapture();

}

private onProcessed(result): void {

}

private stopCapture(): void {

Quagga.stop();

}

起動時の設定を作成する

画面の解像度や検出するバーコードの種類などのQuaggaのパラメータを指定する。
レイアウトで指定したdivタグの指定も忘れずに記載する。
パラメータ自体は大量にあるので、公式サイトなどを参考に調整する。

イベント処理の登録

撮影を開始した際に呼び出されるイベントに処理を登録する。
onDetectedがバーコードが検知された場合に呼び出される処理、onProcessedが検出中により出される処理。
onProcessedは検出中のバーコードを画面で囲みたい等のユースケースで使用できるようです。

イベント登録時の注意として、Quagga.onDetected(this.onDetected)とはせずに、サンプルのようにアロー関数を経由して処理を呼び出す事。そうしないと、this.onDetected内の処理でthisでコンポーネント内の変数にアクセス出来なくなる。

初期化処理および読み取りの開始

init関数を呼び出し、コールバック内でエラーが発生しなければ、start関数でキャプチャを開始する。