A Developer’s Guide to Adding a Cordova Barcode Scanner

| Developers

SparkScan Inventory Management ISO

When integrating barcode scanning into your Cordova application, you must go beyond basic plugins and camera settings to make it efficient and effective for users. Implementing helpful user experience (UX) elements and tailoring performance for real-world use increases adoption rates and ensures productivity, customer and other business goals are met.

This blog explains the key UX and performance principles for successfully adding a Cordova barcode scanner to iOS and Android applications. It also includes a step-by-step tutorial for implementing these principles using the Scandit Cordova Barcode Scanner SDK.

Why UX matters for Cordova barcode scanning

There are numerous UX approaches to take when building your Cordova barcode scanning capability. If you don’t know how to invest your time to gain the biggest benefit, you may end up with unhappy users and constant fixes after release.

Getting navigation, interaction, and feedback right helps users do their jobs. Conversely, getting it wrong leads to frustration, failure, and complaints.

Key UX workflows for Cordova barcode scanning

Understanding the following UX workflows helps you build a Cordova barcode scanner that works for your users rather than holds them back.

  • The last thing users want to worry about is navigating complex menus or waiting for your Cordova barcode scanner plugin to start. Good UX requires a fast and seamless transition into scanning mode regardless of the device platform’s capabilities.
  • To improve ergonomics, allow tapping anywhere on the camera interface to start and resume scanning. If a button is preferred, make the touch area large enough for comfortable repeat use.
  • Assist with aiming by implementing an appropriately-sized viewfinder to indicate that scanning is live and indicate how far to hold the camera.
  • Restrict the scan area or use an aimer viewfinder when barcode are crowded.

Supporting different scan modes

Providing options to switch between scanning single and multiple barcodes help users work more efficiently when the number or configuration of barcodes varies (like a shipping warehouse or retail store):

  • Single scan: Users trigger scanning for every barcode, providing greater control over their scanning experience.
  • Continuous scan: Users trigger the scanner once and your app scans multiple barcodes without further interaction. This accelerates workflows in situations where there’s little risk of unwanted or unintentional scans.

Strong and clear feedback

Your app should provide immediate and unambiguous feedback on a barcode scan’s success or failure. Slow responses lead to user frustration, and unclear results may lead to missing or incomplete data on the backend.

A combination of feedback techniques can be used to help the user, such as:

  • Drawing a brush overlay at the location of the detected barcode on the camera view, confirming to the user that the intended item was scanned.
  • Playing sound, vibrating and haptic feedback on capture.

Get your Cordova barcode scanner plugin

Fast, accurate and reliable scanning performance.

Try for Free

Performance considerations for your Cordova barcode scanner

There are many open-source Cordova barcode scanner options, but they may not be the best choice for business-critical environments. Warehouses, retail stockrooms, and last-mile delivery have high employee performance goals. Low light, awkward scan angles, torn barcodes and poor internet connectivity can impede scanning success.

Here are some considerations for choosing your Cordova barcode scanner plugin for effective real-world operation.

1. Performance

Different device models and OS versions have different impacts on barcode scanning performance. Consider the following requirements to ensure scanning works effectively on your devices:

  • Accuracy: Barcode scanning for inventory management, asset tracking, and similar operations requires a Cordova plugin that users can rely on for extremely high levels of accuracy. Even a 95% success rate may not be good enough – you should look for greater than 99% success.
  • Speed: A Cordova barcode scanner that helps users capture and process barcodes fast means accelerated business operations.
  • Start-up time: To avoid frustrated users and slower workflows, your barcode scanner should support a “standby mode” that minimizes camera start-up delays between scans.
  • Field-of-view and distance: Scanners must handle barcodes on items of various sizes, shapes and distances from the camera.
  • Scanning barcodes in degraded conditions: A barcode may be torn, obscured, wrapped in plastic or moving – your library should work under all these scenarios.

2. Low-light environments

Lighting conditions in the real world vary widely between dark to brightly lit. Consider your stockrooms, back-of-store areas, or nighttime deliveries. Your chosen Cordova plugin should maintain speed and accuracy under these conditions.

3. Large device fleets with diverse models

Enterprises often have a diverse fleet of employee devices – especially in Bring-Your-Own-Device (BYOD) situations. These will have different camera specifications and processor architectures.

Your barcode scanner plugin must be designed to support efficient operations on different platforms. They could range from the latest multi-core smartphone to a legacy, resource-constrained device. We list key performance tests below to gauge how well your plugin performs.

The Scandit Barcode Scanner SDK is built on a C/C++ foundation, ensuring the core barcode scanning features are loaded efficiently in the background and consume minimal system resources.

4. Support for different development frameworks

For developers working across platforms, check that your barcode scanner component supports it. Scandit’s barcode scanning products are also available for Native iOS, Native Android, JavaScript, Xamarin (iOS, Android, and Forms), .NET (iOS and Android), React Native, Flutter, Capacitor, and Titanium.

Sparkscan Samsung device

Try the Scandit Barcode Scanner SDK for fast, user-focused scanning

The Scandit Barcode Scanner SDK, part of the Scandit Smart Data Capture Platform, makes it easy for you to integrate a high-performance Cordova barcode scanner plugin into your app. With just a few lines of code, you get advanced barcode scanning capabilities built on an extensible foundation that allows you to add unique UX features and capabilities.

The next sections explain how to implement a customizable Cordova barcode scanning interface in just a few steps.

Testing the Scandit Barcode Scanner SDK is Easy

Integrate with just a few lines of code or use our samples.

Try for Free

Get started with the Scandit Cordova Barcode Scanner SDK

Integrating Scandit’s Cordova plugins is simple: you don’t need Ionic or any additional toolkits to get started.

Follow these steps to add single barcode scanning to your Cordova app. You can also browse our Scandit Barcode Scanner SDK Cordova samples on GitHub.

If you get stuck, visit our Cordova documentation for detailed help, our API reference, and instructions on using advanced features like adjusting scan areas, text capture and augmented reality (AR).

The prerequisites for these steps are:

  • The latest stable version of Cordova, Node.js and npm.
  • A project with a minimum iOS deployment target of 11.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.

Although not covered here, the Scandit Barcode Scanner SDK also supports scanning multiple barcodes at once (batch scanning). The instructions for setting up and using this capability are located in our Batch Scanning and AR documentation.

1. Add the SDK to your project

We support adding the Scandit Barcode Scanner SDK’s 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

The Scandit Barcode Scanner SDK depends on WKWebView on iOS, so you’ll manually have to add this dependency if your project doesn’t use WKWebView yet.

> cordova plugin add cordova-plugin-wkwebview-engine
3. To add the Scandit Barcode Scanner SDK via npm or GitHub repo

To add our plugins via npm or git repo, you can 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 @<version>. You can also specify the version #<version> for GitHub dependencies.

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, you’ll need to add the following line to your config.xml file to specify the Swift version you’d like to use:

<platform name="ios">
  ...
  <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 the Scandit Barcode Scanner SDK, 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.

On Android, the Scandit Barcode Scanner SDK uses content providers to initialize the scanning capabilities properly. If your own content providers depend on the Scandit Barcode Scanner SDK, choose an initOrder lower than 10 to make sure the SDK 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, you must create a new data capture context. The context expects a valid Scandit Barcode Scanner SDK license key during construction.

const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

3. Configure the barcode scanning behavior

Barcode scanning is orchestrated by the BarcodeCapture data capture mode. This class is the main entry point for scanning barcodes. It is configured through BarcodeCaptureSettings and registers one or more listeners that are informed whenever new codes are recognized.

We set up barcode scanning for a small list of symbologies for this blog. Change this to the correct symbologies for your use case.

const settings = new Scandit.BarcodeCaptureSettings();
settings.enableSymbologies([
    Scandit.Symbology.Code128,
    Scandit.Symbology.Code39,
    Scandit.Symbology.QR,
    Scandit.Symbology.EAN8,
    Scandit.Symbology.UPCE,
    Scandit.Symbology.EAN13UPCA
  ]);

If you are not disabling barcode capture immediately after scanning the first code and do not want the same code to be scanned more than once, consider setting the BarcodeCaptureSettings.codeDuplicateFilter to around 500 or even -1.

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

const barcodeCapture = Scandit.BarcodeCapture.forContext(context, settings);

4. Register the barcode capture listener

To get informed whenever a new code has been recognized, add a BarcodeCaptureListener through BarcodeCapture.addListener() and implement the listener methods to suit your application’s needs.

Implement the BarcodeCaptureListener interface:

const listener = {
  didScan: (barcodeCapture, session) => {
    const recognizedBarcodes = session.newlyRecognizedBarcodes;
    // Do something with the barcodes
  }
};

Add the listener:

barcodeCapture.addListener(listener);

5. Use the built-in camera

The data capture context supports different frame sources to perform recognition. Most applications use the device’s built-in camera, such as a smartphone’s world-facing camera. This blog assumes you are using the built-in camera.

On iOS, the user must explicitly grant permission for each app to access cameras. Your app must display static messages to the user when the system asks for camera permission. To do this, include the NSCameraUsageDescription key in your app’s Info.plist file.

On Android, the user must explicitly grant permission for each app to access cameras. Your app must declare the use of the Camera permission in the AndroidManifest.xml file and request it at runtime so the user can grant or deny the permission. To do that, follow the Android guidelines to request the android.permission.CAMERA permission.

The built-in camera has recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following code shows how to get the recommended settings and create the camera from it:

const cameraSettings = Scandit.BarcodeCapture.recommendedCameraSettings;

// Depending on the use case further camera settings adjustments can be made here.

const camera = Scandit.Camera.default;

if (camera) {
  camera.applySettings(cameraSettings);
}

As the frame source is configurable, the data capture context must be told which frame source to use via a call to DataCaptureContext.setFrameSource():

context.setFrameSource(camera);

The camera is off by default and must be turned on by calling FrameSource.switchToDesiredState() with a value of FrameSourceState.On:

camera.switchToDesiredState(Scandit.FrameSourceState.On);

6. Use a Capture View to visualize the scan process

When using the built-in camera as the frame source, it helps the user to display the camera preview on the screen together with UI elements that guide the barcode capture process.

To do this, add a DataCaptureView to your view hierarchy:

const view = Scandit.DataCaptureView.forContext(context);
view.connectToElement(htmlElement);

To visualize the results of barcode scanning, add the following overlay:

const overlay = Scandit.BarcodeCaptureOverlay.withBarcodeCaptureForView(barcodeCapture, view);

7. Disable barcode capture

To disable barcode capture, such as when a barcode is recognized, set BarcodeCapture.isEnabled to false.

Disabling barcode capture stops the SDK from processing frames. However, the camera continues to stream frames until the user turns it off. If a frame is in the middle of processing, it is completely processed and delivers any results/callbacks to the registered listeners.

Testing barcode scanning performance

The best way to test a potential Cordova barcode scanning plugin is to run it using real-world scenarios. Whether you’re using the Scandit Barcode Scanner SDK or another barcode scanning library, 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.

Get your Cordova barcode scanner plugins now

Helpful UX and high performance are critical goals when selecting and implementing a Cordova barcode scanner. Fewer user frustrations and adaptability to growing business demands are far preferable to low adoption rates, bug reports, and unhappy business leaders.

Interested in how the Scandit Barcode Scanner SDK can be used to add intuitive, high-performance scanning to enterprise apps with minimal set-up time? Sign up for our free 30-day test SDK now.