typescript_html5qrcode_multi_qr_scanner_with_camera_stream.ts

1import { Html5Qrcode, Html5QrcodeFullConfig } from "html5-qrcode";
2
3const qrcodeRegionId = "reader";
4
5// Define the configuration for the scanner
6const config: Html5QrcodeFullConfig = {
7    formatsToSupport: [ 0 ], // 0 corresponds to QR_CODE
8    verbose: false
9};
10
11const html5QrCode = new Html5Qrcode(qrcodeRegionId, config);
12
13const qrCodeSuccessCallback = (decodedText: string, decodedResult: any) => {
14    /* handle success */
15    console.log(`Code matched = ${decodedText}`, decodedResult);
16    
17    // In a multi-scanner PoC, we often append results to a list 
18    // instead of stopping the scanner immediately
19    const resultContainer = document.getElementById('qr-results');
20    if (resultContainer) {
21        const newElement = document.createElement('div');
22        newElement.innerText = `Scanned: ${decodedText}`;
23        resultContainer.appendChild(newElement);
24    }
25};
26
27const configScanner = { 
28    fps: 10, 
29    qrbox: { width: 250, height: 250 } 
30};
31
32// Start scanning using the back camera
33html5QrCode.start(
34    { facingMode: "environment" }, 
35    configScanner, 
36    qrCodeSuccessCallback,
37    (errorMessage) => {
38        // parse error, ideally ignore to keep scanning
39    }
40).catch((err) => {
41    console.error(`Unable to start scanning, error: ${err}`);
42});