Cordova Plugin Embedded Barcode Reader

Cordova plugin that allows barcode interaction from HTML for showing camera preview below or above the HTML.

Plugin architecture and some base code is based on https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview

Features

Start a barcode reader preview from HTML code.
Send the preview box to back of the HTML content.
Set a custom position for the barcode preview box.
Set a custom size for the preview box.
Maintain HTML interactivity.

Installation

Use any one of the installation methods listed below depending on which framework you use.

cordova plugin add https://github.com/CodifiLLC/cordova-plugin-embedded-barcode-reader.git

ionic plugin add https://github.com/CodifiLLC/cordova-plugin-embedded-barcode-reader.git

<plugin spec="https://github.com/CodifiLLC/cordova-plugin-embedded-barcode-reader.git" source="git" />

Methods

startCamera(options, [successCallback, errorCallback])

Starts the barcode preview instance.

Options: All options stated are optional and will default to values here

x - Defaults to 0
y - Defaults to 0
width - Defaults to window.screen.width
height - Defaults to window.screen.height
camera - See CAMERA_DIRECTION - Defaults to front camera/code>
toBack - Defaults to false - Set to true if you want your html in front of your preview

let options = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: EmbeddedBarcodeReader.CAMERA_DIRECTION.BACK,
  toBack: false
};

EmbeddedBarcodeReader.startCamera(options);

When setting the toBack to true, remember to add the style below on your app's HTML or body element:

html, body, .ion-app, .ion-content {
  background-color: transparent;
}

stopCamera([successCallback, errorCallback])

Stops the barcode preview instance.

EmbeddedBarcodeReader.stopCamera();

switchCamera([successCallback, errorCallback])

Switch between the rear camera and front camera, if available.

EmbeddedBarcodeReader.switchCamera();

show([successCallback, errorCallback])

Show the preview box.

EmbeddedBarcodeReader.show();

hide([successCallback, errorCallback])

Hide the preview box.

EmbeddedBarcodeReader.hide();

addBarcodeReadListener(options, successCallback, [errorCallback])

Adds a listener event for barcodes being read. You will need to a new listener in order to get back the barcodes. Everytime a barcode is read, the barcode result will be returned as a string to your callback.

EmbeddedBarcodeReader.addBarcodeReadListener(function(readBarcode){
  // Log the barcode
  console.log('We just read another barcode', readBarcode);
});

Note: the app will not report the same barcode via the callback if read back-to-back within 7 seconds.

Settings

CAMERA_DIRECTION

Camera direction settings:

Name	Type	Default
BACK	string	back
FRONT	string	front

Credits

Based on Cordova Camera Preview https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview