A Developer’s Guide to Adding a Cordova Barcode Scanner

In 2026, the optimal way to add an Apache Cordova barcode scanner is to use an AI coding tool with barcode scanning Agent Skills published by a recognized vendor of barcode scanner plugins. With a few prompts, you get the ideal solution for your use case and physical scanning environment without lengthy evaluation or customization.

This tutorial explains how to add barcode scanning to a Cordova app using your AI coding assistant and Scandit Agent Skills. We’ve also included instructions for manually integrating a barcode scanning plugin and a comparison between Scandit and popular Cordova barcode scanning plugins.

How do I use AI to add a barcode scanner for Apache Cordova?

To add a Cordova barcode scanner using AI, invoke barcode scanning Agent Skills through your AI coding tool. Once the Agent Skills create the optimal code, test your new features and performance under real-world conditions.

The key to avoiding barcode scanning issues is getting navigation, interaction, and feedback right for your workflows. Your app should help users do their jobs and ensure accurate data is entered into your system. Anything less leads to frustration, failure, and downstream business issues.

Domain-specific Agent Skills eliminate development guesswork by creating HTML, CSS, and JavaScript code that works in any barcode scanning environment. Rather than forcing users to compensate for damaged labels, awkward label positions, or multiple barcodes, Agent Skills picks the right Cordova plugin features and customizations for you.

Agent Skills also help you integrate barcode scanning features into Cordova’s aging plugin ecosystem by mapping legacy code to modern APIs and automating plugin maintenance. AI eliminates much of the manual research and development required to keep Cordova applications up to date, freeing up your time to focus on higher-value work.

Scandit Agent Skills bring 15 years of barcode, label, and ID scanning expertise directly into any AI coding tool, grounded by thousands of Scandit SDK deployments in various industries, facilities, and user types. Based on the Agent Skills Open Standard, they autonomously pick the optimal product and framework, customize workflows and UI, and generate production-ready application code.

Here’s how you can use your AI coding assistant and Scandit’s Agent Skills to add production-ready barcode scanning code to your Cordova app.

1. Add production-ready barcode scanning code to your Cordova project

1. Install Scandit Agent Skills by running the following command in your project directory. It automatically detects the supported coding tool you have installed and adds the Scandit plugin to each. (Re-run it to update.)

npx plugins add scandit/skills 

Prefer to set it up yourself? Manual installation steps for each AI coding assistant →

2. Using your AI coding tool, describe your use case in plain language. More detail is better, including photos, such as the barcodes you want to scan. The Agent Skill will ask for more information and a Scandit license key, if necessary.

Here is an example prompt to add barcode scanning to an existing Cordova inventory app:

In this Cordova app, users currently add items to the inventory by typing in barcodes manually. Add camera-based barcode scanning to this flow.

- Use /sparkscan-cordova, with a floating scan button.

- A scan looks up the item in existing inventory and adds it to the list, exactly like manual entry does. If the barcode isn't found, prompt to add it.

- Keep manual entry as is. Scanning is an additional input.

- Enable EAN-13, UPC-A, Code 128, and QR.

- Match the scanning UI to the app's design system.

We call the sparkscan-cordova skill explicitly, as it’s the fastest way to get a reliable barcode scanning experience, including all of Scandit’s AI barcode scanning features.

3. If you didn’t invoke a specific skill, the data-capture-sdk product-picker skill recommends the appropriate Scandit product and framework combination (e.g., SparkScan, BarcodeCapture, MatrixScan AR, MatrixScan Batch, MatrixScan Count, Smart Label Capture, etc.).

4. The matching product-and-framework skill (e.g., sparkscan-cordova) autonomously integrates barcode scanner code into your Cordova project.

5. If needed, use additional prompts to customize workflows, the user interface, data manipulation, and error handling, and to integrate with your backend system.

6. Review the generated code and test against production workflows. If changes are required, use your AI coding tool and Scandit Agent Skills to autonomously update the code.

2. Test barcode scanning performance in Apache Cordova

The best way to test a potential Cordova barcode scanning plugin is to run it using real-world scenarios. Whether you’re using Scandit Agent Skills or another barcode scanning plugin, here are several performance-testing questions to ask:

• Is there clear guidance to foster a smooth workflow and instant feedback to avoid user confusion?
• Can you scan barcodes in different orientations, such as upside down and sideways? If you flip the device upside down, can you still scan easily and successfully?
• Can you scan barcodes with reflections and glare?
• Can you scan barcodes at a distance? Are you able to zoom in and capture barcodes if needed?
• Do you receive scanning feedback in loud environments and while wearing headphones?

You can also use our sample sheet of barcodes to evaluate your app’s performance quickly and find out more about how to measure barcode scanning performance in our in-depth best practice guide.

START BARCODE SCANNING WITH CORDOVA

Add production-ready barcode scanning fast with Scandit Agent Skills

Try for free

How do I build a Cordova barcode scanner manually?

To build an Apache Cordova barcode scanner manually:

1. Choose the appropriate barcode scanner plugin.
2. Configure barcode symbology support for your use cases.
3. Customize the UI to suit your workflows and branding.
4. Test barcode scanning under real-world conditions.

Using a pre-built barcode scanning component, such as Scandit SparkScan, solves many feature and integration challenges, reducing timelines and frustration. With SparkScan, you get:

• AI-powered scanning to reduce unwanted scans by up to 100% and get a 0% false positive rate for all major barcodes.
• High-speed scanning for any environment, including data-dense codes and tiny, torn, damaged, curved, and shiny barcodes.
• Rapid decoding of barcodes even at long range, in low light, or at extreme angles.
• UI elements to streamline scanning tasks, including a shutter button and camera preview that floats on top of any Cordova app.
• Customizable colors, sizes, and positions of UI elements to fit your app’s existing UI and branding.

SparkScan’s trigger button comes with a semi-transparent background and lets users drag it to their preferred position. When not in use, the trigger button collapses, and the camera preview disappears to free up screen real estate.

You can also browse our Cordova samples on GitHub.

If you get stuck, visit our Cordova documentation for detailed help, our API reference, and instructions for deploying features like multiple barcode scanning, text capture, and augmented reality (AR).

The prerequisites for these steps are:

• The latest stable version of Apache Cordova, Node.js, and npm.
• A project with a minimum iOS deployment target of 15.0 or higher; or an Android project with target SDK version 23 (Android 6, Marshmallow) or higher.
• A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

1. Add the SparkScan SDK to your project

We support adding our Cordova plugins to your project in two ways. The simplest way is to use npm. Alternatively, you can manually download the plugins and add them to your Cordova project.

You should always add the scandit-cordova-datacapture-core plugin first, as all other plugins depend on it.

1. If you don’t have an existing Cordova project, create a new project

> cordova create helloscandit --id "com.scandit.helloscandit"

> cd helloscandit

> cordova platform add [ios | android]

2. For iOS, add dependencies

SparkScan depends on WKWebView on iOS. If you’re using Cordova-iOS versions 4 or 5, you must add this dependency if your project doesn’t use WKWebView yet:

> cordova plugin add cordova-plugin-wkwebview-engine

If you’re using newer versions of Cordova-iOS, this step isn’t required as WKWebView is the default.

3. To add the Scandit Barcode Scanner SDK via npm or GitHub repo

To add our plugins via npm or GitHub repo, run these commands from your project’s root folder. In the following snippet, we’re adding ScanditBarcodeCapture API.

# npm package

cordova plugin add scandit-cordova-datacapture-core

cordova plugin add scandit-cordova-datacapture-barcode

# git repo

cordova plugin add https://github.com/Scandit/scandit-cordova-datacapture-core.git

cordova plugin add https://github.com/Scandit/scandit-cordova-datacapture-barcode.git

For npm dependencies, you can also specify a version using @<version>. You can also specify the version using #<version>.

4. To add the Scandit Barcode Scanner SDK manually

After you download the archive containing all the plugins here, unzip the archive. It includes the available Cordova plugins, including the scandit-cordova-datacapture-core plugin that all other plugins depend on.

Use the Cordova CLI to add the plugin(s) to your already existing project:

cordova plugin add <path to scandit-cordova-datacapture-core plugin>

cordova plugin add <path to scandit-cordova-datacapture-barcode plugin>

For iOS, if your project is not yet configured to use Swift, add the following line to your config.xml file to specify the Swift version you’d like to use:

<platform name="ios">

  ...

<preference name="deployment-target" value="15.0" />  

<preference name="SwiftVersion" value="5" />

  ...

</platform>

To update plugins, follow Cordova best practices and remove the plugins before adding the new versions:

cordova plugin remove <id of the plugin being updated>

cordova plugin add <local path, id or GitHub repo url of the plugin being updated>

5. Additional steps

When using SparkScan, you must set the camera as the frame source for various capture modes. The plugins handle the camera permissions, so you don’t need to specify anything explicitly.

For iOS, Cordova uses CocoaPods to manage native dependencies. You'll need to set up Scandit's private CocoaPods repository:

# Add Scandit's private CocoaPods repository (one-time setup)

pod repo add scandit-private-specs https://github.com/Scandit/scandit-cocoapods-specs.git

After adding plugins, build your iOS project to install the CocoaPods dependencies:

cordova build ios

On Android, SparkScan uses content providers to initialize the scanning capabilities properly. If your own content providers depend on SparkScan, choose an initOrder lower than 10 to make sure the library is ready first. If not specified, initOrder is zero by default and you have nothing to worry about. For more details, check the official Android <provider> documentation.

2. Create a new Data Capture Context instance

To add capture capabilities to your application, initialize the Data Capture Context with a valid Scandit Barcode Scanner SDK license key.

DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --');

3. Configure the SparkScan Mode

The SparkScan Mode is configured through SparkScanSettings, allowing you to set the supported symbologies and register the listeners that are informed whenever a new barcode is scanned.

For this blog, we set up SparkScan for scanning EAN13 codes. Change this to the symbologies for your use case (for example, Code 128, Code 39, or QR code).

const settings = new Scandit.SparkScanSettings();

settings.enableSymbologies([Symbology.EAN13UPCA]);

Next, create a SparkScan instance with the settings initialized in the previous step:

const sparkScan = Scandit.SparkScan.forSettings(settings);

4. Setup the SparkScan View

The SparkScan built-in user interface includes a minimalistic camera preview and scanning UI elements. These guide the user through the scanning process.

The SparkScanView appearance can be customized through SparkScanViewSettings.

const viewSettings = new Scandit.SparkScanViewSettings();

// setup the desired appearance settings by updating the fields in the object above

Adding a SparkScanView automatically adds the scanning interface (camera preview and scanning UI elements) to your Cordova application.

See SparkScan Workflow Options for how to change the scanning mode, set camera preview behavior, and set the scanning behavior to either single scan or continuous scan.

Next, add a SparkScan View to your view hierarchy by constructing a new SparkScan view. The SparkScan view is automatically added to the provided parentView:

const sparkScanView = Scandit.SparkScanView.forContext(DataCaptureContext.sharedInstance, sparkScan, viewSettings);

Additionally, call SparkScanView.stopScanning() in your app state handling logic. You have to call this for SparkScanView to function correctly.

componentWillUnmount() {
  sparkScanView.stopScanning();
}

handleAppStateChange = async (nextAppState) => {
  if (nextAppState.match(/inactive|background/)) {
    sparkScanView.stopScanning();
  }
}

5. Register the listener to be informed when a new barcode is scanned

To keep track of the scanned barcodes, implement the SparkScanListener interface and register the listener to the SparkScan mode.

// Register a listener object to monitor the spark scan session.
const listener = {
  didScan: (sparkScan, session, getFrameData) => {
  // Gather the recognized barcode
    const barcode = session.newlyRecognizedBarcodes[0];
    // Handle the barcode
  },
};
sparkScan.addListener(listener);

The app calls SparkScanListener.didScan() whenever a new barcode is scanned. This result is retrieved from the first object in the provided barcodes list: SparkScanSession.newlyRecognizedBarcode. This list only contains one barcode entry.

6. Customize the scanning UI with advanced configurations

You can customize SparkScan’s UI and UX using advanced configurations. For example, you can change the colors of UI elements (i.e., icons, buttons, toolbar), the trigger button icon, the preview window’s default size, and more.

The following graphic illustrates the different ways you can adjust colors, positions, and sizes to suit different UX requirements.

Integrate with just a few prompts using Scandit Agent Skills

Try for free

How Scandit supports Cordova barcode scanning

Scandit’s Cordova Barcode Scanner SDK is an AI-powered capture engine and Agent Skills knowledge base that adapts to any workflow and edge case. Proven across hundreds of billions of scans on many device types and frameworks, our software scans the right code every time, regardless of label or environmental condition.

Scandit’s performance

Here’s what you get with the Scandit Cordova Barcode Scanner SDK:

• Zero false positives for all major barcode symbologies.
• Greater than 99% accuracy for common barcode symbologies.
• Decode speeds of 480 scans per minute, faster than human perception.
• Reliable barcode scanning under less-than-ideal conditions: tiny, torn, damaged, curved, or shiny barcodes, long scan ranges, low light, and extreme angles.
• Successful captures with camera resolutions as low as 240x320 pixels and barcode resolutions as low as 0.5 pixels per thin barcode element.

The Scandit Vision AI Engine is the intelligence behind the Scandit Smart Data Capture Platform, which powers our barcode, ID, and label scanning, as well as ShelfView products. Additionally, the Scandit Cordova Barcode Scanner SDK is built on a C/C++ foundation, ensuring core features load efficiently in the background and consume minimal system resources.

Framework support

The Scandit Cordova Barcode Scanner SDK supports Ionic, Adobe PhoneGap, and other Cordova frameworks. Other Scandit barcode scanning SDKs are available for Native iOS, Native Android, JavaScript, Xamarin, React Native, Flutter, .NET (iOS/Android and MAUI), Capacitor, and Titanium.

Security and privacy

Scandit takes a security by design approach to all software, giving you complete control over data collection and processing. This means:

• All image processing happens on the device to ensure scanning confidentiality and high availability.
• Any data you choose to share with Scandit is encrypted during transit and at rest.
• Scandit is ISO 27001:2022 Certified and compliant with applicable privacy regulations, including GDPR and CCPA.

For a complete barcode scanner SDK evaluation kit, read our guide to choosing the best barcode scanner SDK for your app.

How does Scandit compare with ML Kit and ZXing for Cordova barcode scanning?

Here’s a table showing how we believe Scandit compares with the free ML Kit and ZXing barcode scanning libraries for Cordova apps. The versions compared are current as of July 2026, with ZXing in maintenance mode since 2019.

In summary, choose Scandit for production apps that require native Cordova support, zero false positives, pre-built workflows, AI scanning features, and enterprise-grade support SLAs. Use ML Kit when you need the additional capabilities of Google’s machine vision APIs. Use ZXing only when its maintenance status and features fit your risk profile.

Product features

*According to the ZXing documentation, it detects multiple barcodes by repeatedly decoding portions of the image. After one barcode is found, the areas left, above, right, and below it are scanned recursively.

**The Scandit SDK detects multiple barcodes in full-frame images in real-time, and tracks their positions as they move in and out of frame.

Security and compliance

These results are based on side-by-side feature comparisons in April 2025 (ML Kit) and December 2025 (ZXing). For a deeper comparison between Scandit and these libraries, including performance testing results, read our ML Kit Barcode Scanner vs. Scandit and ZXing Barcode Scanner vs. Scandit blogs.

Your Cordova barcode scanner is more than just a technical choice

Helpful UX and high performance are critical goals when selecting a Cordova barcode scanner, but now you must consider support for AI tools. By leveraging barcode scanning Agent Skills, you will reduce user frustration and gain adaptability to any business demand.

Don't underestimate how much the quality of your scanning technology shapes everything downstream. Posting volume, data accuracy, partner adoption, shopper experience, partner ROI, it all connects back to how fast and reliably items get listed.

Yixin Zhu, VP of Engineering, Flashfood