Scan barcodes faster with the new Tabris.js barcode scanner plugin

Scanning barcodes is a very common task on mobile phones. If you want to read data from the physical world, there is a good chance that a barcode will provide this data. With the newly created Tabris.js plugin tabris-plugin-barcode-scanner this process is now even more efficient. To provide the fastest and most accurate detection rate the plugin uses AV foundation on iOS and Google Mobile Vision API on Android.

Barcode Scanner API

The plugin provides a Widget called BarcodeScannerView wich can be embedded into your layout hierarchy. Once the widget is part of your layout you can call start() on it to display the view of the camera and start scanning for barcodes. When a barcode is detected a detect event is fired with the data from the barcode as argument. The following snippet shows a practical example of the barcode scanner plugin.

let scanner = new esbarcodescanner.BarcodeScannerView({
  left: 0, right: 0, top: 0, bottom: 0
}).on('detect', (e) => console.log(`Detected ${e.format} code with data ${e.data}`))
  .on('error', (e) => console.log(e.error))
  .appendTo(tabris.ui.contentView);
scanner.start(['qr', 'ean13']);

Supported Barcodes

The scanner view continues to scan for barcodes as long as it is active. Therefore the scanner could fire multiple times for the same barcode. If you only need a “one-shoot” barcode scanner you should call stop() on the BarcodeScannerView when the first barcode has been detected and possibly dispose the widget.

The plugin provides support for a large number of barcodes both on iOS and Android. You can limit the detected barcodes to certain types if required. The following table shows the list of supported barcodes:

Wrap Up

The plugin is just getting started but we have seen some good adoption already. If you miss certain features or stumble upon an issue please don’t hesitate to open an issue on GitHub. Of course pull requests are also welcome. Happy scanning.

Get Started with Tabris.js

To try out Tabris.js

• Install the Tabris.js 2 developer app on your device
• Try out the examples bundled in this app
• Run your own code snippets from the playground, our online Tabris.js editor

To start developing real apps,

• Install the latest Tabris CLI on your machine: npm install -g tabris-cli
• Type tabris init in an empty directory – this will create a simple example app
• Type tabris serve and load it in the developer app

The documentation contains everything you need to know (tip: try the doc search). Beginners find a step-by-step guide in this ebook. If you have questions or comments, you’re also invited to join the community chat.