qr-secure-send 1.3.0 → 1.4.0

package/index.html

@@ -73,7 +73,7 @@
     button.secondary:hover { background: #30363d; }
 
     #qr-output { text-align: center; margin-top: 1rem; }
-    #qr-output canvas { border-radius: 8px; max-width: 100%; }
+    #qr-output canvas { border-radius: 8px; max-width: 100%; image-rendering: pixelated; }
 
     #scanner-region { width: 100%; border-radius: 8px; overflow: hidden; position: relative; }
     #scanner-region video { width: 100%; border-radius: 8px; display: block; }
@@ -244,15 +244,15 @@
     const VERSION_TABLE = [
       null, // index 0 unused
       [16,10,1,16,0,0],[28,16,1,28,0,0],[44,26,1,44,0,0],[64,18,2,32,0,0],
-      [86,24,2,43,0,0],[108,16,2,27,2,28],[124,18,2,31,2,32],[154,22,2,38,2,39],
-      [182,22,2,36,2,37],[216,26,2,43,2,44],[254,30,2,50,2,51],[290,22,2,36,4,37],
-      [334,22,2,37,4,38],[365,24,4,40,2,41],[415,24,2,41,4,42],[453,28,4,45,2,46],
-      [507,28,2,42,4,43],[563,26,4,46,2,47],[627,26,2,44,4,45],[669,26,4,47,2,48],
-      [714,22,2,45,6,46],[782,24,6,43,2,44],[860,28,6,45,2,46],[914,28,8,47,0,0],
-      [1000,22,4,46,4,47],[1062,24,4,43,6,44],[1128,22,2,45,8,46],[1193,24,4,45,6,46],
-      [1267,24,6,45,4,46],[1373,28,6,47,4,48],[1455,28,6,47,4,48],[1541,28,8,47,2,48],
-      [1631,28,8,47,4,48],[1725,28,6,47,8,48],[1812,28,8,47,4,48],[1914,28,8,47,8,48],
-      [1992,28,10,47,4,48],[2102,28,8,47,8,48],[2216,28,12,47,4,48],[2334,28,14,47,4,48]
+      [86,24,2,43,0,0],[108,16,4,27,0,0],[124,18,4,31,0,0],[154,22,2,38,2,39],
+      [182,22,3,36,2,37],[216,26,4,43,1,44],[254,30,1,50,4,51],[290,22,6,36,2,37],
+      [334,22,8,37,1,38],[365,24,4,40,5,41],[415,24,5,41,5,42],[453,28,7,45,3,46],
+      [507,28,10,46,1,47],[563,26,9,43,4,44],[627,26,3,44,11,45],[669,26,3,41,13,42],
+      [714,26,17,42,0,0],[782,28,17,46,0,0],[860,28,4,47,14,48],[914,28,6,45,14,46],
+      [1000,28,8,47,13,48],[1062,28,19,46,4,47],[1128,28,22,45,3,46],[1193,28,3,45,23,46],
+      [1267,28,21,45,7,46],[1373,28,19,47,10,48],[1455,28,2,46,29,47],[1541,28,10,46,23,47],
+      [1631,28,14,46,21,47],[1725,28,14,46,23,47],[1812,28,12,47,26,48],[1914,28,6,47,34,48],
+      [1992,28,29,46,14,47],[2102,28,13,46,32,47],[2216,28,40,47,7,48],[2334,28,18,47,31,48]
     ];
 
     // Byte-mode capacity per version at EC level M
@@ -715,13 +715,15 @@
 
     function toCanvas(container, text, options = {}) {
       const { matrix, size } = encode(text);
-      const scale = Math.max(1, Math.floor((options.width || 320) / size));
+      const scale = Math.max(4, Math.floor((options.width || 500) / size));
       const margin = (options.margin !== undefined ? options.margin : 2) * scale;
 
       const canvas = document.createElement("canvas");
       const total = size * scale + margin * 2;
       canvas.width = total;
       canvas.height = total;
+      canvas.style.maxWidth = "100%";
+      canvas.style.height = "auto";
       const ctx = canvas.getContext("2d");
 
       ctx.fillStyle = "#ffffff";
@@ -742,25 +744,47 @@
 
 
   // =========================================================================
-  // QR CODE SCANNER — Uses native BarcodeDetector API (Chrome, Edge, Safari)
-  // Falls back to manual paste for unsupported browsers (Firefox).
-  // No external libraries required.
+  // QR CODE SCANNER — Uses native BarcodeDetector API where available,
+  // falls back to jsQR library (loaded from CDN) for other browsers.
   // =========================================================================
 
   const QRScan = (() => {
     let stream = null;
     let animId = null;
     let running = false;
+    let jsQRPromise = null;
+
+    const hasBarcodeDetector = "BarcodeDetector" in window;
+
+    function loadJsQR() {
+      if (jsQRPromise) return jsQRPromise;
+      jsQRPromise = new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = "https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js";
+        script.onload = () => resolve(window.jsQR);
+        script.onerror = () => reject(new Error("Failed to load QR scanner library"));
+        document.head.appendChild(script);
+      });
+      return jsQRPromise;
+    }
 
-    const isSupported = "BarcodeDetector" in window;
+    // Always report supported — we have a fallback
+    const isSupported = true;
 
     async function start(regionEl, onResult, onError) {
-      if (!isSupported) {
-        onError("BarcodeDetector is not supported in this browser. Use Chrome, Edge, or Safari.");
-        return false;
-      }
+      let detector = null;
+      let jsQRFn = null;
 
-      const detector = new BarcodeDetector({ formats: ["qr_code"] });
+      if (hasBarcodeDetector) {
+        detector = new BarcodeDetector({ formats: ["qr_code"] });
+      } else {
+        try {
+          jsQRFn = await loadJsQR();
+        } catch (e) {
+          onError("Failed to load QR scanner. Check your internet connection.");
+          return false;
+        }
+      }
 
       try {
         stream = await navigator.mediaDevices.getUserMedia({
@@ -783,14 +807,35 @@
 
       running = true;
 
+      // Reusable canvas for jsQR frame capture
+      let scanCanvas = null;
+      let scanCtx = null;
+
       const scan = async () => {
         if (!running) return;
         try {
-          const codes = await detector.detect(video);
-          if (codes.length > 0) {
-            // onResult returns true if scan should stop (successful decode)
-            const shouldStop = await onResult(codes[0].rawValue);
-            if (shouldStop) return;
+          if (detector) {
+            const codes = await detector.detect(video);
+            if (codes.length > 0) {
+              const shouldStop = await onResult(codes[0].rawValue);
+              if (shouldStop) return;
+            }
+          } else if (jsQRFn) {
+            if (video.videoWidth > 0 && video.videoHeight > 0) {
+              if (!scanCanvas) {
+                scanCanvas = document.createElement("canvas");
+                scanCanvas.width = video.videoWidth;
+                scanCanvas.height = video.videoHeight;
+                scanCtx = scanCanvas.getContext("2d", { willReadFrequently: true });
+              }
+              scanCtx.drawImage(video, 0, 0, scanCanvas.width, scanCanvas.height);
+              const imageData = scanCtx.getImageData(0, 0, scanCanvas.width, scanCanvas.height);
+              const code = jsQRFn(imageData.data, imageData.width, imageData.height);
+              if (code) {
+                const shouldStop = await onResult(code.data);
+                if (shouldStop) return;
+              }
+            }
           }
         } catch (_) {}
         animId = requestAnimationFrame(scan);
@@ -912,19 +957,19 @@
         return;
       }
 
-      QRGen.toCanvas(output, payload, { width: 320, margin: 2 });
+      QRGen.toCanvas(output, payload, { width: 500, margin: 2 });
       info.style.display = "block";
     } catch (e) {
       errEl.textContent = "Failed to generate QR code: " + e.message;
     }
   });
 
-  // Browser compatibility warning
-  if (!QRScan.isSupported) {
+  // Browser compatibility note
+  if (!("BarcodeDetector" in window)) {
     document.getElementById("compat-warning").style.display = "block";
     document.getElementById("compat-warning").textContent =
-      "Your browser does not support QR scanning (BarcodeDetector API). " +
-      "Use Chrome, Edge, or Safari for camera scanning.";
+      "Your browser lacks native QR scanning. A fallback library will be " +
+      "loaded from the internet when you start the camera.";
   }
 
   // QR Scanning

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qr-secure-send",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Encrypt and transfer secrets via QR code",
   "keywords": ["qr", "qrcode", "encryption", "password", "secure", "transfer"],
   "author": "",