A Developer’s Guide to Adding a JavaScript Barcode Scanner to Web Apps

When integrating a JavaScript barcode scanner library into your enterprise web app, you’ll need to consider user experience (UX) principles and performance measures in addition to basic image capture and processing.

The last thing you want is to waste a release cycle implementing features that don’t work under real-world conditions.

This blog explains the key UX and performance principles for successfully adding a barcode scanner to websites and web applications using JavaScript. It also includes a step-by-step tutorial for the Scandit SparkScan – a pre-built component that puts a minimalistic UI on top of any application.

If you want a head start, download and run our JavaScript barcode scanning samples on your development device now.

Why UX matters for web-based barcode scanning

Integrating a barcode scanner library for JavaScript is like trying to isolate and reproduce a memory leak. There are numerous approaches to take. If you don’t know how to invest your time in the right things, there may be wasted effort and user repercussions down the road.

Users need more than a good camera

Good UX is always a sign of a great web application, and barcode scanning is no different. Getting navigation, interaction, and feedback right helps users do their jobs, and gaps in these areas can lead to frustration, failures, and complaints.

The following video demonstrates how Scandit SparkScan enables users to swipe or tap a collapsed floating button to activate the scanner. It then provides a camera preview located in the top right of the user’s screen, positioned directly behind the hardware camera. This makes aiming easy.

Understanding the following UX workflows helps you build the best JavaScript barcode scanner that works for your users rather than hinders them.

Starting the scanner

Web users have enough on their plates without worrying about complex menu navigation or waiting for a barcode scanner to start. Good UX requires an easy and seamless transition into scanning mode on both mobile and desktop devices.

To ensure a fast and smooth transition into scanning mode, you’ll need to consider these application optimizations:

1. Locate all resources, including libraries, images, and configuration files, on a server under your control to minimize the impact of downtimes and Internet delays associated with third-party servers.
2. Compile in WebAssembly (Wasm), which uses a compact binary format (.wasm) that is highly efficient in size and load times, for faster downloads and reduced latency. (If using Scandit, this is handled by the JavaScript Barcode Scanner SDK.)
3. Ensure optimal image compression that balances processing overhead with scanning quality. (If using Scandit, this is handled by the JavaScript Barcode Scanner SDK.)
4. Pre-load libraries in the application background to avoid making the user wait for a response when they activate barcode scanning.

In-camera aiming assist

Aiming a device camera is a difficult task in situations where the barcode is located in hard-to-reach placements or mixed in with barcodes the user doesn’t want to scan. UX features that make the scanning process easier helps both user efficiency and satisfaction.

Two examples of features that help the user:

• A viewfinder to help users know when scanning is active and how to position the camera appropriately.
• Restricting the scan area to help capture barcodes in cluttered areas and improve performance on low-end devices.

Scandit software includes context-based AI scanning algorithms to ensure the correct barcode is scanned even with imprecise aiming. Known as Smart Scan Intention, these algorithms take contextual data, such as device movement and barcode characteristics, to anticipate and capture the right target barcode – leading up to a 100% reduction in unwanted scans.

Strong and clear feedback

Your web-based barcode scanner should provide immediate and unambiguous feedback on the success or failure of a scan. A slow response leads to user frustration and unclear results may lead to business risks.

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 to confirm that the intended item was scanned by the app.
• Playing audio and triggering haptic feedback when the scanner performs a capture successfully.

Supporting different scan modes

Options for scanning single and multiple barcodes help users work more efficiently in environments where the number or configuration of barcodes varies (like a shipping warehouse or retail store):

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

Which JavaScript barcode scanner SDK is best for web apps?

An open-source JavaScript barcode scanner library may not be the best choice for business-critical environments like warehouses, retail stockrooms, and last-mile delivery. While open source offers basic scanning features and easy access to code, the tradeoff comes when users try to scan in real-world conditions. Like any web app, performance is as much about your chosen library as the code you write around it.

Here are some considerations to think about when choosing your JavaScript barcode scanner API for web applications.

1. Performance

Whether deployed on mobile or desktop, you should include the following performance requirements in your decision process:

• Accuracy: Barcode scanning for inventory management, asset tracking, quality control, and similar operations requires a JavaScript library that the user can rely on to scan barcodes with an extremely high level of accuracy. This means capturing the right data on every scan and minimizing the occurrence of unwanted scans. Even a 95% success rate is unlikely to be good enough — you should be looking for greater than 99% success.
• Speed: A barcode scanner JavaScript library that helps users capture and process barcodes fast means accelerated business operations.
• Multi-modal data capture: Libraries supporting this feature can extract barcode and text data from labels simultaneously, eliminating the delays and errors associated with sequential scans.
• Camera start-up time: Depending on the device, the transition between the camera’s standby and on states can be between 50% to 90% faster than the transition between off and on. To minimize delays, your barcode scanning library should support a “standby mode” that you can take advantage of to avoid frustrated users.
• Scanning barcodes in degraded conditions: A barcode may be under low light, torn, obscured, wrapped in plastic, or in motion — your library should be able to handle all these scenarios.
• Field-of-view and distance: Scanners must handle barcodes on items of various sizes, shapes, and distances from the camera. The video below shows how Scandit software allows users to scan tiny electronic shelf labels (ESL) comfortably from far away without compromising speed or accuracy.

To see the features that matter most when tuning performance, read our blog on optimizing barcode scanning app performance. Verifying that the library’s API supports these features gives you options for improving accuracy and speed.

This detailed developer guide on how to measure barcode scanning performance also takes you through the key factors for conducting systematic, use-case-based testing to determine how your app meets business and user requirements.

2. Device support

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 library must be architected and designed for the utmost efficiency, to support operation on platforms ranging from the latest smartphone to legacy, resource-constrained hardware. We list key performance tests below to gauge how well your library performs.

The Scandit JavaScript Barcode Scanner SDK is built on a C/C++ foundation, ensuring that the core barcode scanning features are loaded efficiently in the background and consume minimal system resources. You can see the system requirements for the SparkScan pre-built component here and test it out now using our Javascript List Building code sample.

3. Support for different development frameworks

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

4. Availability of advanced features

As your users integrate barcode scanning into business functions, they often ask for ways to do more. It could be tweaks to the user interface to match individual needs or brand-new functions to squeeze faster cycle times across teams. Choosing libraries that go beyond basic features means you don’t have to change much to satisfy future needs.

Scandit offers advanced features built for enterprises of any size, including:

• Smart Label Capture to read barcodes and printed text simultaneously, making complex data entry up to 7 times faster for labels containing items such as serial numbers, weights, and expiry dates.
• Batch scanning with MatrixScan, to scan multiple barcodes at once to accelerate operations and reduce user effort.
• Augmented reality (AR) with MatrixScan Find, to help workers and customers find items with minimal effort.

5. Support

Business-level scanning software requires enterprise-level support, including rich documentation, code samples, regular software updates, and help from technical experts.

Scandit’s enterprise-level success team partners with you from trial evaluation to day-to-day operations, ensuring barcode scanning software and operations are optimized and reliable for your business.

6. Security and privacy practices

Your barcode scanner library likely has access to device features and user data, requiring strong security and privacy measures. Additionally, your library must meet your organization’s policies and compliance requirements for procured software.

Scandit follows a security by design philosophy, where you retain complete control over data collection and processing. From a development perspective, this means:

• All image processing is performed on the device to ensure confidentiality and high availability of scanning.
• 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.

How do I create a barcode scanner for the web?

SparkScan gives you an easy-to-deploy interface with pre-built, optimized barcode scanning and a minimalistic UI that floats on top of any app. It’s the fastest way to integrate JavaScript barcode scanner capabilities into web applications and e-commerce platforms that include SAP/hybris, Magento, and Demandware.

SparkScan’s capabilities are built upon well-researched UX principles and optimized through feedback from thousands of customers across various environments. Its key feature is a pre-built scanning interface that floats on top of any web app, reducing your development time and solving many common scanning pitfalls for you.

The scanning interface consists of a small camera preview window and a large, moveable, semi-transparent trigger button that can be dragged to the most ergonomic position. When not in use, the preview button disappears and the trigger button collapses to occupy minimum space.

The next sections explain how to implement a customizable web-based barcode scanning interface in just a few steps with SparkScan.

Get started with SparkScan for the web

The fastest way to see if SparkScan will work for you is to run our JavaScript List Building sample on your desktop or development device. This sample provides a dummy app to scan into, together with a basic scanning interface, including a capture button and camera preview.

When run, the sample application looks similar to this:

The prerequisites for these steps are:

• The ListBuildingSample added to your IDE’s workspace. If you don’t have an IDE handy, you can run the sample now in StackBlitz.
• A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

1. Add the Scandit Data Capture SDK license key to your project

To run the application, you must add the Scandit Data Capture SDK license key to the project. In the sample app, you can do this in two ways:

Add an environment variable

1. Open .env.example in an editor and insert your license key after SCANDIT_LICENSE_KEY=.
2. Save and rename the file to .env .

Add programmatically

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Insert your license key between the quotation marks after licenseKey:.

2. Run the sample app

To test that your license key works and the app runs, build and deploy the application onto your target device. If you’re using StackBlitz, the app should run automatically once you update the license key.

Once running, follow these steps to capture barcodes using your device’s camera:

3. Change supported symbologies

The symbologies your app supports are configured through SparkScanSettings. The sample app is configured to support EAN-13/UPC-12/UPC-A and Code 128 symbologies.

To change this to the symbologies for your use case:

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Modify the call to enableSymbologies() as follows:
   this.sparkScanSettings.enableSymbologies([Symbology.EAN13UPCA, Symbology.Code128, Symbology.QR, Symbology.Code39]);

Here, we’ve added support for QR codes and Code 39.

4. Change the scanning mode

SparkScan supports two scanning modes, and a UI control for the user to switch between them. The two modes are:

• Default mode: Ideal for close-range and fast-paced scanning. This mode displays a small camera preview to aid with aiming.
• Target mode: Ideal for scanning scenarios where precision is important. This mode adds an aiming crosshair to the preview, to help users select the barcode to scan. This mode is useful when multiple barcodes are in view, such as for long-range scanning of items on a shelf.

The mode is set using SparkScanViewSettings. To set the scanning mode in the sample app without allowing the user to choose:

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Navigate to where SparkScanViewSettings is declared:
   this.sparkScanViewSettings = new SparkScanViewSettings();
3. Add this line to change the scanning mode from default to target mode:
   this.sparkScanViewSettings.defaultScanningMode = new SparkScanScanningModeTarget(SparkScanScanningBehavior.Single, SparkScanPreviewBehavior.Default);

To give the user the ability to toggle between scanning modes:

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Navigate to where SparkScanView is declared:
   this.sparkScanView = SparkScanView.forElement( document.body, this.dataCaptureContext, this.sparkScan, this.sparkScanViewSettings );
3. Add this line to make the target mode button visible to the user:
   this.sparkScanView.targetModeButtonVisible = true;

5. Customize the user interface

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

You can customize many aspects of the default SparkScan UI and UX to suit your needs and use cases. These customizations include the colors of all items (i.e., icons, buttons, toolbar), trigger button icon, size of the preview window, and more.

The graphic below shows three different examples of how colors, positions, and sizes can be customized to fit different apps.

The following steps explain how to change different UI elements in the sample app.

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Navigate to where SparkScanView is declared:

   this.sparkScanView = SparkScanView.forElement
       document.body,
       this.dataCaptureContext,
       this.sparkScan,
       this.sparkScanViewSettings
   );

3. To change the color of the trigger button background and its animation (the pulsing effect shown when the scanner is active), add the following lines. Here, hex values are used to specify different shades of blue.

   this.sparkScanView.triggerButtonExpandedColor = Color.fromHex("#123768"); this.sparkScanView.triggerButtonAnimationColor = Color.fromHex("#59D3DE");

4. To change the toolbar background color, add:
   this.sparkScanView.toolbarBackgroundColor = Color.fromHex("#01AAA7");
5. To change the size of the camera preview, navigate to where SparkScanViewSettings is declared:
   this.sparkScanViewSettings = new SparkScanViewSettings();
6. Add this line to change the camera preview from its default smaller size to a larger window:
   this.sparkScanViewSettings.defaultMiniPreviewSize = SparkScanMiniPreviewSize.Expanded;

6. Add error feedback

To show an error message when scanning specific barcodes, such as those already added to an existing list, you can customize SparkScan’s error feedback prompt.The following steps explain how to add an error message to the sample app when the user scans a specific barcode number.

1. Open /src/app/presenter.ts and navigate to the getFeedbackForBarcode() method.
2. Change the first if statement from this:
   if (barcode.data === "5901234123457") { return new SparkScanBarcodeErrorFeedback("Barcode rejected.", 60_000, Color.fromHex("#FF0000")); }
   to use a barcode number you have and set additional feedback like this:
   if (barcode.data === "0059749979610") { return new SparkScanBarcodeErrorFeedback("Barcode is incorrect.", 60_000, Color.fromHex("#FF0000"), new Brush(Color.fromHex("#00FFFF"), Color.fromHex("#FFFFFF"),1)); }

The method’s parameters are:

• message: The error message to display when a wrong barcode is captured.
• resumeCapturingDelay: The time interval after which to resume the capture process, in milliseconds.
• visualFeedbackColor: The color to flash the screen upon scanning the wrong barcode, set using the Color class.
• brush: The color of the solid shape laid over the barcode to indicate that it was rejected, set using the Color class.

The method also has a parameter to emit a sound and vibrate the device when it is called.

With these basics in place, you’re ready to add barcode scanning to your own app!

How to test barcode scanning performance on the web

The best way to test a potential JavaScript barcode scanning API is to run it using real-world scenarios. Whether you’re using SparkScan or another barcode scanning library, here are several performance-testing questions to ask:

• Is there clear guidance and feedback to foster a smooth workflow rather than confuse users?
• Can you scan barcodes in different orientations, such as upside down and sideways? Flip the device upside down to see how the scanner performs.
• Can you scan barcodes with reflections and glare?
• Can you scan barcodes at a distance? Are you able to zoom in if needed?
• Do you receive scanning feedback in loud environments and while wearing headphones?

You can also use our barcodes sample sheet for quick evaluation. For detailed performance testing explanations and procedures, read this developer guide on how to measure barcode scanning performance.

Your JavaScript barcode scanner is more than just a technical choice

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

Next: Dive deeper into how to make a barcode scanning app performant →