Barcode Scanning

Enable barcode scanning via the device camera using the provided JavaScript API. This guide will help you integrate it into your website and leverage AI/ML-enabled barcode search.

Setup

Import the JavaScript File

Include the JavaScript file in your HTML before using the barcode scanning functionalities. Use the following link to import the script:
```
<script src="path/to/wtn-barcode.js"></script>
```

Barcode Scanning Code Implementation

You can use the barcode scanning functionality in two ways: Plain JavaScript and ES5+ syntax.

Plain JavaScript:

const { Format, BarcodeScan } = WTN.Barcode;
 
BarcodeScan({
  formats: Format.QR_CODE, // optional
  onBarcodeSearch: (value) => {
    console.log(value);
  },
});

ES5+ Syntax:

import { Format, BarcodeScan } from "webtonative/barcode";
 
BarcodeScan({
  formats: Format.QR_CODE, // optional
  onBarcodeSearch: (value) => {
    console.log(value);
  },
});

Function Parameters

BarcodeScan: Call BarcodeScan to initiate barcode scanning from native apps.
formats (optional): If this parameter is not passed, it will attempt to scan all available barcode formats listed below. Use Format to specify which barcode formats to scan.
onBarcodeSearch: This callback function is executed when the barcode is successfully scanned. The scanned value is passed as an argument.

Supported Format Types

The following format types are supported by the API:

Format.ALL_FORMATS
Format.QR_CODE
Format.UNKNOWN
Format.CODE_128
Format.CODE_39
Format.CODE_93
Format.CODABAR
Format.EAN_13
Format.EAN_8
Format.ITF
Format.UPC_A
Format.PDF417
Format.AZTEC

Example Usage

Here is a complete example showing how to set up and use the barcode scanner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barcode Scanner</title>
  <script src="path/to/wtn-barcode.js"></script>
</head>
<body>
  <h1>Scan a Barcode</h1>
  <button id="scanButton">Start Scanning</button>
 
  <script>
    const { Format, BarcodeScan } = WTN.Barcode;
 
    document.getElementById('scanButton').addEventListener('click', () => {
      BarcodeScan({
        formats: Format.QR_CODE, // optional
        onBarcodeSearch: (value) => {
          console.log('Scanned value:', value);
          alert('Scanned value: ' + value);
        },
      });
    });
  </script>
</body>
</html>

This example includes a button to initiate the barcode scanning process. When a barcode is successfully scanned, the value is logged to the console and an alert is displayed with the scanned value.

App Shortcuts Touch ID and Fingerprint Authentication