Can't decode ean 13 barcodes.

[Jim]

Hi all

Getting desperate here.  Tried every js library I can and can't get anything to scan an EAM_13 barcode, they all just ignore it!  I'm working in html5 and JS.  I've tried loads of sample barcodes and nothing.  Annoying really as QR codes work out of the box every time!

 My page is bring delivered via dotnet mvc 4.8, although apart from esscapig the @ tags from razor, it's effectively pure html and js.  My code follows.  Clearly there more going on here other than just the scan, but if anyone could give me a smaple of "anything" html +js working with ean 13, I'd be eternally grateful!

Thanks

Jim

My code.

@model Pocos.MCD_Stores

@{
    ViewBag.Title = "DoVisit";
}
<label id="recordCountLabel">Records Loaded: 0</label>
<br />
<h2>Do Visit</h2>

<!-- Add buttons to start scanning and manually trigger a scan -->
<button id="startScanButton">Start Scanner</button>
<button id="scanNowButton" style="display: none;">Scan it now!</button>
<button id="resetButton">Reset</button>
<br />
<!-- Add a video element for the barcode scanner -->
<video id="barcode-scanner" width="600" height="400" style="border: 1px solid gray; display: block;"></video>
<br />
<label id="scannedBarcodeLabel">Scanned Barcode: None</label>
<br />
<label id="productDetailsLabel">Product Details: None</label>

<script src="https://cdn.jsdelivr.net/npm/@('@')zxing/library@('@')0.18.6/umd/index.min.js"></script>

<script>
    let selectedDeviceId;
    const codeReader = new ZXing.BrowserMultiFormatReader();
    console.log('ZXing code reader initialized');

    document.getElementById('startScanButton').addEventListener('click', () => {
        codeReader.listVideoInputDevices()
            .then(videoInputDevices => {
                selectedDeviceId = videoInputDevices.deviceId;
                codeReader.decodeFromVideoDevice(selectedDeviceId, 'barcode-scanner', { formats: [ZXing.BarcodeFormat.EAN_13] }, (result, err) => {
                    if (result) {
                        console.log('Barcode detected:', result);
                        document.getElementById('scannedBarcodeLabel').innerText = `Scanned Barcode: ${result.text}`;
                        handleScannedBarcode(result.text);
                    }
                    if (err && !(err instanceof ZXing.NotFoundException)) {
                        console.error('Error:', err);
                    }
                });
                document.getElementById('scanNowButton').style.display = 'block';
            })
            .catch(err => console.error('Error listing video input devices:', err));
    });

    document.getElementById('scanNowButton').addEventListener('click', () => {
        codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'barcode-scanner', { formats: [ZXing.BarcodeFormat.EAN_13] })
            .then(result => {
                if (result) {
                    console.log('Barcode detected:', result);
                    document.getElementById('scannedBarcodeLabel').innerText = `Scanned Barcode: ${result.text}`;
                    handleScannedBarcode(result.text);
                }
            })
            .catch(err => {
                if (err && !(err instanceof ZXing.NotFoundException)) {
                    console.error('Error:', err);
                }
            });
    });

    document.getElementById('resetButton').addEventListener('click', () => {
        codeReader.reset();
        document.getElementById('scannedBarcodeLabel').innerText = 'Scanned Barcode: None';
        document.getElementById('productDetailsLabel').innerText = 'Product Details: None';
        document.getElementById('scanNowButton').style.display = 'none';
    });

    // Function to handle the scanned barcode
    function handleScannedBarcode(barcode) {
        const productDbRequest = indexedDB.open('ProductDatabase', 1);

        productDbRequest.onsuccess = (event) => {
            const db = event.target.result;
            const transaction = db.transaction('products', 'readonly');
            const objectStore = transaction.objectStore('products');
            const getRequest = objectStore.get(barcode);

            getRequest.onsuccess = (event) => {
                const product = event.target.result;
                if (product) {
                    document.getElementById('productDetailsLabel').innerText = `Product Details: ${JSON.stringify(product)}`;
                    storeScannedProduct(product.Sku);
                } else {
                    document.getElementById('productDetailsLabel').innerText = `Product Details: Not found`;
                }
            };

            getRequest.onerror = (event) => {
                console.error('Error retrieving product:', event.target.error);
            };
        };

        productDbRequest.onerror = (event) => {
            console.error('Error opening ProductDatabase:', event.target.error);
        };
    }

    // Function to store the scanned product in the second IndexedDB
    function storeScannedProduct(sku) {
        const scannedDbRequest = indexedDB.open('scannedProductDatabase', 1);

        scannedDbRequest.onsuccess = (event) => {
            const db = event.target.result;
            const transaction = db.transaction('skuCounts', 'readwrite');
            const objectStore = transaction.objectStore('skuCounts');
            const getRequest = objectStore.get(sku);

            getRequest.onsuccess = (event) => {
                const record = event.target.result;
                if (record) {
                    record.Count += 1;
                    objectStore.put(record);
                } else {
                    objectStore.put({ Sku: sku, Count: 1 });
                }
            };

            getRequest.onerror = (event) => {
                console.error('Error retrieving scanned product:', event.target.error);
            };
        };

        scannedDbRequest.onerror = (event) => {
            console.error('Error opening scannedProductDatabase:', event.target.error);
        };
    }

    // Ensure the DOM is fully loaded before running the script
    document.addEventListener('DOMContentLoaded', (event) => {
        // Initialize the second IndexedDB
        initScannedProductDB()
            .then(db => {
                console.log('Second IndexedDB is ready to use.');
                // Retrieve the record count from localStorage and update the label
                const recordCount = localStorage.getItem('recordCount');
                if (recordCount) {
                    document.getElementById('recordCountLabel').innerText = `Records Loaded: ${recordCount}`;
                }
            })
            .catch(error => {
                console.error('Error initializing second IndexedDB:', error);
            });
    });

    // Function to initialize the second IndexedDB
    function initScannedProductDB() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open('scannedProductDatabase', 1);

            request.onupgradeneeded = (event) => {
                const db = event.target.result;
                const objectStore = db.createObjectStore('skuCounts', { keyPath: 'Sku' });
                objectStore.createIndex('Sku', 'Sku', { unique: true });
                objectStore.createIndex('Count', 'Count', { unique: false });
            };

            request.onsuccess = (event) => {
                console.log('Second IndexedDB initialized successfully.');
                resolve(event.target.result);
            };

            request.onerror = (event) => {
                reject(event.target.error);
            };
        });
    }
</script>