feat: Enhance barcode scanner with improved mobile compatibility and error handling

Web/static/js/scanner.js

@@ -47,8 +47,26 @@ class HybridScanner {
         return;
       }
 
+      // Use fallback URL for better mobile compatibility
+      let scriptUrl = 'https://unpkg.com/@zxing/library@latest/umd/index.min.js';
+      
+      // Check if already loading
+      const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
+      if (existingScript) {
+        existingScript.addEventListener('load', () => {
+          this.state.zxingReady = typeof ZXing !== 'undefined';
+          resolve(this.state.zxingReady);
+        }, { once: true });
+        existingScript.addEventListener('error', () => {
+          console.error('Failed to load ZXing library');
+          resolve(false);
+        }, { once: true });
+        return;
+      }
+
       const script = document.createElement('script');
-      script.src = 'https://unpkg.com/@zxing/library@latest/umd/index.min.js';
+      script.src = scriptUrl;
+      script.async = true;
       script.onload = () => {
         this.state.zxingReady = typeof ZXing !== 'undefined';
         resolve(this.state.zxingReady);
@@ -154,32 +172,46 @@ class HybridScanner {
     const canvas = this.state.canvas;
     const video = this.state.videoElement;
 
+    if (!video || !canvas) {
+      setTimeout(() => this.scanLoop(), 100);
+      return;
+    }
+
     if (video.readyState === video.HAVE_ENOUGH_DATA) {
-      canvas.width = video.videoWidth;
+      try {
-      canvas.height = video.videoHeight;
+        canvas.width = video.videoWidth;
-      const context = canvas.getContext('2d');
+        canvas.height = video.videoHeight;
         
-      if (context) {
+        if (canvas.width === 0 || canvas.height === 0) {
-        context.drawImage(video, 0, 0);
+          setTimeout(() => this.scanLoop(), 100);
+          return;
+        }
 
-        try {
+        const context = canvas.getContext('2d');
-          const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
-          const luminanceSource = new ZXing.HTMLCanvasElementLuminanceSource(canvas);
+        if (context) {
-          const binaryBitmap = new ZXing.BinaryBitmap(new ZXing.HybridBinarizer(luminanceSource));
+          context.drawImage(video, 0, 0);
 
           try {
-            const result = this.state.reader.decodeFromBitmap(binaryBitmap);
+            const luminanceSource = new ZXing.HTMLCanvasElementLuminanceSource(canvas);
-            this.handleScanResult(result.text);
+            const binaryBitmap = new ZXing.BinaryBitmap(new ZXing.HybridBinarizer(luminanceSource));
-          } catch (e) {
+
-            // No barcode found in frame; continue scanning
+            try {
+              const result = this.state.reader.decodeFromBitmap(binaryBitmap);
+              this.handleScanResult(result.text);
+            } catch (e) {
+              // No barcode found in frame; continue scanning
+            }
+          } catch (err) {
+            // Silently ignore canvas errors
           }
-        } catch (err) {
-          // Silently ignore canvas errors
         }
+      } catch (err) {
+        console.warn('Scan loop error:', err);
       }
     }
 
-    // Throttle scan loop
+    // Throttle scan loop based on FPS setting
     setTimeout(() => this.scanLoop(), 1000 / this.options.fps);
   }
 

Web/templates/library.html

@@ -76,11 +76,11 @@
             </div>
         </div>
         <div class="scanner-video-wrapper">
-            <video id="qr-reader" playsinline style="width: 100%; max-width: 500px; border-radius: 8px;"></video>
+            <video id="qr-reader" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
             <canvas id="scanner-canvas" style="display: none;"></canvas>
         </div>
         <div id="scanMessage" class="scanner-message" style="margin-top: 10px; text-align: center; font-weight: bold; color: #666;"></div>
-        <p style="font-size: 0.9em; color: #999; margin-top: 10px; text-align: center;">
+        <p style="font-size: 0.85em; color: #999; margin-top: 10px; margin-bottom: 0; text-align: center;">
             💡 Hinweis: Scan-Ergebnis wird automatisch in das Feld oben übernommen. USB-Scanner werden als Tastatureingabe erkannt.
         </p>
     </div>
@@ -797,6 +797,9 @@ function onScanError(error) {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         width: 100%;
+        box-sizing: border-box;
+        margin: 0 -12px;
+        padding: 0 12px;
     }
     .library-table-wrapper .table-row {
         min-width: 720px; /* allow table to have intrinsic width and be scrolled */
@@ -811,38 +814,50 @@ function onScanError(error) {
     background: #f5f5f5;
     border: 1px solid #ddd;
     border-radius: 8px;
-    padding: 16px;
+    padding: 12px;
-    margin: 16px 0;
+    margin: 12px 0;
+    overflow-x: hidden;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .scanner-header {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     margin-bottom: 12px;
     flex-wrap: wrap;
-    gap: 12px;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .scanner-header h3 {
     margin: 0;
     color: #333;
-    font-size: 1.1em;
+    font-size: 1em;
+    flex: 0 0 auto;
+    white-space: nowrap;
 }
 
 .scanner-controls {
     display: flex;
-    gap: 8px;
+    gap: 6px;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .scanner-button {
     background: #2196F3;
     color: white;
     border: none;
-    padding: 8px 12px;
+    padding: 6px 10px;
     border-radius: 4px;
     cursor: pointer;
-    font-size: 0.9em;
+    font-size: 0.85em;
+    white-space: nowrap;
+    flex: 0 1 auto;
     transition: background-color 0.2s;
 }
 
@@ -857,24 +872,44 @@ function onScanError(error) {
 .scanner-video-wrapper {
     display: flex;
     justify-content: center;
+    align-items: center;
     margin: 12px 0;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
 }
 
 #qr-reader {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
     border: 2px solid #2196F3;
     border-radius: 8px;
+    display: block;
 }
 
 .scanner-message {
     min-height: 20px;
-    font-size: 0.95em;
+    font-size: 0.9em;
     text-align: center;
+    word-wrap: break-word;
 }
 
 @media (max-width: 600px) {
+    .qr-container {
+        padding: 10px;
+        margin: 10px 0;
+    }
+
     .scanner-header {
         flex-direction: column;
         align-items: stretch;
+        gap: 8px;
+    }
+
+    .scanner-header h3 {
+        width: 100%;
+        font-size: 0.95em;
     }
 
     .scanner-controls {
@@ -883,7 +918,18 @@ function onScanError(error) {
     }
 
     .scanner-button {
-        flex: 1;
+        flex: 1 1 auto;
+        padding: 8px 6px;
+        font-size: 0.8em;
+    }
+
+    #qr-reader {
+        max-width: 100%;
+        border-radius: 6px;
+    }
+
+    .scanner-message {
+        font-size: 0.85em;
     }
 }
 </style>

Web/templates/main_admin.html

@@ -2435,7 +2435,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
         </div>
         <div class="qr-container">
             <button id="scanButton" class="scan-button" aria-controls="qr-reader" aria-expanded="false">Barcode scannen</button>
-            <div id="qr-reader"></div>
+            <div id="qr-reader" style="display: none;">
+                <video id="qr-reader-video" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
+                <canvas id="qr-reader-canvas" style="display: none;"></canvas>
+            </div>
         </div>
 
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
@@ -2729,7 +2732,8 @@ document.addEventListener('DOMContentLoaded', ()=>{
     
     window.isDebug = false; // Set to true only for development environment
 </script>
-<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
+<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="/static/js/scanner.js"></script>
 <script>
     // Function to check if a file is a video
     function isVideoFile(filename) {
@@ -2739,7 +2743,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     }
 
     // Initialize QR Code scanner and global variables
-    let html5QrcodeScanner = null;
+    let hybridScanner = null;
     let codeSearchTerm = '';
     let descSearchIds = null; // Set of matching IDs or null when disabled
     let currentUsername = '';
@@ -2783,33 +2787,37 @@ document.addEventListener('DOMContentLoaded', ()=>{
         if (qrReader.style.display === 'none') {
             qrReader.style.display = 'block';
             
-            html5QrcodeScanner = new Html5QrcodeScanner(
+            hybridScanner = new HybridScanner({
-                "qr-reader", { 
+                videoId: 'qr-reader-video',
-                    fps: 10, 
+                canvasId: 'qr-reader-canvas',
-                    qrbox: 250,
+                formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39', 'UPC_A'],
-                    rememberLastUsedCamera: true
+                fps: 10,
+                facingMode: 'environment',
+                onSuccess: function(decodedText) {
+                    hybridScanner.stop();
+                    qrReader.style.display = 'none';
+                    
+                    // Put the scanned code in the search box
+                    const searchInput = document.getElementById('code-search');
+                    if (searchInput) {
+                        searchInput.value = decodedText;
+                        // Trigger search automatically
+                        searchByCode();
+                    }
+
+                    setScannerUi(false);
+                },
+                onError: function(error) {
+                    console.error('Scanner error:', error);
                 }
-            );
-            
-            html5QrcodeScanner.render((decodedText) => {
-                html5QrcodeScanner.clear();
-                qrReader.style.display = 'none';
-                
-                // Instead of navigating to the URL, put the scanned code in the search box
-                const searchInput = document.getElementById('code-search');
-                if (searchInput) {
-                    searchInput.value = decodedText;
-                    // Trigger search automatically
-                    searchByCode();
-                }
-
-                setScannerUi(false);
             });
 
+            hybridScanner.start();
             setScannerUi(true);
         } else {
-            if (html5QrcodeScanner) {
+            if (hybridScanner) {
-                html5QrcodeScanner.clear();
+                hybridScanner.stop();
+                hybridScanner = null;
             }
             qrReader.style.display = 'none';
             setScannerUi(false);
@@ -2825,8 +2833,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
 
         if (qrReader.style.display !== 'none') {
-            if (html5QrcodeScanner) {
+            if (hybridScanner) {
-                html5QrcodeScanner.clear();
+                hybridScanner.stop();
+                hybridScanner = null;
             }
             qrReader.style.display = 'none';
             scanEditBtn.textContent = 'Barcode scannen';
@@ -2835,18 +2844,25 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         qrReader.style.display = 'block';
         scanEditBtn.textContent = 'Scanner schließen';
-        html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { 
+        hybridScanner = new HybridScanner({
+            videoId: 'qr-reader-video',
+            canvasId: 'qr-reader-canvas',
+            formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
             fps: 10,
-            qrbox: 250,
+            facingMode: 'environment',
-            rememberLastUsedCamera: true
+            onSuccess: function(decodedText) {
-        });
+                hybridScanner.stop();
-        html5QrcodeScanner.render((decodedText) => {
+                qrReader.style.display = 'none';
-            html5QrcodeScanner.clear();
+                editCodeInput.value = String(decodedText || '').trim();
-            qrReader.style.display = 'none';
+                validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
-            editCodeInput.value = String(decodedText || '').trim();
+                scanEditBtn.textContent = 'Barcode scannen';
-            validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
+            },
-            scanEditBtn.textContent = 'Barcode scannen';
+            onError: function(error) {
+                console.error('Scanner error:', error);
+            }
         });
+        
+        hybridScanner.start();
     }
 
     function scanIntoEditIsbn() {
@@ -2858,8 +2874,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
 
         if (qrReader.style.display !== 'none') {
-            if (html5QrcodeScanner) {
+            if (hybridScanner) {
-                html5QrcodeScanner.clear();
+                hybridScanner.stop();
+                hybridScanner = null;
             }
             qrReader.style.display = 'none';
             scanIsbnBtn.textContent = 'ISBN scannen';
@@ -2868,20 +2885,27 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         qrReader.style.display = 'block';
         scanIsbnBtn.textContent = 'Scanner schließen';
-        html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', {
+        hybridScanner = new HybridScanner({
+            videoId: 'qr-reader-video',
+            canvasId: 'qr-reader-canvas',
+            formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
             fps: 10,
-            qrbox: 250,
+            facingMode: 'environment',
-            rememberLastUsedCamera: true
+            onSuccess: function(decodedText) {
-        });
+                hybridScanner.stop();
-        html5QrcodeScanner.render((decodedText) => {
+                qrReader.style.display = 'none';
-            html5QrcodeScanner.clear();
+                editIsbnInput.value = String(decodedText || '').trim();
-            qrReader.style.display = 'none';
+                scanIsbnBtn.textContent = 'ISBN scannen';
-            editIsbnInput.value = String(decodedText || '').trim();
+                if (typeof fetchBookInfo === 'function') {
-            scanIsbnBtn.textContent = 'ISBN scannen';
+                    fetchBookInfo('edit');
-            if (typeof fetchBookInfo === 'function') {
+                }
-                fetchBookInfo('edit');
+            },
+            onError: function(error) {
+                console.error('Scanner error:', error);
             }
         });
+        
+        hybridScanner.start();
     }
 
     function rebuildFilter3Options() {