バーコードリーダー作ってみたい【JavaScript】【QuaggaJS】【Webカメラ】

自宅の物の在庫管理アプリを作りたいなーと思っていた時、簡単にスマホのカメラ等を使ってバーコードリーダーを作れるとのことなので試して見ました。

まずはバーコードリーダー部分だけ投稿してみます。

HTML
CSS
JavaScript
所感

HTML

<!DOCTYPE html>
<html>
  <head> 
    <base target="_top">
    <?!= include('css'); ?>
  </head> 
  <body>
    <p id="detected-code">-</p>
    <div id="camera-view"></div>
    <?!= include('script'); ?>
  </body>
</html>

CSS

<style>
    body, html {
      margin: 0;
      overflow: hidden;
    }
    #camera-view {
      width: 100%;
      height: auto;
    }
    .drawingBuffer {
      position: absolute;
      left: 0;
    }
</style>

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"
  integrity="sha512-bCsBoYoW6zE0aja5xcIyoCDPfT27+cGr7AOCqelttLVRGay6EKGQbR6wm6SUcUGOMGXJpj+jrIpMS6i80+kZPw=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script>
  //
  const elemCameraView = document.getElementById('camera-view');
  const elemDetectedCode = document.getElementById('detected-code');

  //
  const config ={
      locate: false,
      frequency: 2,
      inputStream: {
        type: 'LiveStream',
        target: elemCameraView,
        constraints: {
          // width: 1080,
          // height: 1080,
          // width: 640,
          // height: 640,
          frameRate: 10,
          tryVertical: true,
          facingMode: 'environment',
          focusMode: 'continuous',
          successTimeout: 1000,
        },
        area: {
          top: '20%',
          right: '20%',
          left: '20%',
          bottom: '20%',
        },
      },
      decoder: {
        readers: ['ean_reader'],
        debug: {
          drawBoundingBox: true,
          showFrequency: true,
          drawScanline: true,
          showPattern: true
        },
        multiple: false,
      },
    };

  const OnInit = (error) => {
      if (error) {
        console.error(error);
        return;
      }
      Quagga.start();
  };

  const OnProcessed = async (result) => {
    const drawingCtx = Quagga.canvas.ctx.overlay;
    const drawingCanvas = Quagga.canvas.dom.overlay;

    if (result) {
      // 検出中の緑の線の枠
      if (result.boxes) {
        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
        result.boxes.filter(function (box) {
            return box !== result.box;
        }).forEach(function (box) {
            Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
        });
      }
      // 読込中の青枠
      if (result.box) {
          Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
      }
      // 検出完了時の赤線
      if (result.codeResult && result.codeResult.code) {
          Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
      }
    }
  }

  const OnDetected = async (result) => {

    let code = result.codeResult.code;

    AddItem(code);

  };

  const AddItem = (code) =>{

    elemDetectedCode.textContent = code;

    let msg = code + 'コードを登録しますか？';

    if (!confirm(msg)) {
      return;
    }

//ここに検出したコードに対する処理を書く

  };


  //
  Quagga.init(config, OnInit);
  Quagga.onProcessed(OnProcessed);
  Quagga.onDetected(OnDetected);

</script>

所感

最近GAS(Google Apps Script)というものを知り、ネットにいろんな情報があったので自分なりに組み合わせています。

このソースも通常のWebアプリのコードではなくてGAS用のコードなので違和感があります。(.cssファイル, .jsファイルを作れないところとか)

色々書きながらデバッグ・リファクタリングをしたいと思っているのですが、如何せんWeb上でのソースコードエディターに慣れられず・・・

GASの性質上、大規模なソースコードも書けないのでこんなもんかーとは思っていますが、物足りないものを感じます。

JavaScriptの部分はBlazorとかにもそのまま使えそうなので未来の自分のために残しておきます。