html5_qrcode_multi_scanner_poc_with_continuous_tracking.ts

1import { Html5QrcodeScanner, Html5QrcodeSupportedFormats } from "html5-qrcode";
2
3/**
4 * Quickstart for multi-qr-scanner-poc
5 * This example initializes the scanner and handles multiple successful scans.
6 */
7
8const qrcodeRegionId = "reader";
9
10// Callback for successful scans
11function onScanSuccess(decodedText: string, decodedResult: any) {
12    // Handle the scanned code
13    console.log(`Code matched = ${decodedText}`, decodedResult);
14    
15    // In a multi-scanner POC, we typically append results to a list 
16    // rather than stopping the scanner immediately.
17    const resultsContainer = document.getElementById('scanned-results');
18    if (resultsContainer) {
19        const newResult = document.createElement('div');
20        newResult.innerText = `Scanned: ${decodedText}`;
21        resultsContainer.appendChild(newResult);
22    }
23}
24
25// Callback for scan errors (optional)
26function onScanFailure(error: string) {
27    // qr code not focused or not found in frame, usually safe to ignore
28    // console.warn(`Code scan error = ${error}`);
29}
30
31// Configuration for the scanner
32const config = { 
33    fps: 10, 
34    qrbox: { width: 250, height: 250 },
35    formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ],
36    // Enable multiple scans by not stopping on the first success
37    rememberLastUsedCamera: true,
38    supportedScanTypes: [0] // 0 = HTML5_QRCODE_SCAN_TYPE_CAMERA
39};
40
41const html5QrcodeScanner = new Html5QrcodeScanner(
42    qrcodeRegionId, 
43    config, 
44    /* verbose= */ false
45);
46
47// Initialize the scanner
48html5QrcodeScanner.render(onScanSuccess, onScanFailure);