Projects:Use Camera To Scan Barcodes/Specs
Contents |
Requirements
Background
The Openbravo POS can be run in a number of devices as long as they have a web browser available, from specialized devices to Desktop computers or smartphones or tablets. In the latter cases, they often have at least one camera available and this can be used as an alternative to a physical barcode scanner. Also, the barcode functionality can be extended to be used to connect the POS terminal to a specific printer by scanning a barcode placed near the printer.
Goals
Use the device camera as a barcode scanner
Some devices such as smartphones or tablets usually have integrated at least one camera and almost all of them supports auto-focus, which makes them suitable for barcode scanning via the camera. This feature can be added as an external module to incorporate this functionality to the POS Terminal
Enable camera barcode scanner support only to devices which support it
Not all available terminals should have the camera scanner available. This should be enabled per touchpoint type and in those devices where its disabled and/or where the camera is not supported (by a browser limitation or the user disabled permissions to use camera hardware), the barcode should not be shown.
Connect to printer via barcode
In addition to be able to scan products or tickets, it'd be convenient to be able to identify a printer using an unique string that can be represented as a barcode and use it to connect to a printer on the fly using the POS barcode scanner.
Portable to any Mobile Application
This functionality should be adaptable to Web POS or any Mobile application. So the core functionality should only depend on the Mobile Core Infrastructure.
Technologies required
Barcode scanner libraries
For this project, a library to use the camera hardware to detect a barcode in the client side is required. The following javascript libraries were considered based on the number of weekly downloads in npm, stars/forks in Github, license type and date of the last update, which indicates the activity of the project.
QuaggaJS
QuaggaJS is a popular javascript library for scanning barcodes in web applications. At the time of writing (April 2019), it has over 18k weekly downloads in npm, 3100 stars and 572 forks in Github. The main downside is that this project has few activity (last updated in 2017) and most importantly, although it supports several 1D barcode formats (EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 and CODABAR), it does not support 2d barcodes such as QRCode.
ZXing/Library
ZXing is a very popular library for scanning barcodes in Java/Android. ZXing/Library is a javascript project which aims to completely port their Java counterpart. It is not as popular as Quagga (180 stars, 90 forks on Github and 9122 weekly downloads in npm), and still does not support all formats the Java version does (currently reads EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14, QRCode and Data Matrix), but supports 2D barcodes and the project is more active (last version were released on March 2019).
Browser support
In order for the browser to access the camera devices, it needs to implement WebRTC which opens an API to detect and connect to audio/video devices. Nowadays, most modern browsers does support WebRTC except for a couple of exceptions worth mentioning for this project:
- In iOS devices, WebRTC support is included starting from iOS 11
- WebRTC is only supported by Safari in iOS. Other browsers in this platform uses WKWebView, which does not currently support WebRTC. For more info see [1]
UX/UI Considerations
As this feature can be used for a number of purposes, the scanner button should be placed in a easily accesible location. For this project, it is decided to locate the button inside the Scan tab panel.
This button should be hidden if scan from camera is not enabled for this touchpoint type or the camera device is not available.
Once tapped the button, a modal dialog should appear showing the camera (the environmental/back camera when possible) with an overlay. Once the library detects an barcode, the modal should be closed. Once detected a barcode, the POS should behave exactly as if its been scanned with a physical barcode scanner, or typing the code using the keyboard.
Configuration
Web POS
In order to use the scanner in the Web POS, the org.openbravo.retail.camerabarcodescanner module should be installed along the binding module org.openbravo.retail.camerabarcodescanner.posterminal. Once installed both modules, a new option Use device camera to scan barcodes will be available in the Touchpoint Type configuration. By checking this option, the scan from camera button in the POS will be available.
To associate an existing printer to a barcode, a new field barcode is available in Hardware Manager. The barcode attached to the printer should contain exactly the same text as the value of this field.
The following is the barcode entered in the screenshot above encoded as Code128:
The same but encoded as QRCode:
For this purpose it is recommended to use QRCodes as they can contain alphanumeric values (unlike EAN-13) and it is more compact and performs better with the camera scanner, specially with longer texts (compared to Code 128).