feat: add qr scanner and reader

index.html

@@ -16,6 +16,7 @@
     <meta property="og:image" content="https://qr-generator.muathye.com/icon-512x512.png">
     <title>QR Code Generator - Free QR Code Generator Online</title>
     <link href="tailwind.min.css" rel="stylesheet">
+    <script src="html5-qrcode.min.js"></script>
     <link rel="manifest" href="manifest.json">
     <script type="application/ld+json">
         {
@@ -43,22 +44,35 @@
             Powered by <a href="https://muathye.com" target="_blank"
                 class="text-blue-500 hover:underline">muathye.com</a>
         </p>
-        <textarea  id="text-input" class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text to generate QR code"></textarea>
+        <textarea id="text-input"
+            class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="Enter text to generate QR code"></textarea>
 
         <!-- Color Pickers -->
         <div class="mb-4 flex items-center space-x-4">
             <div class="flex">
                 <label for="foreground-color" class="inilne mr-1 text-gray-700">Foreground Color:</label>
-                <input type="color" id="foreground-color" value="#000000" class="inline p-1 border border-gray-300 rounded">
+                <input type="color" id="foreground-color" value="#000000"
+                    class="inline p-1 border border-gray-300 rounded">
             </div>
             <div class="flex">
                 <label for="background-color" class="inilne mr-1 text-gray-700">Background Color:</label>
-                <input type="color" id="background-color" value="#FFFFFF" class="inline p-1 border border-gray-300 rounded">
+                <input type="color" id="background-color" value="#FFFFFF"
+                    class="inline p-1 border border-gray-300 rounded">
             </div>
         </div>
         <button id="generate-btn"
             class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 w-full mb-4">Generate
             QR Code</button>
+        <button id="scan-qr-btn"
+            class="text-white bg-blue-500 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center w-full mb-4">
+            Scan QR Code
+        </button>
+        <input type="file" id="qr-file" accept="image/*" class="w-full mb-4" value="Or upload QR to scan">
+
+        <div id="qr-reader" style="width: 100%; display: none;"></div>
+        <p id="qr-result" class="text-center text-sm text-gray-700 mt-2"></p>
+
         <div id="qr-container" class="flex justify-center mb-4">
             <canvas id="qr-code" class="mt-4"></canvas>
         </div>
@@ -96,7 +110,7 @@
                 });
         }
     </script>
-    
+
 </body>
 
 </html>

script.js

@@ -70,3 +70,73 @@ document.getElementById('download-png').addEventListener('click', () => {
         URL.revokeObjectURL(url);
     }, 'image/png');
 });
+
+// scan qr
+document.addEventListener("DOMContentLoaded", function () {
+    const scanBtn = document.getElementById("scan-qr-btn");
+    const qrReader = document.getElementById("qr-reader");
+    const resultDisplay = document.getElementById("qr-result");
+
+    let scannerActive = false;
+
+    scanBtn.addEventListener("click", function () {
+        if (!scannerActive) {
+            qrReader.style.display = "block"; // Show QR Scanner
+            startScanner();
+            scanBtn.textContent = "Stop Scanner";
+        } else {
+            stopScanner();
+            scanBtn.textContent = "Scan QR Code";
+        }
+        scannerActive = !scannerActive;
+    });
+
+    function startScanner() {
+        const html5QrCode = new Html5Qrcode("qr-reader");
+
+        html5QrCode.start(
+            { facingMode: "environment" }, // Use back camera
+            {
+                fps: 10,    // Frames per second
+                qrbox: 250, // Scanner size
+            },
+            (decodedText) => {
+                resultDisplay.innerHTML = `<strong>Scanned Result:</strong> ${decodedText}`;
+                html5QrCode.stop(); // Stop scanning
+                scannerActive = false;
+                scanBtn.textContent = "Scan QR Code";
+                qrReader.style.display = "none";
+            },
+            (errorMessage) => {
+                console.warn(errorMessage); // Log errors if needed
+            }
+        ).catch((err) => {
+            console.error("Error starting scanner:", err);
+        });
+    }
+
+    function stopScanner() {
+        Html5Qrcode.getCameras().then((cameras) => {
+            if (cameras.length > 0) {
+                const html5QrCode = new Html5Qrcode("qr-reader");
+                html5QrCode.stop();
+                qrReader.style.display = "none";
+            }
+        }).catch((err) => {
+            console.error("Error stopping scanner:", err);
+        });
+    }
+});
+
+// upload qr to scan it
+document.getElementById("qr-file").addEventListener("change", function (event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const html5QrCode = new Html5Qrcode("qr-reader");
+    html5QrCode.scanFile(file, true)
+        .then(decodedText => {
+            document.getElementById("qr-result").innerHTML = `<strong>Scanned Result:</strong> ${decodedText}`;
+        })
+        .catch(err => console.error("QR Code not found", err));
+});