webui camera barcode scanner

templates/index.html

@@ -9,6 +9,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    <script src="https://unpkg.com/html5-qrcode"></script>
     <style>
         :root {
             --bg: #ebedef;
@@ -310,6 +311,10 @@
                         style="font-family:monospace; opacity:.5; font-size:.8rem;"></p>
                 </div>
 
+                <button class="btn btn-accent mb-3 w-100" onclick="startScanner()">
+                    <i class="bi bi-qr-code-scan me-2"></i>Escanear con Cámara
+                </button>
+
                 <!-- Edit / Create card -->
                 <div class="discord-card p-3">
                     <h6 id="form-title" class="mb-3 fw-bold">Editar / Crear</h6>
@@ -520,6 +525,20 @@
         </div>
     </div>
 
+    <div class="modal fade" id="scannerModal" tabindex="-1" data-bs-backdrop="static">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Escanear Código</h5>
+                    <button type="button" class="btn-close" onclick="stopScanner()" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="reader" style="width: 100%;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         /* ── Theme ── */
@@ -825,6 +844,47 @@
             // Optional: Reset "select all" state since order changed
             document.getElementById('select-all').checked = false;
         }
+
+        let html5QrCode;
+
+        async function startScanner() {
+            const modal = new bootstrap.Modal(document.getElementById('scannerModal'));
+            modal.show();
+
+            html5QrCode = new Html5Qrcode("reader");
+            const config = { fps: 10, qrbox: { width: 250, height: 150 } };
+
+            try {
+                await html5QrCode.start(
+                    { facingMode: "environment" },
+                    config,
+                    (decodedText) => {
+                        // Successfully scanned
+                        stopScanner();
+                        bootstrap.Modal.getInstance(document.getElementById('scannerModal')).hide();
+
+                        // Trigger your existing scan route
+                        fetch(`/scan?content=${decodedText}`)
+                            .then(res => {
+                                if (res.status === 404) {
+                                    console.log("Producto nuevo detectado vía cámara");
+                                }
+                            });
+                    }
+                );
+            } catch (err) {
+                console.error("Error al iniciar cámara:", err);
+                alert("No se pudo acceder a la cámara. Asegúrate de dar permisos HTTPS.");
+            }
+        }
+
+        function stopScanner() {
+            if (html5QrCode && html5QrCode.isScanning) {
+                html5QrCode.stop().then(() => {
+                    html5QrCode.clear();
+                });
+            }
+        }
     </script>
 </body>