Getting Started

This guide shows you how to install and initialize the Anyline Web SDK for browser-based scanning.

Supported Use Cases

The Web SDK supports scanning for:

  • IDs: MRZ (passports) and AT/DE Driving Licenses

  • Barcodes: 1D, 2D and stacked barcodes

  • Meters: Analog, digital, and dial meters

  • Automotive: VIN, TIN, tire size, tire ID, license plates

  • OCR: Shipping containers, custom OCR

Requirements

  • Devices: Released after 2017 (iOS 10+, Android 7+)

  • Browsers: Chrome (latest) on Android, Safari (latest) on iOS

  • Camera: 1080p recommended (720p minimum)

  • HTTPS: Required for camera access (except localhost for development). Use a local dev server instead of opening files directly.

License Requirements

The Web SDK license is domain-restricted:

  • Domain format excludes www. prefix and https:// protocol (e.g., subdomain.anyline.com)

  • IP addresses and localhost are not supported in production licenses

  • Contact Anyline support to configure your license domains

Installation

npm install @anyline/anyline-js

Alternative: Script Tag

<script src="https://cdn.jsdelivr.net/npm/@anyline/anyline-js@{page-component-version}/anyline.js"></script>
const { init } = window.anylinejs;

Package Contents

When you install @anyline/anyline-js, the package includes:

  • anyline.js - Main SDK library

  • anylinejs/ - Asset directory for self-hosting

  • demo/ - Implementation examples

  • LICENSE - Third-party license agreements

  • README.md - Package documentation

Quick Start

Basic Initialization

import { init } from '@anyline/anyline-js';

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin'
});

anyline.onResult = ({ result }) => {
  console.log('Scanned:', result);
};

anyline.startScanning();

Self-Hosting Assets

Copy the SDK assets to your public directory:

cp -r node_modules/@anyline/anyline-js/dist/anylinejs public/

Then reference them:

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin',
  anylinePath: '/anylinejs'  // Path to copied assets (absolute from web root)
});

See Performance Optimization for CDN configuration.

Initialization Parameters

Required Parameters

license (string)

Your Anyline license key.

element (HTMLElement)

DOM container where the scanner will be mounted.

const element = document.getElementById('scanner-root');

Optional Parameters

preset (string)

Pre-configured settings for specific use cases. Custom config values override preset defaults while preserving other preset settings.

Available Presets
Category Preset Description

Barcode

qr

QR code scanning only

all_barcode_formats

All supported 1D and 2D barcode formats

barcode_pdf417

PDF417 barcode scanning

barcode_pdf417_parsed

PDF417 with AAMVA parsing (US driver’s licenses)

ID Scanning

universalid_mrz

Machine Readable Zone (passports, ID cards)

universalid_dl_at_de

Austrian and German driving licenses

universalid_dl_at_de_strict

AT/DE driving licenses with strict validation

universalid_es_it_pt

Spanish, Italian, and Portuguese driving licenses

License Plates

lpt

General license plate recognition

lpt_eu

European license plates

lpt_us

United States license plates

lpt_canada

Canadian license plates

Tire & Automotive

vin

Vehicle Identification Number (fast mode)

vin_with_user_guidance

VIN with real-time user guidance feedback

tin

Tire Identification Number

tin_dot

Tire DOT number

tire_size

Tire size information

tire_id

Complete tire identification

Containers

container

Horizontal shipping container codes

containerVertical

Vertical shipping container codes

Meters

meter

Analog and digital meter reading

dialmeter

Dial meter reading

verbund

Verbund utility meter

OCR

ocr

General optical character recognition

legacy_barcode

Legacy barcode engine (compatibility mode)

See Plugin Configuration for preset customization.

config (object)

Manual plugin configuration. See Plugin Configuration.

viewConfig (object)

UI customization (cutout style, colors, animations). See ViewConfig Reference.

anylinePath (string)

Location of SDK assets. Defaults to CDN if not specified.

anylinePath: '/anylinejs'

Requesting a License

Web SDK licenses are bound to a specific domain. For details on license types and how to request one, see the License Key Generation guide.

SDK Methods

startScanning()

Start the scanning process:

await anyline.startScanning();

pauseScanning()

Pause scanning while keeping camera active and session alive:

anyline.pauseScanning();

stopScanning()

Stop scanning and end the session:

anyline.stopScanning();

resumeScanning()

Resume after pause or stop:

await anyline.resumeScanning();

dispose()

Completely unmount the SDK and release resources:

anyline.dispose();
Always call dispose() when done to prevent memory leaks.

Result Callback

Handle scan results using the onResult callback:

anyline.onResult = ({ result, fullImage }) => {
  console.log('Scanned:', result);
};

Callback parameters:

  • result - Scanned data (structure varies by plugin)

  • fullImage - Full camera frame (ImageData, may be undefined)

Complete Example

import { init } from '@anyline/anyline-js';

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin'
});

// Handle results
anyline.onResult = ({ result }) => {
  console.log('Scanned:', result);
  anyline.stopScanning();
};

// Start scanning with error handling
anyline.startScanning().catch((error) => {
  console.error('Failed to start:', error);
});

// Cleanup when done
window.addEventListener('beforeunload', () => {
  anyline.dispose();
});

Next Steps

Additional Resources