iPhoneのカメラで1次元バーコードを読み取るには #iPhoneのカメラで1次元バーコードを読み取るには

TEST

iPhoneのカメラで1次元バーコードを読み取るには、getUserMedia APIを使用してカメラへのアクセスを許可し、バーコード読み取りライブラリを統合することが必要です。以下は、JavaScriptで1次元バーコードを読み取るための簡単なコードの例です。この例では、Quagga.jsと呼ばれるバーコードスキャナーライブラリを使用します。

まず、HTMLファイルに以下のコードを追加します：

<!DOCTYPE html>
<html>
  <head>
    <title>1D Barcode Scanner</title>
  </head>
  <body>
    <video id="scanner" autoplay></video>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0.12.1/dist/quagga.min.js"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0.12.1/dist/adapter.js"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0.12.1/dist/live_w_locator.js"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0.12.1/dist/live_w_locator.debug.js"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0.12.1/dist/locator.js"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0.12.1/dist/fallbacks.js"></script>
  </body>
</html>

次に、JavaScriptコードを追加します：

// ページの読み込みが完了したら実行
document.addEventListener("DOMContentLoaded", function () {
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // カメラへのアクセスを要求
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then(function (stream) {
        // カメラからの映像を<video>要素に表示
        var video = document.querySelector("#scanner");
        video.srcObject = stream;

        // Quagga.jsを初期化
        Quagga.init(
          {
            inputStream: {
              name: "Live",
              type: "LiveStream",
              target: video,
            },
            decoder: {
              readers: ["code_128_reader"],
            },
          },
          function (err) {
            if (err) {
              console.error(err);
              return;
            }
            Quagga.start();
          }
        );

        // バーコードが読み取られたときの処理
        Quagga.onProcessed(function (result) {
          var drawingCtx = Quagga.canvas.ctx.overlay;
          var 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) {
              console.log("バーコード内容: " + result.codeResult.code);
              Quagga.stop();
            }
          }
        });
      })
      .catch(function (err) {
        console.error("カメラへのアクセスに失敗しました: " + err);
      });
  }
});

このコードでは、カメラへのアクセスを要求し、Quagga.jsを使用してバーコードを読み取ります。バーコードが読み取られると、コンソールに内容が表示されます。必要に応じて、バーコードを読み取った後の処理をカスタマイズできます。

注意: セキュリティ設定とブラウザの設定によって、カメラへのアクセス許可が必要な場合があります。また、Quagga.jsの最新のバージョンを使用する場合、リンクを更新する必要があるかもしれません。