Getting Started

The platform currently supports the following use cases:

  1. IDs: Documents with MRZ, AT/DE/UK Driving Licenses, German ID front side, eCard, Identification document detection, Card Detection

  2. Meter Values: For Analog Meters, Digital Meters and Dial Meters

  3. Barcodes: 1D, 2D and Stacked Linear Barcodes

  4. Serial Numbers: Vehicle Identification Number (VIN), Shipping Container, Universal Serial Number Scanner

  5. License Plates: For all European Countries and the US

  6. Tires: Tire Size Specifications, Tire ID, Tire Identification Number (TIN)

The license included in the Web SDK repository only allows running on 127.0.0.1. Use a HTTPS capable web server when hosting it otherwise the Web SDK does not work. Don’t forget to add 'https://' if you are testing the Web SDK.

Web SDK Requirements

  • Recommended are devices released after 2017 (iOS 10 or above, Android 7 or above)

  • Recommended Camera: 1080p video camera

  • Recommended CPU: 2 GHz or more

  • Recommended Browsers: Android - Chrome (latest), iOS - Safari (latest)

  • Not all view configurations are supported

The Web SDK Repository

If you would rather like to jump into some code than to walk through a Quick Start Guide, a good starting point for development with the Web SDK, is to download the Web SDK Repository.

It includes the following:

  • anyline.js: Main lib to self-host Web SDK

  • anylinejs: Contains the files needed to self-host the Web SDK

  • demo: Contains Web SDK implementation examples

  • LICENSE: The Third Party License Agreements

  • README: Information about the repository

Not included in the bundle are the Example Sheets with testing material. They can be downloaded here: Example Sheets

API documentation

https://js.anyline.com/release/42.4.0/docs/index.html

Web SDK Quick Start Guide

In this guide, we will show you how to use the Web SDK. The Web SDK enables you to scan without an online backend. The Web SDK has to be served from a web server that supports HTTPS. This guide focuses on presets. If you want to configure the plugins manually visit this site: configurations

Generating a License

To run the Web SDK on your website, you require a license key.

In order to create a license key, you first have to identify the Bundle Identifier to use. For the Web SDK the Bundle Identifier is the name of the domain it is hosted on. For example to run the Web SDK on “anyline.com”, you require a license key with the Bundle Identifier “anyline.com”. If you want to use it on "scan.anyline.com", you require a license key with the Bundle Identifier “scan.anyline.com”.

License <> Bundle Identifier

Every license is bound to a Bundle Identifier. If you change your domain, you will require a new license. This also ensures that your license key cannot be used on any other website.

Please do not add "www." or "https://" to your identifier. E.g instead of "https://www.anyline.com" use "anyline.com". For subdomains use "subdomain.anyline.com".

The guide on how to generate a license can be found at Generate a License. This guide section focuses on how to integrate the default license.

Setting up the Web SDK

Using the CDN version

By default the Web SDK loads the required resources from the CDN. You can include the Web SDK by including it with the script tag. It will load all required resources from the CDN:

<script src="https://js.anyline.com/release/42.4.0/anyline.js"></script>

If you want to host the Web SDK yourself see the section below. Otherwise, you can skip ahead to 'Initializing the Web SDK'.

Manual loading

Copy the anylinejs into the public folder of your web app.

Import anyline.js via the script tag into your HTML

License <> Bundle Identifier

alternatively you can also copy the content of this folder into node_modules/anyline-js

 
// import the Web SDK
const { init, errorCodes } = window.anylinejs;

// if copied into node_modules
// import { init, errorCodes } from 'anyline-js';

const anylicense = 'MyAnylineLicense';

// access the container you want to mount the Web SDK into
const root = document.getElementById('root');

// initialize the Web SDK with optional presets
// presets will override some dimension configuration of your viewConfig and modules in the Web SDK config
const Anyline = init({
    preset: 'meter', // or ocr
    license: anylicense,
    element: root,
    anylinePath: 'path/to/public/anylinejs',
});

Anyline.startScanning();

Initializing the Web SDK

The Web SDK is initialized with an object of up to 6 keys: license, element, preset, config, viewConfig, anylinePath using the init method

license (required)

The license key is just a string containing the license you received from Anyline.

const license = 'MyAnylineLicense';

element (required)

the element key has to reference a DOM container, where the Web SDK should be mounted

const element = document.getElementById('container');

preset (optional if no config and viewConfig)

the preset will preconfigure the viewConfig and config for a specific module. available presets: meter, ocr, eCard, id, lpt, barcode, vin, tin, container, containerVertical, drivingLicense, card_detect

const preset = 'meter';

hapticFeedback

The hapticFeedback will enable a feedback on result in form of audio and vibration (only for Android).

const hapticFeedback = true;

flashOnResult

The flashOnResult will enable a feedback on result in form of a flash.

const flashOnResult = true;

config (required if no preset)

The config key will define which product you are using, configures the module, but also return options for the fullscreen image.

Fullscreen Image:
{
  returnFullImage: true, // defaults to false ...

};
Serial:
{
    module: 'OCR',
    scanMode: 'AUTO',
    minConfidence: 30,
    charWhitelist: 'ABCDEFGHJIKLMNOPQRSTUVWXYZ0123456789',
};
Meter:
{
    module: 'meter',
    scanMode: 'AUTO_ANALOG_DIGITAL_METER',
};

The Energie scanMode property can be one of the following:

Mode Parameter in Module Description <meter_module_scan_mode>

AUTO_ANALOG_DIGITAL_METER

Auto Analog/Digital Meter Description <meter_module_scan_mode_auto_analog_digital_meter>

ANALOG_METER

Analog Meter Description <meter_module_scan_mode_analog_meter>

DIGITAL_METER

Digital Meter Description <meter_module_scan_mode_digital_meter>

viewConfig (optional)

viewConfig defines the configuration of the UI.

The full parameter list of the configuration can be found at Anyline View Configuration

Keep in mind, that not every configuration is supported yet (those listed here work). Furthermore, only one cutout is supported right now.

const viewConfig = {
    outerColor: '000000',
    outerAlpha: 0.5,
    cutouts: [
        {
        cutoutConfig: {
            // style: 'rect',
            maxWidthPercent: '80%',
            alignment: 'top_half',
            ratioFromSize: {
                width: 300,
                height: 250,
            },
            width: 720,
            strokeWidth: 2,
            cornerRadius: 4,
            strokeColor: 'FFFFFFFF',
            feedbackStrokeColor: '0099FF',
        },
        scanFeedback: {
            style: 'contour_point',
            strokeColor: '0099FF',
            fillColor: '300099FF',
            strokeWidth: 2,
            cornerRadius: 4,
            animation: 'none',
        },
    },
    ],
};

Location of the Anyline asset files, relative to the root of the web app. Defaults to {domain}/anylinejs

const anylinePath = './anylinejs';

Starting the Web SDK

Anyline.startScanning().catch(e => console.error(e));

Pausing the Web SDK

Anyline.pauseScanning();

Pause scanning won’t stop the camera feed, it will only stop the processing. If you wish to exit the whole process and unmount the Web SDK use Anyline.dispose.

Stopping the Web SDK

Anyline.stopScanning();

Stop scanning will stop the camera feed and processing. If you wish to exit the whole process and unmount the Web SDK use Anyline.dispose.

Resuming the Web SDK

Anyline.resumeScanning();

Resume scanning when scanning was stopped

Disposing of the Web SDK

Anyline.dispose();

Completely unmount the Web SDK from the DOM. Use init and startScanning to remount the Web SDK again.

Set flash-light state

Anyline.activateFlash(boolean);

Only works on Chrome for Android

Web SDK API

The Web SDK exposes 2 main callbacks

  • onResult is called once Anyline has successfully completed the scan. The object contains the scanned value (The callback parameter contains the result but also the image).

  • onError is called whenever Anyline throws an error (deprecated, use catch when using the methods).

    Anyline.onResult = function({ image, fullImage, result }) {
    console.log('result: ', result);
};

// deprecated
Anyline.onError = ({ code, message }) => {
if (code === errorCodes.WEBCAM_ERROR) {
    console.error('webcam error: ', message);
}
//....
};

Examples

See Examples for more information.