Native JS (zxing) scanner in SAPUI5

SAPUI5 has a module that allows you to scan Barcodes (1D, 2D) sap.ndc.BarcodeScanner, but it has a limitation: this module uses native library that is only available through the SAP Fiori Client (mobile application for Android/iOS).

If it’s needed to use such functionality in Web-browser, we have to use external JS-Modules for scan and decode the codes, such as:

*there are many open source project in github with such functionality, i will list only few of them

• QuaggaJS (1D Barcodes);
• Quirc (QR Codes);
• ZXing-JS (Multi code reader).

The last of them is best choice if you have to work with different formats (Barcodes, QR codes, 2D Codes (PDF417, DataMatrix …)) – that’s why I choosed this library to integrate it in my SAPUI5 Application.

ZXing features

GitHub repository

• Automatically detect the type of code and decode it;
• A large list of supported formats (EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14, QR, Data Matrix, PDF 417).

Adding to SAPUI5 App

1. Dowload the builded code from UNPKG (or add it to the dependency in package.json, but in this case you need to build the project from sources);
2. Place it in the project directory (for example, in the lib folder)
   
3. Add dependencies to manifest.json in sap.ui5.resources.js
   
4. Use zxing features! (global object ZXing)

Working with ZXing

To start the scanning process in the application, you will need:

• HTML Video element (for displaying a video stream from a device);
  
• ZXing initialization – create the decoder object – you can choose the mode: Barcode, QR Code, PDF417, MultiFormat, …;
  
• Select the video source (it can be one of the device camera) – use the method of ZXing listVideoInputDevices to get the list of available devices;
  
• Star searching and decoding – using decodeFromVideoDevice;
  

The process of analysis and decoding will be looped, if the format is recognized successfully, the “Scanned” callback will be called with the decoded text and code type {text: ‘String’, format: Number}.

Example of control

The best way to use ZXing in your SAPUI5 Application is create a custom control with all needed elements.

I created a example of such project GitHub

There can find the example application with custom control ExtScanner

(see “Readme.md” to get info about start and using this example)

Scan dialog

Business case

Often a lot of data is encoded in barcode, such as UII, Date of manafacture, Part number, but only one part is important (for example UII), in this case additional processing of the decoded data may be required to accurately determine the UII from the code.

Example – PDF417:

PDF-417 (Example)

There the 3 groups of data with UII (group stated with (S)), Manufacture Number (started with (21P)), Part Number (started with (1P)).

I add the special decoder wich can return just UII data for PDF417 code or RAW data – this special function can be added to control (see example).

Notes

As described in ZXing documentation – this library use BigInt to decode PDF417 but it isn’t supported in some browser (Safary for example).

It was important to use PDF417 in Safary Mobile Browser, that’s why I extended the version 0.15.2 of ZXing-js with external library JSBI

So, decoding of PDF417 works also in Safary in my example, but it’s not latest release of ZXing-js.

Best Regards,

Andrey