Skip to main content
Version: v3000 (Next)

Quickstart (Web)

Prerequisites​

  • License key: Get a trial or production key from the Microblink Developer Hub. Keys are bound to domain names. If you're testing locally, use localhost as the domain name when generating the key.
  • HTTPS: Serve your app over HTTPS so the browser allows camera access.
  • Supported browsers: Recent Chrome/Edge/Firefox and Safari. WebViews are not supported.

Fast track: try the example app​

You can try the SDK by cloning the blinkcard-in-browser-sdk repository and running one of the example apps locally.

git clone https://github.com/blinkcard/blinkcard-in-browser.git
cd blinkcard-in-browser-sdk/examples/blinkcard-camera/typescript
npm install
npm run build

Use a tool like http-server to serve the app:

npx http-server dist/

Install the SDK​

To integrate the SDK in your codebase, first add the library to your project:

npm install @microblink/blinkcard-in-browser-sdk

Host WASM resources​

The "heavy lifting" part of the library is in the WASM resources packaged with the SDK; see the resources folder. You need to host these resources in a public location your app can serve. The resources should be available at /resources (so, full URL should be https://your-app.com/resources).

If resources aren’t served from the same origin/path as your app root, set engineLocation accordingly when loading the SDK. Ensure CORS headers are configured if hosting on a separate domain.

Initialize the SDK​

Import​

import * as BlinkCardSDK from "@microblink/blinkcard-in-browser-sdk";

Set the license key​

const licenseKey = "YOUR-BASE64-LICENSE-KEY";

You can get the license key on our Developer Hub. If you're testing locally, use localhost as the domain name when generating the key.

In production, keep the license key in an environment variable on your hosting provider:

const licenseKey = process.env.LICENSE_KEY;

Load the WASM SDK code from resources​

The WASM code needs to be initialized using the provided license key.

async function loadSdk() {
  const loadSettings = new BlinkCardSDK.WasmSDKLoadSettings(licenseKey);

Create a recognizer and recognizer runner​

Create recognizer​

The thing that actually performs a scan is a "recognizer"—a Javascript object that provides a high-level interface for scanning. You need to create such a recognizer using the createBlinkCardRecognizer() function. This function will return a BlinkCardRecognizer object.

const recognizer = await BlinkCardSDK.createBlinkCardRecognizer(wasmSDK);

Create runner​

A recognizer runner is a Javascript object that orchestrates one or more recognizers. Create a runner using the createRecognizerRunner() function. As arguments, it takes in the WASM SDK object, a list of recognizers, and some optional parameters. This function will return a RecognizerRunner object.

const recognizerRunner = await BlinkCardSDK.createRecognizerRunner(wasmSDK, [recognizer]);

Start recognition​

You can use BlinkCard either in photo mode or video mode. In photo mode, you pass a still image to the scanning engine. In video mode, you pass a video stream.

Video​

Create a source of the video stream (here we're using an HTML element with the ID of "camera-feed":

const cameraFeed = document.getElementById("camera-feed");

Then create a video recognizer1 that uses our feed and the runner we have created:

const videoRecognizer = await BlinkCardSDK.VideoRecognizer.createVideoRecognizerFromCameraStream(cameraFeed, recognizerRunner);

Finally, use the recognize() function to process the video stream. Save the output to a variable to check the state of recognition.

const processResult = await videoRecognizer.recognize();

To actually get extracted data, you'll use the original recognizer that you created in the first step:

const blinkCardResult = await recognizer.getResult();

The variable that you save results into is an object with specific fields corresponding to the data extracted from the payment card, for example:

const firstAndLastName = blinkCardResult.owner;
const cardNumber = blinkCardResult.cardNumber;
const dateOfExpiry = {
    year: blinkCardResult.expiryDate.year,
    month: blinkCardResult.expiryDate.month,
};

The full list of available response fields is available here.

Photo​

Photo mode differs from video mode insofar as there is no equivalent to the VideoRecognizer in video mode. Instead, you feed your own frames (a single image per side) to the runner.

To do that, you need to:

  1. Upload images.
  2. Make them into decodable (loadable) objects.
  3. Transform them into processable frames.

For example:

async function getImageFrame(file: File): Promise<BlinkCardSDK.CapturedFrame> {
  const image = new Image();
  image.src = URL.createObjectURL(file);

  await image.decode();

  return BlinkCardSDK.captureFrame(image);
}

And then call that function on the image of the front side:

const imageFrame = await getImageFrame(fileFrontSide);

After which you can run the recognizer on the frame:

const processResultFrontSide = await recognizerRunner.processImage(imageFrame);

You would then repeat the same logic for the back side.

See the photo mode example app for implementation ideas.

Cleanup​

Whether in video or photo mode, once you're finished, free the resources and release the camera:

recognizerRunner.delete();
blinkCardRecognizer.delete();
}

Footnotes​

  1. Even though it is also called a "recognizer", a VideoRecognizer is a different type of thing than your usual recognizer. A recognizer is the thing that recognizes individual areas on payment cards, while a video recognizer is a convenience functionality that takes care of feeding video frames to the recognizer of your choice. ↩

Last updated on