scanner.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Barcode Scanner</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        height: 100vh;
        width: 100vw;
        padding: 1rem;

        font-family: Arial, sans-serif;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2%;

        background-color: #f4f4f9;
      }
      #scanner {
        width: 100%;
        max-width: 768px;
        height: 38%;

        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #scanner > video {
        max-height: 100%;
        max-width: 100%;
      }
      #copy-button {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        background-color: #000000;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      textarea {
        width: 100%;
        height: 34%;
        padding: 0.3rem;
      }
    </style>
  </head>
  <body>
    <h1>Barcode Scanner 0.7</h1>
    <div id="scanner"></div>
    <textarea
      id="barcode-results"
      placeholder="Scanned barcodes will appear here..."
    ></textarea>
    <button id="copy-button">Copy</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
    <script>
      const resultsTextArea = document.getElementById("barcode-results");
      const scannedBarcodes = new Set(); // Set to track added barcodes
      const copyButton = document.getElementById("copy-button");

      function addBarcode(barcode) {
        // Regex: Start with 4 letters followed by numbers only
        const isValid = /^[A-Za-z]{4}\d+$/.test(barcode);

        if (!isValid) {
          console.log("Invalid barcode format:", barcode);
          return; // Skip invalid barcodes
        }

        if (!scannedBarcodes.has(barcode)) {
          scannedBarcodes.add(barcode); // Add the barcode to the Set
          resultsTextArea.value += barcode + "\n"; // Append to the textarea
        } else {
          console.log("Barcode already added:", barcode);
        }
      }

      Quagga.init(
        {
          inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector("#scanner"),
            constraints: {
              facingMode: { ideal: "environment" },
            },
          },
          decoder: {
            readers: [
              "code_128_reader", // Common for shipping
              "code_39_reader", // Common in logistics
            ],
          },
        },
        function (err) {
          if (err) {
            console.error("QuaggaJS Initialization Error:", err);
            alert("Error initializing camera");
            return;
          }
          Quagga.start();
        },
      );

      Quagga.onDetected(function (data) {
        const barcode = data.codeResult.code;
        addBarcode(barcode); // Validate and add the barcode
      });

      // Copy button functionality
      copyButton.addEventListener("click", () => {
        navigator.clipboard
          .writeText(resultsTextArea.value)
          .then(() => {
            alert("Copied to clipboard!");
          })
          .catch((err) => {
            console.error("Failed to copy text: ", err);
          });
      });
    </script>
  </body>
</html>