This example app demonstrates how to integrate the Scanbot Barcode Scanner SDK into your Capacitor app.
The Scanbot Barcode Scanner SDK is a simple and intuitive plugin that allows you to turn smartphones into fast and reliable barcode scanners.
The SDK utilizes your device's camera, which can be freely switched. You can also apply various filters to narrow down the results by barcode type or content, with regex pattern support to ensure you only capture the specific barcodes relevant to your application.
It operates entirely offline on the user's device and takes only 0.04 seconds to scan barcodes. Scans are accurate even under challenging conditions, including damaged, small, or distant barcodes and low-light environments.
The plugin can be integrated into your app within minutes and comes with Ready-To-Use UI components, which allow you to customize the barcode scanner to your needs.
💡 For more details about the Scanbot Barcode Scanner SDK for Capacitor, please check out our documentation.
-
NodeJS 18+ & npm
-
For Android apps:
- Android Studio Hedgehog | 2023.1.1+
- Android SDK (API Level 22+), Platforms and Developer Tools
- Android Gradle Plugin 8.4.0+ or Kotlin Plugin applied
-
For iOS apps:
- iOS 13+
- macOS with Xcode 15+
- Xcode Command Line Tools
- Homebrew
- Cocoapods
Please check the full requirements for Capacitor.
Install the node modules of this project:
npm install
Build the web assets and sync with the Capacitor native projects:
npm run build
npm run sync
Connect an Android or iOS device via USB and run the app by opening the respective projects, or via the terminal with these commands:
npm run android
npm run ios
You can read more about the Capacitor CLI commands at this link.
If you want to develop without Capacitor CLI commands, you can use VS Code together with the Ionic VS Code Extension. Read more about this here.
Note:Â Please make sure that you have configured the camera permissions accordingly.
The Scanbot Barcode Scanner SDK offers the following scan modes right out of the box in our ready-to-use UI:
This is the Barcode Scanner SDK's default scanning mode. It is optimized for detecting a single barcode and is easily configurable to your needs. You can show a confirmation screen that displays detected barcode data.
The barcode scanner can also be configured to scan multiple barcodes in succession (without closing the scanning screen every time), to capture multiple barcodes from the camera view at once, or to count the scanned items.
Given one or more barcodes, the Barcode Scanner SDK will visually highlight and scan the correct items for your users. It automatically selects the barcode with the right barcode value from your camera feed.
 |
 |
 |
|---|
The Scanbot Capacitor Barcode Scanner plugin includes an optional AR Overlay for all scanning modes. It provides real-time barcode highlighting, preview, and tap-to-select functionalities. This can, for example, be used to display in-view error messages.
Recognized barcodes are highlighted with a customizable frame and text, clearly distinguishing scanned from unscanned items. Users can select barcodes manually by tapping or instead rely on automatic selection.
The Scanbot Barcode Scanner SDK also supports still images, enabling barcode scanning from JPG and other image files. It supports single-image and multi-image detection and returns a list with the recognized barcodes.
The Scanbot Capacitor barcode scanner library supports all common 1D- or 2D barcode formats, such as QR codes, or Aztec Codes, as well as multiple postal symbologies, including:
| Barcode type | Barcode symbologies |
|---|---|
| 1D Barcodes | EAN, UPC, Code 128, GS1-128, Code 39, Codabar, ITF, Code 25, Code 32, Code 93, Code 11, MSI Plessey, Standard 2 of 5, IATA 2 of 5, Databar (RSS), GS1 Composite |
| 2D Barcodes | QR Code, Micro QR Code, Aztec Code, PDF417 Code, Data Matrix Code, GiroCode, NTIN Code, PPN, UDI, Royal Mail Mailmark, MaxiCode |
| Postal Symbologies | USPS Intelligent Mail (IMb), Royal Mail RM4SCC Barcode, Australia Post 4-State Customer Code, Japan Post 4-State Customer Code, KIX |
💡 Please visit our docs for a complete overview of the supported barcode symbologies.
The Scanbot Barcode Scanner SDK supports a variety of data parsers that extract structured information from 2D barcodes such as QR Codes and Data Matrix. These include parsers for documents such as driving licences (AAMVA), boarding passes, medical certificates, SEPA forms, Swiss QR codes and vCard business cards.
💡 Please refer to our documentation for a full list of supported data parsers.
Integrating the Scanbot Capacitor Barcode Scanner plugin into your Capacitor app takes just a few minutes, and our step-by-step guides make the process even easier.
💡 Our Ionic Capacitor Barcode Scanner tutorial walks you through the integration process step by step. Follow along to implement a powerful barcode scanning feature quickly.
Alternatively, check out our developer blog for a collection of in-depth tutorials, use cases, and best practices.
Need help integrating or testing our Barcode Scanner SDK? We offer free developer support via Slack, MS Teams, or email.
As a customer, you also get access to a dedicated support Slack or Microsoft Teams channel to talk directly to your Customer Success Manager and our engineers.
The barcode scanner example app will run for one minute per session without a license. After that, all functionalities and UI components will stop working.
To try the Barcode Scanner without the one-minute limit, you can request a free, no-strings-attached 7-day trial license.
Our pricing model is simple: Unlimited barcode scanning for a flat annual license fee, full support included. There are no tiers, usage charges, or extra fees. Contact our team to receive your quote.
Besides Capacitor, the Scanbot Barcode Scanner SDK is also available on: