Enable Barcode Scanning on your website with the JavaScript Barcode Scanner
By integrating the Web Page Barcode Scanner, you empower your website to extract data from all standard 1D and 2D barcode types using our GDPR- and CCPA-compliant software components. Reliable & fast detection with recent smartphones, even from poor angles or under bad lighting conditions.
Decoding barcodes via a web page or web application has never been easier. A broad browser compatibility, 98.7% accurate barcode results, and direct access to the extracted data allow you to create a solution your users will love.
All common formats
User Guidance
Scan multiple codes
1-day integration
Fast & reliable
Key Requirements
Mobile Platform
- Web Browsers with WebAssembly support
- Android 5.0+: Chrome, Firefox, Edge
- iOS 11.0+: Safari (Chrome and Firefox as of iOS 14.4)
For more details about WebAssembly support please refer here.
Devices
- Rear-facing camera with autofocus (recommended)
- Front-facing camera with autofocus
Development Tool
- Any JavaScript IDE
- Works with all common frameworks, like Angular, React, as well as Vanilla (plain) JavaScript
Specific Notes for iOS Development
Please note that Chrome and Firefox on iOS use iOS WebKit rendering engine, and camera access was not supported until iOS 14.4. This was a restriction by Apple.
Useful links
Barcode Scanner SDK
Would you like to know more about our pricing?
Get in touch with us and receive more pricing details within a day.
Receive your pricingGetting Started with Scanbot JavaScript Barcode Scanner
Scanbot Web Barcode Scanner SDK is available as an npm package and also loadable via jsdelivr.
After the installation, first, you need to add a container element to your HTML file:
<div id="barcode-scanner-container"></div>
Then, you can easily start the JavaScript Barcode Scanner in your JavaScript app:
var barcodeScanner = await scanbotSDK.createBarcodeScanner({ containerId: 'barcode-scanner-container', onBarcodesDetected: onBarcodesDetected, });
You can configure the 1D and 2D barcode types that you want to recognize:
var barcodeScanner = await scanbotSDK.createBarcodeScanner({ containerId: 'barcode-scanner-container', … barcodeFormats: [ "AZTEC", "CODABAR", "CODE_39", "CODE_93", "CODE_128", "DATA_MATRIX", "EAN_8", "EAN_13", "ITF", "MAXICODE", "PDF_417", "QR_CODE", "RSS_14", "RSS_EXPANDED", "UPC_A", "UPC_E", "UPC_EAN_EXTENSION", "MSI_PLESSEY", ] });
Also, you can customize the UI style of your JavaScript Barcode Scanner:
var barcodeScanner = await scanbotSDK.createBarcodeScanner({ containerId: 'barcode-scanner-container', … style: { window: { aspectRatio: 1, paddingPropLeft: 0.5, borderColor: "white", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }, text: { color: "white", size: "0.9em", weight: 300, }, backgroundColor: "rgba(0, 0, 0, 0.7)", hint: "Please align the barcode or QR code in the frame" } });
Complete example projects
To get off to a flying start, check out our GitHub repository. There, you can find full example projects on React, Angular, and Plain JavaScript: https://github.com/doo/scanbot-sdk-example-web/
They demonstrate the integration of all API methods of the Scanbot Web Document Scanner and the Barcode Scanner SDK, such as 1D and 2D barcode scanning, document scanning, the cropping UI, image filters, PDF and TIFF rendering, the MRZ (machine-readable zones) scanner, and more.