QuaggaJSを使ったバーコードリーダ実装

ブラウザ上で動作するバーコードリーダを実装します。

今回つくるもの

See the Pen
quaggajs-with-checkdigit by eta (@0eta0)
on CodePen.

Webカメラの使用を許可後に、本などのISBNコードを映すとアラートでISBNコードが出力されます。
また上のサンプルでは、チェックディジットで一応エラー検出をしています（それでも100%正確な値が出るわけではないです）

詳細

ライブラリインストール

QuaggaJSを利用します。
参考 QuaggaJSserratus.github.io

npmもしくはscriptタグで読み込みどっちでも大丈夫です。

npm

npm install quagga

HTML

<script type="text/javascript" src="https://serratus.github.io/quaggaJS/examples/js/quagga.min.js"></script>

初期化部分

バーコードリーダ自体の設定ができます。
基本的にISBNを読み取る場合は、このコードで動くと思います。

QuaggaJS

Quagga.init({
  inputStream: {
    name: 'Live',
    type: 'LiveStream',
    target: document.querySelector('#interactive'), //埋め込んだdivのID
    constraints: {
      facingMode: 'environment',
    },
  },
  locator: {
    patchSize: 'medium',
    halfSample: true,
  },
  numOfWorkers: 2,
  decoder: {
    readers: ['ean_reader'] //ISBNは基本的にこれ（他にも種類あり）
  },
  locate: true,
}, (err) => {
  if(!err) {
    Quagga.start();
  }
})

decoderの種類については以下のとおりです。

code_128_reader (default)
ean_reader
ean_8_reader
code_39_reader
code_39_vin_reader
codabar_reader
upc_reader
upc_e_reader
i2of5_reader
2of5_reader
code_93_reader

他にも、バーコードの読み取り範囲指定やカメラで移されたバーコードに赤線を引いたり、枠で囲ったりする機能もあります。
詳しくはこちらをどうぞ。

参考 QuaggaJSserratus.github.io

コールバック

ISBNコードが検出された場合は、この関数が呼ばれます

QuaggaJS

Quagga.onDetected(success => {
  const code = success.codeResult.code;
  if(calc(code)) alert(code);
})

チェックディジット

ISBN13桁コードのチェックデジットです。

CheckDigit

const calc = isbn => {
  const arrIsbn = isbn
    .toString()
    .split("")
    .map(num => parseInt(num));
  let remainder = 0;
  const checkDigit = arrIsbn.pop();

  arrIsbn.forEach((num, index) => {
    remainder += num * (index % 2 === 0 ? 1 : 3);
  });
  remainder %= 10;
  remainder = remainder === 0 ? 0 : 10 - remainder;

  return checkDigit === remainder;
}

詳しい内容はこちらをどうぞ
参考 ISBNja.wikipedia.org