Skip to main content

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​

We offer several example apps in our Github repo to showcase several different use cases:

Since the main repo is a monorepo, here are the instructions on how to build it, together with these apps.

Clone the project​

Start by cloning the entire repository:

git clone https://github.com/microblink/web-sdks

Required versions​

The required Node version is 22 (LTS), and the recommended way to play with this repository is by using nvm:

nvm install --lts
nvm use --lts

(Starting with version 7.4, the Node 22 requirement is relaxed.)

Install dependencies​

This repo uses pnpm in its build scripts, so install it:

npm install -g pnpm

Then, in the root of the repo, run:

pnpm install
pnpm build
Windows users

If you're using Powershell, run the build as an administrator to enable the creation of symbolic links, otherwise you'll unnecessarily copy files, instead of symlinking them.

Run an example app​

Navigate to apps/examples, and then to one of the example apps, such as blinkid-simple.

cd apps/examples/blinkid-simple

Add you license key to the .env file, as described above.

Then, start the app:

pnpm dev
Last updated on