@dsbtek/barcode-detector/app.js

A TypeScript library for real-time PDF417 barcode scanning.

import { scanBarcode } from '@dsbtek/barcode-detector';

document
    .getElementById('fileInput')
    .addEventListener('change', async (event) => {
        const file = event.target.files[0];
        if (!file) {
            console.log('No file selected');
            return;
        }

        console.log('File selected:', file.name);

        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = async () => {
            console.log('Image loaded:', img.src);

            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            const imageData = ctx.getImageData(
                0,
                0,
                canvas.width,
                canvas.height,
            );

            console.log('Image data captured:', imageData);

            try {
                const result = await scanBarcode(imageData);
                console.log('Scan result:', result);
                document.getElementById(
                    'result',
                ).textContent = `Barcode content: ${
                    result || 'No barcode detected'
                }`;
            } catch (error) {
                console.error('Error during barcode scanning:', error);
                document.getElementById('result').textContent =
                    'Error scanning barcode';
            }
        };

        img.onerror = (error) => {
            console.error('Error loading image:', error);
        };
    });