Removing more of the broken funktionaliti

Web/templates/library_table.html

@@ -459,10 +459,7 @@
             Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
         </div>
         <div id="scanReaderWrap" class="library-scan-reader-wrap">
-            <div id="libraryQrReader" class="library-scan-reader">
+            <div id="libraryQrReader" class="library-scan-reader"></div>
-                <video id="libraryQrReaderVideo" playsinline style="width: 100%; border-radius: 8px;"></video>
-                <canvas id="libraryQrReaderCanvas" style="display: none;"></canvas>
-            </div>
         </div>
     </div>
     <div id="filterPanel" class="library-filter-panel">
@@ -550,8 +547,7 @@
     </div>
 </div>
 
-<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
-<script src="/static/js/scanner.js"></script>
 <script>
     // State
     let libraryItems = [];
@@ -1006,8 +1002,54 @@
     }
 
     async function ensureScannerLibraryLoaded() {
-        // HybridScanner is loaded globally via script tag
+        if (typeof Html5QrcodeScanner !== 'undefined') {
-        return typeof HybridScanner !== 'undefined';
+            return true;
+        }
+
+        const sources = [
+            'https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js'
+        ];
+
+        for (const src of sources) {
+            try {
+                await new Promise((resolve, reject) => {
+                    const existing = document.querySelector(`script[data-scanner-src="${src}"]`);
+                    if (existing) {
+                        const onLoad = () => resolve();
+                        const onError = () => reject(new Error('Script load failed'));
+                        existing.addEventListener('load', onLoad, { once: true });
+                        existing.addEventListener('error', onError, { once: true });
+                        setTimeout(() => {
+                            existing.removeEventListener('load', onLoad);
+                            existing.removeEventListener('error', onError);
+                            if (typeof Html5QrcodeScanner !== 'undefined') {
+                                resolve();
+                            } else {
+                                reject(new Error('Script not available'));
+                            }
+                        }, 1200);
+                        return;
+                    }
+
+                    const script = document.createElement('script');
+                    script.src = src;
+                    script.async = true;
+                    script.defer = true;
+                    script.dataset.scannerSrc = src;
+                    script.onload = () => resolve();
+                    script.onerror = () => reject(new Error('Script load failed'));
+                    document.head.appendChild(script);
+                });
+
+                if (typeof Html5QrcodeScanner !== 'undefined') {
+                    return true;
+                }
+            } catch (err) {
+                console.warn('Scanner library load failed from', src, err);
+            }
+        }
+
+        return false;
     }
 
     async function startScanner() {
@@ -1024,17 +1066,37 @@
         readerWrap.style.display = 'block';
 
         try {
-            scannerInstance = scannerInstance || new HybridScanner({
+            const formats = [];
-                videoId: 'libraryQrReaderVideo',
+            if (typeof Html5QrcodeSupportedFormats !== 'undefined') {
-                canvasId: 'libraryQrReaderCanvas',
+                formats.push(
-                formats: ['QR_CODE', 'EAN_13', 'EAN_8', 'CODE_128', 'CODE_39', 'UPC_A', 'UPC_E', 'ITF', 'CODABAR'],
+                    Html5QrcodeSupportedFormats.QR_CODE,
-                fps: 10,
+                    Html5QrcodeSupportedFormats.EAN_13,
-                facingMode: 'environment',
+                    Html5QrcodeSupportedFormats.EAN_8,
-                onSuccess: handleScanSuccess,
+                    Html5QrcodeSupportedFormats.CODE_128,
-                onError: handleScanError
+                    Html5QrcodeSupportedFormats.CODE_39,
-            });
+                    Html5QrcodeSupportedFormats.UPC_A,
+                    Html5QrcodeSupportedFormats.UPC_E,
+                    Html5QrcodeSupportedFormats.ITF,
+                    Html5QrcodeSupportedFormats.CODABAR
+                );
+            }
 
-            scannerInstance.start();
+            const scannerConfig = {
+                fps: 10,
+                rememberLastUsedCamera: true,
+                aspectRatio: 1.333334
+            };
+            if (formats.length > 0) {
+                scannerConfig.formatsToSupport = formats;
+            }
+
+            scannerInstance = scannerInstance || new Html5QrcodeScanner(
+                'libraryQrReader',
+                scannerConfig,
+                false
+            );
+
+            scannerInstance.render(handleScanSuccess, handleScanError);
             scannerRunning = true;
             toggleBtn.textContent = 'Scanner stoppen';
             setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
@@ -1051,7 +1113,7 @@
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
         try {
-            scannerInstance.stop();
+            await scannerInstance.clear();
         } catch (err) {
             console.error('Scanner stop failed:', err);
         }

Web/templates/main.html

@@ -413,10 +413,7 @@
         </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" style="display: none;">
+            <div id="qr-reader"></div>
-                <video id="qr-reader-video" playsinline style="width: 100%; max-width: 500px; 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">
             <span>Name</span>
@@ -529,8 +526,7 @@
     window.isDebug = false; // Set to true only for development environment
 </script>
 
-<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
+<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
-<script src="/static/js/scanner.js"></script>
 <script>
     // Global state
     const highlightItemId = (window.serverVars && window.serverVars.highlightItemId && window.serverVars.highlightItemId !== 'null')
@@ -543,7 +539,7 @@
     document.addEventListener('DOMContentLoaded', function() {
         const scanButton = document.getElementById('scanButton');
         const qrReader = document.getElementById('qr-reader');
-        let hybridScanner = null;
+        let html5QrcodeScanner = null;
 
         if (!scanButton || !qrReader) return;
 
@@ -557,14 +553,12 @@
             if (qrReader.style.display !== 'block') {
                 qrReader.style.display = 'block';
                 
-                hybridScanner = new HybridScanner({
+                html5QrcodeScanner = new Html5QrcodeScanner(
-                    videoId: 'qr-reader-video',
+                    'qr-reader', { fps: 10, qrbox: 250 }
-                    canvasId: 'qr-reader-canvas',
+                );
-                    formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39'],
+                
-                    fps: 10,
+                html5QrcodeScanner.render((decodedText) => {
-                    facingMode: 'environment',
+                    html5QrcodeScanner.clear();
-                    onSuccess: function(decodedText) {
-                        hybridScanner.stop();
                     qrReader.style.display = 'none';
                     
                     // Put scanned code into the search box and trigger search
@@ -575,18 +569,12 @@
                     }
 
                     setScannerUi(false);
-                    },
-                    onError: function(error) {
-                        console.error('Scanner error:', error);
-                    }
                 });
 
-                hybridScanner.start();
                 setScannerUi(true);
             } else {
-                if (hybridScanner) {
+                if (html5QrcodeScanner) {
-                    hybridScanner.stop();
+                    html5QrcodeScanner.clear();
-                    hybridScanner = null;
                 }
                 qrReader.style.display = 'none';
                 setScannerUi(false);