Modules:Camera Barcode Scanner

Contents 1 Introduction 1.1 Licenses 2 Installation 3 Configuration 4 Usage 5 Development 5.1 Change supported barcode types 5.2 Add Support to other Mobile Applications 5.2.1 Set scanner behavior 5.2.2 Register scanner popup 6 React POS 6.1 Configuration 6.1.1 Continued camera scan 6.1.2 Camera sound 6.2 UI

Introduction

This page describes how to install, configure and use the Camera Barcode Scanner module in the Web POS. This module lets Mobile Application use device's embedded cameras as a barcode scanner.

Licenses

• License: Commercial
• Category: Module

Installation

To use this functionality, the Camera Barcode Scanner module should be installed. Note that this module depends on Mobile Core module. In addition, in order to use this feature in Web POS, you also need to install the Camera Barcode Scanner in WebPOS module.

Configuration

Once installed both modules, by default all touchpoint types will have disabled the use of the device camera as scanner. To enable in a device type, as the Org Administrator, go to Application|Point of Sale|Channel - Touchpoint Type and edit the desired device type. In the Form view check the Use device camera to scan barcodes and save.

When entering the Web POS, if this device has at least one camera available, the Scan from Camera button will appear.

Usage

Once tapped the Scan from Camera button, a modal dialog should appear showing the camera (the environmental/back camera when possible) with an overlay. Once a barcode is detected, the modal should be closed with a beep sound. The Web POS should behave exactly as if its been scanned with a physical barcode scanner, or typing the code using the keyboard, so it will try to determine whether the barcode if for a printer, a product or a receipt.

Development

Change supported barcode types

By default, the scanner will try to detect EAN13, CODE128 and QR codes. To change the types to check, modify OB.OBCBS.BarcodeReader.supportedFormats. In this example, it will be overriden to support only EAN13 barcodes:

OB.OBCBS.BarcodeReader.supportedFormats = [ZXing.BarcodeFormat.EAN_13];

Note that this scanner uses ZXingJS underneath to detect the barcodes. Check their README to see all formats theys currently support.

Add Support to other Mobile Applications

The Camera Barcode Scanner module provides the basic infrastructure required to use the camera barcode scanner. It includes a modal popup of which behavior can be extended via handler functions and a Scan from Camera button ready to be embedded on your Mobile Application.

To implement the specific behavior of the camera barcode scanner in another mobile application, a module should be created that depends on your application and Camera Barcode Scanner module. See org.openbravo.retail.camerabarcodescanner.posterminal as a reference implementation.

Set scanner behavior

Once a barcode is detected, all functions included in OB.OBCBS.BarcodeReader.OnScanSuccessHandlers will be executed.

  OB.OBCBS.BarcodeReader.OnScanSuccessHandlers.push(function (code) {
    // Add your behavior when a barcode is detected here
  });
 
  OB.OBCBS.BarcodeReader.OnScanErrorHandlers.push(function (error) {
    // Add your behavior when the scanner popup fails here
  });

Register scanner popup

The barcode scanner popup needs to be registered in your application.

OB.UI.WindowView.registerPopup('your-mobile-app', {
  kind: 'OB.UI.OBCBS.CameraScanner.Modal',
  name: 'modalScanBarcode'
});

Finally, place the OB.UI.CBSPOS.CameraScanner.ScanFromCameraButton component in an appropiate place in your application and you're ready to use the scanner.

React POS

Configuration

Apart from the previous configuration, it is possible to set the continued scan functionality and the sound setting at terminal type level.

Continued camera scan

This feature makes the application to be always scanning in background.

Camera sound

Allows the user to set a setting to makes the camera to do a sound when it scans something

Depends on the config, this setting value could be set in the application

UI

It is also possible to show a popup with shows the camera streaming. This action could be launch by default in scan panel

Category: Retail