OiO.lk Blog javascript zxing-js refuses to scan barcodes
javascript

zxing-js refuses to scan barcodes


@model Pocos.MCD_Stores

@{
    ViewBag.Title = "DoVisit";
}


Do Visit





{ 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); }; }); } ]]>



You need to sign in to view this answers

Exit mobile version