nobu blog

プログラミングやゲームの話など。

*



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

   

概要

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

前提

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

実装

レイアウト

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

コンポーネント

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

起動時の設定を作成する

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

イベント処理の登録

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

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

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

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

 - Angular, Javascript, TypeScript