Quickstart

Install as a dependency

npm install @microblink/blinkid

Or use another package manager, such as yarn or pnpm:

• pnpm add @microblink/blinkid
• yarn add @microblink/blinkid

Get a license key

You also need a license key. Go to our developer portal:

• Product: BlinkID
• Platform: In-browser
• Domain: localhost if you're just testing, otherwise the domain where your app is hosted

This license key needs to be available to the SDK.

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

const blinkid = await createBlinkId({
  licenseKey: "your license key"
});

The best way to expose the license key is through an .env file. For example, if using Vite as the bundler, you could set VITE_LICENSE_KEY as the variable name:

echo 'VITE_LICENSE_KEY=<your license key here>' > .env.local

(Or use another, more appropriate .env file, depending on the environment.)

And then integrate like so:

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

const blinkid = await createBlinkId({
  licenseKey: import.meta.env.VITE_LICENSE_KEY,
});

Integrate into your app

The above is a minimal example of how to import and initialize scanning in your app.

You could, for example, show the extracted information in the console (taken from the blinkid-simple demo app):

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

Host resources

Move manually

In order to integrate the SDK code for web scanning, you need to serve the WebAssembly binary to your app under /resources. The contents must be those in node_modules/@microblink/blinkid/dist/resources/. Therefore, after building the project, copy the resource files into your app.

For example:

# This creates a `dist` directory with the built app
vite build

# Copy the resources into the app
cp -r node_modules/@microblink/blinkid/dist/resources dist/

# Run the preview
vite preview

Automate with the bundler

Alternatively, you could automate this process by configuring a plugin in your configuration file. See the example app configuration:

export default defineConfig((config) => {
  return {
    build: {
      sourcemap: config.mode === "development",
      target: "es2022",
    },
    plugins: [
      {
        name: "move-resources",
        buildStart: async () => {
          if (ranOnce) {
            return;
          }
          moveResources("@microblink/blinkid");
          ranOnce = true;
        },
      },
      // Add resource-specific headers
      resourceHeadersPlugin,
      // Generates certificates for https
      mkcert(),
    ],
    server: serverOptions,
    preview: serverOptions,
  };
});

Some other requirements related to hosting resources:

• Must be served in a secure context.

• For multithreaded builds, your site must be cross-origin isolated:

  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

  That means that you must set the wasmVariant parameter to advanced-threads when initializing the SDK. See more in the Hosting resources article.

Example apps

Explore example applications in the GitHub repository for ready-to-run demos:

• blinkid-simple: Minimal integration with default UI.
• blinkid-core-api: Low-level usage of the core API.
• blinkid-advanced-setup: Custom UI and advanced configuration.
• blinkid-preload: Preloading resources for faster startup.

Each example demonstrates different integration patterns and features.