【QuaggaJS】Javascriptでバーコードの読み取りを実装できるライブラリ

公開日 2021年10月14日(木)

環境

windows10
node v14.17.4
npm 6.14.14
VsCode
gitbash 2.32.0.1

動作イメージ

※ブラウザのカメラを許可する必要があります

PCのカメラからバーコードを読み取るための領域が表示され、読み取ることができます。

設定手順

ライブラリを導入する

インストール

npm install quagga

CDN読み込み

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

コードを記述する

ポイント

#interactive.viewportとなっている場所でカメラの映像が表示される
Quagga.initで初期化し、バーコードを検知したら、Quagga.onDetectedの処理が走る

<body>
  <div id="interactive" class="viewport"></div>

  <script src="./js/quaggaJS/dist/quagga.js"></script>
  <script>
    Quagga.init({
      inputStream: { type : 'LiveStream' },
        decoder: {
          readers: [{
            format: 'ean_reader',
            config: {}
          }]
        }
      }, (err) => {
        if(!err) {
          Quagga.start();
        }
      });

    Quagga.onDetected((result) => {
      var code = result.codeResult.code;
      // ここでコードを受け取って、何かしらの処理(例えば、楽天市場APIを使用して商品検索等)
    });
  </script>
</body>

デコーダー一覧

※詳細はこちら

https://serratus.github.io/quaggaJS/

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

まとめ

いかがでしたでしょうか。本記事では、Javascriptでバーコードの読み取りを実装できるライブラリであるQuaggaJSの利用手順について紹介しています。バーコードを利用したアプリケーションなどを作りたいという方はぜひ参考にしてみてください。