---
Source: https://docs.microblink.com/blinkcard/v2/quickstart-web
Title: Quickstart (Web)
Description: Step-by-step guide to integrate BlinkCard Web SDK for credit card scanning in browser applications
---
# Quickstart (Web)
## Prerequisites
- **License key**: Get a trial or production key from the [Microblink Developer Hub](https://developer.microblink.com). 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](https://github.com/blinkcard/blinkcard-in-browser) repository and running one of the example apps locally.
```bash
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`](https://www.npmjs.com/package/http-server) to serve the app:
```bash
npx http-server dist/
```
## Install the SDK
To integrate the SDK in your codebase, first add the library to your project:
```bash
npm install @microblink/blinkcard-in-browser-sdk
```
```bash
yarn add @microblink/blinkcard-in-browser-sdk
```
```bash
pnpm add @microblink/blinkcard-in-browser-sdk
```
```bash
bun add @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`](https://github.com/blinkcard/blinkcard-in-browser/tree/master/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
```ts
```
### Set the license key
```ts
const licenseKey = "YOUR-BASE64-LICENSE-KEY";
```
You can get the license key on our [Developer Hub](https://developer.microblink.com).
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:
```ts
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.
```ts
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.
```ts
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":
```ts
const cameraFeed = document.getElementById("camera-feed");
```
Then create a video recognizer[^1] that uses our feed and the runner we have created:
```ts
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.
```ts
const processResult = await videoRecognizer.recognize();
```
To actually get extracted data, you'll use the original recognizer that you created in the first step:
```ts
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:
```ts
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](https://github.com/blinkcard/blinkcard-in-browser/blob/master/src/Recognizers/BlinkCard/BlinkCardRecognizer.ts#L254).
### 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:
```ts
async function getImageFrame(file: File): Promise {
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:
```ts
const imageFrame = await getImageFrame(fileFrontSide);
```
After which you can run the recognizer on the frame:
```ts
const processResultFrontSide = await recognizerRunner.processImage(imageFrame);
```
You would then repeat the same logic for the back side.
See the [photo mode example app](https://github.com/blinkcard/blinkcard-in-browser/blob/master/examples/blinkcard-file/typescript/src/app.ts) for implementation ideas.
## Cleanup
Whether in video or photo mode, once you're finished, free the resources and release the camera:
```ts
recognizerRunner.delete();
blinkCardRecognizer.delete();
}
```
[^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 Apr 16, 2026