KB: Camera Barcode Scanning

Kiosk Browser uses the ZXing barcode scanning library which is an open source software suite for reading bar codes from various sources. It is licensed under the Apache License v2.0.

There are multiple ways to use the barcode scanner.

Barcode Scanning Keyboard
We have worked with the creators of a barcode scanning keyboard to provide a working solution to enable you to scan barcode data directly into input fields on any webpage, no coding required!
Just install the keyboard on the device and set it as the default input (this can be done by opening after installing). Once set you can tap into any input field and press the barcode scanner icon.


Barcode & QR code Keyboard on Google Play (by Nikola Antonov)





[Built In] Method 1
Scan directly from the barcode scanner icon.
To enable the icon go to Settings > Toolbar > tick Barcode Scanner.



This can also be invoked via JavaScript.

function openAndroidBarcodeScanner() {
    Android.openBarcodeScanner();
}

If the barcode data scanned contains a URL then it will automatically load this within Kiosk Browser. If the data is just a string i.e. a product code "9549548L". This data will be returned and appended to the end of the Barcode Redirect URL as specified in Settings > Toolbar. So if the redirect URL is http://www.android-kiosk.com/stock.php?productcode= the resulting URL after scanning would be http://www.android-kiosk.com/stock.php?productcode=9549548L.

Alternative method via URL variable %BARCODEDATA% (v2.5.9 or higher)

Consider a scenario where the barcode data needs to be placed elsewhere (not at the end of a url). In this instance you can use a URL such as: 

www.android-kiosk.com/scan/**%BARCODEDATA%**/moredata 

The end result would be:

www.android-kiosk.com/scan/**9549548L**/moredata


[Built In] Method 2
Via JavaScript with additional data
This method is essentially the same as above but allows additional data to be passed for the final result. In the example below you can see that "stockcheck.php?productcode=" is being passed as an additional parameter. This allows you more control over the resulting URL. If the Barcode Redirect URL is set to http://www.android-kiosk.com the resulting URL after scanning would be http://www.android-kiosk.com/stockcheck.php?productcode=9549548L.

openAndroidBarcodeScannerData('stockcheck.php?productcode=');
function openAndroidBarcodeScannerData(data) {
    Android.openBarcodeScanner(data);
}

[Built In] Method 3
Via JavaScript to fill an input field
This allows you to fill form fields with the barcode scanner where you have control of the page content. When calling the JavaScript function (as per below) you can pass the ID of an input field that would you like to be filled once a barcode has been successfully scanned. If you wish to monitor changes to this field you can attach jQuery event handlers to the input.

openAndroidBarcodeScannerInput('testinput');
function openAndroidBarcodeScannerInput(input) {
    Android.openBarcodeScannerInput(input);
}

[Built In] Method 4
Via JavaScript with callback
This allows you to handle the raw result of the barcode scan. After a successful scan Kiosk Browser sends the result to a JavaScript function barcodeScanResult(data).

openAndroidBarcodeScannerResultCallback();
function openAndroidBarcodeScannerResultCallback() {
    Android.openBarcodeScannerResultCallback(input);
}

function barcodeScanResult(data) {
	console.log("Result Data:" + data);
}

Supported Formats



JavaScript Examples
Examples can be found here.

Updated on: 11/03/2022