Getting Started
The platform currently supports the following use cases:
IDs: Documents with MRZ and AT/DE Driving Licenses
Meter Values: For Analog Meters, Digital Meters and Dial Meters
Barcodes: 1D, 2D and Stacked Linear Barcodes
Serial Numbers: Vehicle Identification Number (VIN), Shipping Container, Universal Serial Number Scanner
License Plates: For all European Countries and the US
Tires: Tire Size Specifications, Tire ID, Tire Identification Number (TIN)
The Web SDK license is restricted by domains. This requires you to set up a local web server in order for the license key to work as expected. IP Addresses & localhost is not supported in Anyline license keys. Use a HTTPS-capable web server when hosting, 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
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 |
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/55.1.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
The preset will pre-configure the viewConfig and config for a specific
module. For the fields that are available both in config and preset, config will take priority.
available presets:
universalid_dl_at_de, universalid_dl_at_de_strict, universalid_es_it_pt, universalid_mrz
lpt, lpt_eu, lpt_us, lpt_canada
meter, dialmeter, verbund
ocr, vin, container, containerVertical
tire_size, tin, tin_dot, tire_id
qr, barcode_pdf417_parsed, barcode_pdf417, all_barcode_formats, legacy_barcode
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
Config defines the configuration of the plugin, if both config and preset are defined, config will take priority.
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. 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',
},
},
],
};
anylinePath (optional, but recommended)
Location of the Anyline asset files, relative to the root of the web app. Defaults to {domain}/anylinejs
const anylinePath = './anylinejs';
Pausing the Web SDK
Anyline.pauseScanning();
Pause scanning won’t stop the camera feed, it will only pause the
processing, while keeping the session alive and keeping the same transactionId
.
Once called, any subsequent Anyline.pauseScanning()
will be ignored.
If you wish to exit the whole process and unmount the Web
SDK use Anyline.dispose
.
Stopping the Web SDK
Anyline.stopScanning();
Stop scanning won’t stop the camera feed and processing similarly to Anyline.pauseScanning
,
but stop the scanning session. When Anyline.resumeScanning()
is called, session will be updated along with the transactionId
.
Once called, any subsequent Anyline.stopScanning()
will be ignored.
Resuming the Web SDK
Anyline.resumeScanning();
Resume scanning when scanning was paused or stopped.
Once called, any subsequent Anyline.resumeScanning()
will be ignored.
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.