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.

Web (TS)

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

Android (Kotlin)

BlinkIdCameraScanningScreen(
    blinkIdSdk = blinkIdSdk,
    onScanningSuccess = { result ->
        println("First name: ${result.firstName?.value}")
        println("Document number: ${result.documentNumber?.value}")
    },
    onScanningCanceled = { }
)

iOS (Swift)

let analyzer = try await BlinkIDAnalyzer(sdk: sdk)

BlinkIDUXView(
    analyzer: analyzer,
    onScanCompleted: { resultState in
        guard let result = resultState.scanningResult else { return }
        print("First name:", result.firstName?.value ?? "")
        print("Document number:", result.documentNumber?.value ?? "")
    }
)

Flutter (Dart)

import 'package:blinkid_flutter/blinkid_flutter.dart';
import 'package:flutter/services.dart';

final blinkIdPlugin = BlinkIdFlutter();

final sdkSettings = BlinkIdSdkSettings(licenseKey: 'your-license-key');
sdkSettings.downloadResources = true;

final sessionSettings = BlinkIdSessionSettings(
  scanningMode: ScanningMode.automatic,
  scanningSettings: BlinkIdScanningSettings(
    documentCaptureModule: DocumentCaptureModuleSettings(),
    mrzModule: MrzModuleSettings(),
    barcodeModule: BarcodeModuleSettings(),
    vizModule: VizModuleSettings(),
  ),
);

try {
  final result = await blinkIdPlugin.performScan(
    blinkIdSdkSettings: sdkSettings,
    blinkIdSessionSettings: sessionSettings,
  );
  if (result != null) {
    print('First name: ${result.firstName?.value}');
    print('Document number: ${result.documentNumber?.value}');
  }
} on PlatformException catch (e) {
  print(e.message);
}

React Native (TS)

import { performScan, type BlinkIdScanningResult } from "@microblink/blinkid-react-native";

const result: BlinkIdScanningResult = await performScan({
  sdkSettings: { licenseKey: "your-license-key", downloadResources: true },
  sessionSettings: {
    scanningMode: "automatic",
    scanningSettings: { documentCaptureModule: {}, mrzModule: {}, barcodeModule: {}, vizModule: {} },
  },
});

console.log("First name:", result.firstName?.value);
console.log("Document number:", result.documentNumber?.value);

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.

Web (TS)

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

Android (Kotlin)

BlinkIdCameraScanningScreen(
    blinkIdSdk = blinkIdSdk,
    uiSettings = UiSettings(showOnboardingDialog = false),
    onScanningSuccess = { result ->
        // use result
    },
    onScanningCanceled = { }
)

iOS (Swift)

let analyzer = try await BlinkIDAnalyzer(sdk: sdk)

BlinkIDUXView(
    analyzer: analyzer,
    onScanCompleted: { resultState in
        guard let result = resultState.scanningResult else { return }
        print("Result:", result)
    }
)
.uxSettings(ScanningUXSettings(showIntroductionAlert: false))

Flutter (Dart)

final uxSettings = BlinkIdScanningUxSettings(showOnboardingDialog: false);

final result = await blinkIdPlugin.performScan(
  blinkIdSdkSettings: sdkSettings,
  blinkIdSessionSettings: sessionSettings,
  blinkidScanningUxSettings: uxSettings,
);

React Native (TS)

const result = await performScan({
  sdkSettings: { licenseKey: "your-license-key", downloadResources: true },
  sessionSettings: {
    scanningMode: "automatic",
    scanningSettings: { documentCaptureModule: {}, mrzModule: {}, barcodeModule: {}, vizModule: {} },
  },
  scanningUxSettings: { showOnboardingDialog: false },
});

Handle errors

Register an error callback to handle failures during scanning.

Web (TS)

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

Android (Kotlin)

// onScanningCanceled is called both when the user cancels and when scanning fails
BlinkIdCameraScanningScreen(
    blinkIdSdk = blinkIdSdk,
    onScanningSuccess = { result ->
        println("First name: ${result.firstName?.value}")
    },
    onScanningCanceled = {
        println("Scanning canceled or failed")
    }
)

iOS (Swift)

// scanningResult is nil when scanning ends without a result (canceled or failed)
BlinkIDUXView(
    analyzer: analyzer,
    onScanCompleted: { resultState in
        guard let result = resultState.scanningResult else {
            print("Scanning canceled or failed")
            return
        }
        print("First name:", result.firstName?.value ?? "")
    }
)

Flutter (Dart)

// A null result means scanning ended without a result (canceled or failed);
// a PlatformException is thrown on error.
try {
  final result = await blinkIdPlugin.performScan(
    blinkIdSdkSettings: sdkSettings,
    blinkIdSessionSettings: sessionSettings,
  );
  if (result == null) {
    print('Scanning canceled or failed');
    return;
  }
  print('First name: ${result.firstName?.value}');
} on PlatformException catch (e) {
  print('Scanning error: ${e.message}');
}

React Native (TS)

try {
  const result = await performScan({
    sdkSettings: { licenseKey: "your-license-key", downloadResources: true },
    sessionSettings: {
      scanningMode: "automatic",
      scanningSettings: { documentCaptureModule: {}, mrzModule: {}, barcodeModule: {}, vizModule: {} },
    },
  });
  console.log("First name:", result.firstName?.value);
} catch (error) {
  console.error("Scanning error:", error);
}

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.

Web (TS)

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

Android (Kotlin)

No explicit cleanup is needed. The composable releases all camera resources when it leaves the composition.

iOS (Swift)

No explicit cleanup is needed. The view releases all camera resources when it is dismissed.

Flutter (Dart)

No explicit cleanup is needed. performScan launches the camera UX and releases all camera resources when it returns.

React Native (TS)

No explicit cleanup is needed. performScan launches the camera UX and releases all camera resources when it returns.

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.

Related articles

• How to scan a single-sided document
• How to scan a double-sided document
• How to scan from a static image
• How to extract specific fields