Skip to main content
Version: v8001

Scan in real time via camera

BlinkID includes a built-in scanning UI that manages the camera feed, guides the user with real-time feedback, and returns extracted data via a result callback. The camera stream starts automatically once scanning is initialized—no additional setup is required.

Embed the scanning UI​

By default, the scanning UI covers the full screen. On web, pass targetNode to render it inside a specific element instead.

import { createBlinkId } from "@microblink/blinkid";

const container = document.getElementById("scanner-container");

const blinkId = await createBlinkId({
  licenseKey: "your-license-key",
  targetNode: container ?? undefined,
});

blinkId.addOnResultCallback((result) => {
  console.log("First name:", result.firstName?.latin?.value);
  console.log("Document number:", result.documentNumber?.latin?.value);
  void blinkId.destroy();
});

Skip the onboarding guide​

By default, BlinkID shows an onboarding guide before scanning begins. Disable it to start frame capture immediately when the camera is ready.

import { createBlinkId } from "@microblink/blinkid";

const blinkId = await createBlinkId({
  licenseKey: "your-license-key",
  feedbackUiOptions: {
    showOnboardingGuide: false,
  },
});

blinkId.addOnResultCallback((result) => {
  console.log("Result:", result);
  void blinkId.destroy();
});

Handle errors​

Register an error callback to handle failures during scanning.

import { createBlinkId } from "@microblink/blinkid";

const blinkId = await createBlinkId({
  licenseKey: "your-license-key",
});

blinkId.addOnResultCallback((result) => {
  console.log("Result:", result);
  void blinkId.destroy();
});

blinkId.addOnErrorCallback((error) => {
  console.error("Scanning error:", error);
  void blinkId.destroy();
});

Clean up​

On Android and iOS, the scanning UI component owns its own lifecycle and releases camera resources automatically. On web, call destroy() explicitly when scanning is complete or the user cancels.

blinkId.addOnResultCallback((result) => {
  console.log("Result:", result);
  void blinkId.destroy();
});
tip

To use the front-facing camera for kiosk-style setups where the user holds the document up to the screen, see How to use the front-facing camera.

Last updated on