Examples

This page provides practical examples for common Web SDK use cases.

Plugin-Specific Examples

For detailed examples of specific scanning capabilities, see:

Basic Examples

Minimal Setup

The simplest way to get started with a preset:

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();

With Error Handling

Always handle errors for production use:

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

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

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

    await anyline.startScanning();
    console.log('Scanning started successfully');
  } catch (error) {
    console.error('Failed to start scanning:', error);
  }
}

startScanner();

With Lifecycle Management

Complete example with start/stop/pause controls:

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

let anyline: AnylineJS | null = null;

// Initialize
function initScanner() {
  const container = document.getElementById('scanner-root');
  if (!container) {
    throw new Error('Scanner container not found');
  }

  anyline = init({
    license: 'YOUR_LICENSE_KEY',
    element: container,
    preset: 'vin'
  });

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

// Start scanning
async function startScanning() {
  if (!anyline) initScanner();

  try {
    await anyline?.startScanning();
    updateUI('scanning');
  } catch (error) {
    console.error('Start failed:', error);
  }
}

// Stop scanning
function stopScanning() {
  anyline?.stopScanning();
  updateUI('stopped');
}

// Pause scanning
function pauseScanning() {
  anyline?.pauseScanning();
  updateUI('paused');
}

// Resume scanning
async function resumeScanning() {
  try {
    await anyline?.resumeScanning();
    updateUI('scanning');
  } catch (error) {
    console.error('Resume failed:', error);
  }
}

// Cleanup
function cleanup() {
  anyline?.dispose();
  anyline = null;
}

// UI helpers
function updateUI(state: string) {
  document.getElementById('status')!.textContent = `Status: ${state}`;
}

function displayResult(result: any) {
  document.getElementById('result')!.textContent = JSON.stringify(result, null, 2);
}

// Cleanup on page unload
window.addEventListener('beforeunload', cleanup);

Advanced Examples

Preload Assets

Improve performance by preloading assets before scanning:

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

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin',
  preload: true,
  preloadCallback: () => {
    console.log('Assets preloaded successfully');
    document.getElementById('loader')?.remove();
  }
});

// Trigger preload
anyline.preload();

// Start scanning when ready
document.getElementById('start-btn')?.addEventListener('click', () => {
  anyline.startScanning();
});

Lock Screen Orientation

Lock to portrait mode for mobile devices:

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

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

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: container,
  preset: 'universalid_dl_at_de',
  lockPortraitOrientation: {
    element: container,
    lock: true
  }
});

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

anyline.startScanning();

Manual Frame Capture

Capture camera frames manually:

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

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

async function bootstrap() {
  await anyline.startScanning();

  document.getElementById('capture-btn')?.addEventListener('click', () => {
    const frame = anyline.getFrame();

    if (frame?.fullImage) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = frame.fullImage.width;
      canvas.height = frame.fullImage.height;

      if (ctx) {
        ctx.putImageData(frame.fullImage, 0, 0);

        // Convert to image element
        const img = document.createElement('img');
        img.src = canvas.toDataURL();
        img.style.maxWidth = '300px';
        document.body.appendChild(img);
      }
    }
  });
}

bootstrap();

Camera Mirror Control

Mirror the camera stream on desktop:

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

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

// Toggle mirror at runtime
let mirrored = true;
document.getElementById('mirror-btn')?.addEventListener('click', () => {
  mirrored = !mirrored;
  anyline.camera.mirrorStream(mirrored);
});

anyline.startScanning();

Flash Control

Control camera flash/torch (Chrome for Android, Safari 18.4+):

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

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

let flashOn = false;

(async () => {
  await anyline.startScanning();

  const button = document.getElementById('flash-btn');
  if (!button) return;

  button.addEventListener('click', async () => {
    const nextState = !flashOn;
    try {
      await anyline.camera.activateFlash(nextState);
      flashOn = nextState;
      button.textContent = flashOn ? 'Flash On' : 'Flash Off';
    } catch (error) {
      if (error instanceof OnlyAndroidChromeError) {
        console.warn('Flash control not supported on this browser');
      } else {
        console.warn('Flash control failed', error);
      }
    }
  });
})();

Custom Camera Constraints

Specify custom camera resolution and facing mode:

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

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin',
  mediaConstraints: {
    video: {
      width: { ideal: 1920 },
      height: { ideal: 1080 },
      facingMode: 'environment'  // Use rear camera
    }
  }
});

anyline.startScanning();

mediaConstraints uses the browser’s MediaDevices API and inherits its limitations. When manually set, the Anyline camera selection logic is overridden and camera selection may fail on specific devices.

Haptic Feedback

Enable sound and vibration on scan:

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

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin',
  hapticFeedback: true,
  flashOnResult: true  // Also flash on result
});

anyline.startScanning();

State Management

Monitor SDK state changes:

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

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

function checkState() {
  const state = anyline.getState();
  console.log('Current state:', state);
  updateStatusUI(state);
}

function updateStatusUI(state: string) {
  document.getElementById('status')!.textContent = `Status: ${state}`;
}

(async () => {
  await anyline.startScanning();
  checkState();  // 'scanning'

  anyline.pauseScanning();
  checkState();  // 'paused'

  anyline.stopScanning();
  checkState();  // 'stopped'

  anyline.dispose();
  checkState();  // 'disposed'
})();

Custom ViewConfig

Customize the visual appearance with custom colors and cutout styling:

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

const anyline = init({
  license: 'YOUR_LICENSE_KEY',
  element: document.getElementById('scanner-root'),
  preset: 'vin',
  viewConfig: {
    outerColor: '000000',
    outerAlpha: 0.5,
    cutouts: [
      {
        cutoutConfig: {
          alignment: 'center',
          width: 300,
          maxWidthPercent: '80%',
          style: 'rect',
          strokeColor: '00FF00',
          strokeWidth: 3,
          cornerRadius: 10,
          ratioFromSize: {
            width: 250,
            height: 60
          }
        },
        scanFeedback: {
          style: 'rect',
          strokeColor: '00FF00',
          strokeWidth: 4
        }
      }
    ]
  }
});

anyline.startScanning();