Scan documents in the browser.

Overview

DLens uses native BarcodeDetector when PDF417 is available, then ZXing-C++ WebAssembly and JavaScript ZXing fallbacks. Still images also receive region and perspective-correction passes for angled photos and screen captures. Tesseract.js handles MRZ text, and MRZ results must pass ICAO check digits.

Requirements

• Web Crypto, WebAssembly, Web Workers, Canvas, and getUserMedia
• HTTPS in production; localhost is accepted for development
• A browser-scoped credential issued for the exact hostname
• Camera permission granted by the user

Installation

Install the package archive supplied in your DLens distribution.

npm install ./dlens-web-1.9.0.tgz

For SDK source development, run npm install and npm run build inside the Web package.

Add the camera element

<video
  id="dlens-camera"
  autoplay
  muted
  playsinline
></video>

Give the video an explicit size. DLens attaches the stream when scanning begins.

Initialise

import {
  DLens,
  DLensError,
} from '@soloinsight/dlens-web';

await DLens.initialize(apiKey, browserCredential, {
  appId: location.hostname,
  scanMode: 'all',
  timeoutSeconds: 60,
});

Start scanning

const video =
  document.querySelector<HTMLVideoElement>('#dlens-camera')!;
const scanner = DLens.scanner(video);

try {
  const result = await scanner.scan();
  console.log(result.fullName, result.licenseNumber);
} catch (error) {
  if (error instanceof DLensError) {
    console.error(error.code, error.message);
  }
}

The camera stops after a result, cancellation, timeout, or failure. For a barcode displayed on a phone, turn the display toward the webcam and use the preview to confirm that the full barcode is visible. Enlarge it while keeping both ends in frame, and avoid glare. The live decoder analyzes full-resolution horizontal bands and smaller frame sizes, and periodically captures a still picture for the image decoder. While the camera is running, await scanner.captureAndScan() triggers that still-picture scan on demand. It uses the browser's photo capture API when available and otherwise takes a full-size video frame. An optional second callback receives the exact captured Blob for local inspection; treat it as private document data. The test console displays a manually captured picture and saves it only if the user clicks Download. The test console also lists cameras and resolution and has an “Analyze visible frame” button. await scanner.diagnoseFrame() reports per-region detection without returning the image or personal data.

Scan an image file

Pass the original browser File or Blob when possible so the decoder retains maximum detail.

const input =
  document.querySelector<HTMLInputElement>('#document-image')!;
const file = input.files?.[0];

if (file) {
  const result = await DLens.scanImage(file, 'barcodeOnly');
  console.log(result.fullName, result.licenseNumber);
}

scanImage also accepts ImageData, canvas and image elements, and ImageBitmap.

Parse a payload

const result = DLens.parse(rawAamvaOrMrzText);

Configuration

DLens.configure({
  scanMode: 'mrzOnly',
  timeoutSeconds: 45,
  maxAnalysisDimension: 1600,
  mrzOcrInterval: 4,
});

Camera lifecycle

Stop explicitly when a route, modal, or component closes before scanning completes.

await scanner.stop();

Result model

DLensScanResult requires first name, last name, licence/document number, and raw payload. Optional properties cover other names, ISO yyyy-MM-dd dates, licence details, address, country, gender, eye colour, and height. fullName joins present name components.

Errors

DLensError.code is notInitialized, invalidAPIKey, invalidSecret, licenseExpired, licenseKeyMismatch, cameraPermissionDenied, scanningFailed, or timeout.

Security and deployment

Set an appropriate Permissions-Policy, such as camera=(self). An iframe must be explicitly allowed camera access. Serve the packaged zxing_reader.wasm beside the compiled SDK. Content Security Policy must permit Tesseract worker and language assets, which may be fetched on first use.

Benchmark the production HTTPS site on every supported browser and device class before release.