invisio v2.0

<!DOCTYPE html>
    <html>

<head>
        <title>สแกน QR/Barcode</title>
        <style>
            #reader {
                width: 300px;
                margin-top: 20px;
            }
            .scan-mode-btn { margin: 5px; padding: 8px 16px; cursor: pointer; }
            .scan-mode-btn.active { background: #4CAF50; color: white; border: none; }
            #scannedList { margin-top: 15px; max-height: 200px; overflow-y: auto; }
            .scanned-item { padding: 5px; border-bottom: 1px solid #eee; }
        </style>
    </head>

<body>

<h3>กดปุ่มเพื่อเปิดกล้องสแกน QR หรือ Barcode</h3>

<button onclick="startScanner()">📷 เปิดกล้องสแกน</button>
        <button class="scan-mode-btn" id="btnSingle" onclick="setScanMode('single')">สแกนครั้งเดียว</button>
        <button class="scan-mode-btn active" id="btnContinuous" onclick="setScanMode('continuous')">สแกนแบบถี่ (ต่อเนื่อง)</button>

<div id="scannedList" style="display: none;">
            <strong>รายการที่สแกนแล้ว:</strong>
            <div id="scannedItems"></div>
        </div>

function setScanMode(mode) {
                scanMode = mode;
                document.getElementById('btnSingle').classList.toggle('active', mode === 'single');
                document.getElementById('btnContinuous').classList.toggle('active', mode === 'continuous');
            }

function onBarcodeScanned(decodedText) {
                const now = Date.now();
                if (decodedText === lastScannedCode && (now - lastScannedTime) < SCAN_DEBOUNCE_MS) {
                    return; // ข้ามถ้าสแกนซ้ำเร็วเกินไป
                }
                lastScannedCode = decodedText;
                lastScannedTime = now;

document.getElementById('barcodeInput').value = decodedText;

if (scanMode === 'continuous') {
                    addToScannedList(decodedText);
                    // ไม่หยุดสแกน - ให้สแกนต่อได้ทันที
                } else {
                    html5QrcodeScanner.stop();
                    document.getElementById('reader').style.display = 'none';
                }
            }

function addToScannedList(code) {
                const list = document.getElementById('scannedList');
                const items = document.getElementById('scannedItems');
                list.style.display = 'block';
                const div = document.createElement('div');
                div.className = 'scanned-item';
                div.textContent = code + ' (' + new Date().toLocaleTimeString('th-TH') + ')';
                items.appendChild(div);
            }

function startScanner() {
                document.getElementById('reader').style.display = "block";

const config = {
                    fps: 60,
                    qrbox: { width: "100%", height: "100%" },
                    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
                    formatsToSupport: [
                        Html5QrcodeSupportedFormats.QR_CODE,
                        Html5QrcodeSupportedFormats.CODE_128,
                        Html5QrcodeSupportedFormats.EAN_13,
                        Html5QrcodeSupportedFormats.EAN_8,
                        Html5QrcodeSupportedFormats.UPC_A,
                        Html5QrcodeSupportedFormats.UPC_E
                    ]
                };

if (html5QrcodeScanner && html5QrcodeScanner.isScanning) {
                    return;
                }

html5QrcodeScanner = new Html5Qrcode("reader");
                html5QrcodeScanner.start(
                    { facingMode: "environment" },
                    config,
                    (decodedText) => onBarcodeScanned(decodedText),
                    (errorMessage) => {}
                ).then(() => {}).catch(err => {
                    alert("ไม่สามารถเปิดกล้องได้: " + err);
                });
            }
        </script>
    </body>

</html>