zxing-js 拒绝扫描条形码

问题描述 投票:0回答:1

我已经尝试了一切,其他库(免费的,老板不会支付商业库想要的疯狂金钱),但它只是不会扫描 ean 13 代码。 整天都会扫描二维码。 尝试设置 ean_13_read 和 ean_reader 的选项均无济于事。 Quagga 和其他产品也以同样的方式失败,但这并不令人震惊,因为它们似乎主要基于 zxing。 谁能给我一些有效的示例代码? 我正在 dotnet 4.8 mvc 中工作,尽管这实际上只是纯 html/js 。 提前谢谢(希望如此)。

吉姆

这是我的代码,显然还做了其他一些事情。 我真的只是在寻找一个有效的样本!

@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>
<br />
<!-- Add the dropdown for products -->
<select id="productDropdown" style="width: 100%;">
    <option value="">Select a product</option>
</select>

<link href="https://cdn.jsdelivr.net/npm/select2@('@')4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@('@')zxing/library@('@')0.18.6/umd/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@('@')4.1.0-rc.0/dist/js/select2.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 customMatcher(params, data) {
        // If there are no search terms, return all of the data
        if ($.trim(params.term) === '') {
            return data;
        }

        // Make the search case-insensitive
        const term = params.term.toLowerCase();
        const text = data.text.toLowerCase();

        // Check if the term is found within the text
        if (text.indexOf(term) > -1) {
            return data;
        }

        // Return `null` if the term should not be displayed
        return null;
    }

    // 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);
            });

        // Fetch products from IndexedDB and populate the dropdown
        fetchProductsFromIndexedDB().then(products => {
            products.sort((a, b) => {
                const descA = a.Desc !== "NULL" ? a.Desc.toLowerCase() : "";
                const descB = b.Desc !== "NULL" ? b.Desc.toLowerCase() : "";
                if (descA < descB) return -1;
                if (descA > descB) return 1;
                return 0;
            });

            const dropdown = $('#productDropdown');
            products.forEach(product => {
                const desc = product.Desc !== "NULL" ? product.Desc : "";
                const colour = product.Colour !== "NULL" ? product.Colour : "";
                const size = product.Size !== "NULL" ? product.Size : "";
                const option = new Option(`${desc} - ${colour} - ${size}`, product.Sku, false, false);
                dropdown.append(option);
            });
            dropdown.select2({
                placeholder: "Select a product",
                allowClear: true,
                matcher: customMatcher
            });
        }).catch(error => {
            console.error('Error fetching products:', 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);
            };
        });
    }

    // Function to fetch products from IndexedDB
    function fetchProductsFromIndexedDB() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open('ProductDatabase', 1);

            request.onsuccess = (event) => {
                const db = event.target.result;
                const transaction = db.transaction(['products'], 'readonly');
                const objectStore = transaction.objectStore('products');
                const products = [];

                objectStore.openCursor().onsuccess = (event) => {
                    const cursor = event.target.result;
                    if (cursor) {
                        products.push(cursor.value);
                        cursor.continue();
                    } else {
                        resolve(products);
                    }
                };

                objectStore.openCursor().onerror = (event) => {
                    reject(event.target.error);
                };
            };

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

javascript html asp.net-mvc zxing-js
1个回答
0
投票

您是否尝试过提示您要扫描的格式?

const hints = new Map();
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, [
    ZXing.BarcodeFormat.EAN_13
]);
const codeReader = new ZXing.BrowserMultiFormatReader(hints);
© www.soinside.com 2019 - 2024. All rights reserved.