Masayan tech blog.

  1. ブログ記事一覧>
  2. 【QuaggaJS】Javascriptでバーコードの読み取りを実装できるライブラリ

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

公開日

環境

  • windows10
  • node v14.17.4
  • npm 6.14.14
  • VsCode
  • gitbash 2.32.0.1

動作イメージ

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

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

設定手順

ライブラリを導入する

インストール

npm install quagga

or

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の利用手順について紹介しています。バーコードを利用したアプリケーションなどを作りたいという方はぜひ参考にしてみてください。