View source | Discuss this page | Page history | Printable version   

Modules:Camera Barcode Scanner



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.



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.


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.

Screenshot from 2019-04-16 08-35-12.png

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

POS with scan from camera.png


POS scan camera.png

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.


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


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



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



Retrieved from ""

This page has been accessed 1,940 times. This page was last modified on 6 September 2022, at 11:29. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.