Removing more of the broken funktionaliti

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;">
-                <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 id="qr-reader"></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="/static/js/scanner.js"></script>
+<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.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,36 +553,28 @@
             if (qrReader.style.display !== 'block') {
                 qrReader.style.display = 'block';
                 
-                hybridScanner = new HybridScanner({
-                    videoId: 'qr-reader-video',
-                    canvasId: 'qr-reader-canvas',
-                    formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39'],
-                    fps: 10,
-                    facingMode: 'environment',
-                    onSuccess: function(decodedText) {
-                        hybridScanner.stop();
-                        qrReader.style.display = 'none';
-                        
-                        // Put scanned code into the search box and trigger search
-                        const searchInput = document.getElementById('code-search');
-                        if (searchInput) {
-                            searchInput.value = decodedText;
-                            searchByCode();
-                        }
-
-                        setScannerUi(false);
-                    },
-                    onError: function(error) {
-                        console.error('Scanner error:', error);
+                html5QrcodeScanner = new Html5QrcodeScanner(
+                    'qr-reader', { fps: 10, qrbox: 250 }
+                );
+                
+                html5QrcodeScanner.render((decodedText) => {
+                    html5QrcodeScanner.clear();
+                    qrReader.style.display = 'none';
+                    
+                    // Put scanned code into the search box and trigger search
+                    const searchInput = document.getElementById('code-search');
+                    if (searchInput) {
+                        searchInput.value = decodedText;
+                        searchByCode();
                     }
+
+                    setScannerUi(false);
                 });
 
-                hybridScanner.start();
                 setScannerUi(true);
             } else {
-                if (hybridScanner) {
-                    hybridScanner.stop();
-                    hybridScanner = null;
+                if (html5QrcodeScanner) {
+                    html5QrcodeScanner.clear();
                 }
                 qrReader.style.display = 'none';
                 setScannerUi(false);