### Install Dependencies and Run Development Server

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

Navigate to the project directory, install dependencies, and start the development server.

```bash
cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev
```

--------------------------------

### Install Example Dependencies (TypeScript)

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/README.md

Installs dependencies and builds a TypeScript application. Ensure you are in the example's TypeScript folder. Runtime resources are copied to the 'dist/' folder.

```bash
npm install
npm run build
```

--------------------------------

### Install Dependencies and Build TypeScript Example

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/examples/README.md

Use these commands to set up and build the TypeScript example. Ensure you are in the 'ui/examples/typescript' directory. The build process outputs to the 'dist/' folder.

```bash
# Make sure you're in the 'ui/examples/typescript' folder

# Install dependencies
npm install

# Build an application in folder 'dist/'
npm run build
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

Navigate to your project directory and install the necessary dependencies using npm.

```bash
cd blinkid-integration
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Build App

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/webpack/typescript/README.md

Install project dependencies, build the application, and copy WASM resources. Serve the 'dist' folder with an HTTP/S server.

```bash
npm install

npm run build

http-server dist/
```

--------------------------------

### Serve JavaScript Examples

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/README.md

Serves the JavaScript examples from the 'javascript/' folder. Requires an internet connection for runtime resources loaded from CDN, or alternatively, provide JS bundles.

```bash
serve javascript/
```

--------------------------------

### Advanced Example and API Documentation

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/README.md

An advanced example showcasing programmatic configuration of the BlinkID component's properties and event listeners, along with references to further documentation.

```APIDOC
## Advanced Example and API Documentation

This section provides an advanced example of configuring the BlinkID component using JavaScript properties and demonstrates how to handle various events. It also points to more detailed API documentation.

### JavaScript Configuration
```javascript
const el = document.querySelector("blinkid-in-browser");

// Mandatory properties
el.engineLocation = "http://localhost/resources";
el.workerLocation = "http://localhost/resources/blinkid.worker.min.js";
el.licenseKey = "<PLACE-YOUR-LICENSE-KEY-HERE>";
el.recognizers = ["BlinkIdSingleSideRecognizer"];

// Optional properties
el.allowHelloMessage = true;
el.recognizerOptions = undefined;
el.enableDrag = true;
el.hideFeedback = false;
el.hideLoadingAndErrorUi = false;
el.scanFromCamera = true;
el.scanFromImage = true;
el.cameraId = null;
el.translations = undefined;
el.iconCameraDefault = undefined;
el.iconCameraActive = undefined;
el.iconGalleryDefault = undefined;
el.iconGalleryActive = undefined;
el.iconInvalidFormat = undefined;
el.iconSpinner = undefined;

el.translations = {
  "action-message": "Alternative CTA",
};

// Events
el.addEventListener("fatalError", (ev) => {
  console.log("fatalError", ev.detail);
});
el.addEventListener("ready", (ev) => {
  console.log("ready", ev.detail);
});
el.addEventListener("scanError", (ev) => {
  console.log("scanError", ev.detail);
});
el.addEventListener("scanSuccess", (ev) => {
  console.log("scanSuccess", ev.detail);
});
el.addEventListener("feedback", (ev) => {
  console.log("feedback", ev.detail);
});
```

### Further Documentation
- API documentation for the `<blinkid-in-browser>` component can be found in the [docs/components/blinkid-in-browser/readme.md](docs/components/blinkid-in-browser/readme.md) file.
```

--------------------------------

### Minimal BlinkID UI Component Setup

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/demo.html

Configure the BlinkID UI component with essential properties for basic scanning. Ensure a valid license key, engine location, and recognizer are provided. This example enables drag and drop functionality.

```html
<blinkid-in-browser
  engine-location="http://localhost/resources/"
  license-key="LICENSE-KEY-GOES-HERE"
  recognizers="BlinkIdSingleSideRecognizer"
></blinkid-in-browser>
```

--------------------------------

### Install BlinkID In-Browser SDK

Source: https://context7.com/blinkid/blinkid-in-browser/llms.txt

Install the SDK via NPM and copy WASM resources to your public folder. Ensure WASM files are accessible via HTTPS.

```bash
npm install @microblink/blinkid-in-browser-sdk

# Copy WASM engine resources to your public folder
cp -r node_modules/@microblink/blinkid-in-browser-sdk/resources ./public/blinkid-resources
```

--------------------------------

### Install BlinkID SDK via NPM or Yarn

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/README.md

Use NPM or Yarn to install the stable version of the BlinkID in-browser SDK. This is the recommended method for most projects.

```sh
# NPM
npm install @microblink/blinkid-in-browser-sdk

# Yarn
yarn add @microblink/blinkid-in-browser-sdk
```

--------------------------------

### React: Configure postinstall Script for Resources

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/README.md

Add a `postinstall` script to `package.json` to automatically copy BlinkID SDK resources to the public directory after installation.

```json
# Add `postinstall` hook to `package.json` that will copy resources
{
    ...
    "scripts": {
        ...
        "postinstall": "shx cp -r node_modules/@microblink/blinkid-in-browser-sdk/resources public"
        ...
    },
    ...
}
```

--------------------------------

### Minimal Example

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/README.md

A basic HTML structure to embed the BlinkID component with essential configurations and an event listener for scan success.

```APIDOC
## Minimal Example

This example demonstrates the basic usage of the `<blinkid-in-browser>` component with essential attributes and an event listener for `scanSuccess`.

### HTML
```html
<blinkid-in-browser
  engine-location="http://localhost/resources"
  license-key="<PLACE-YOUR-LICENSE-KEY-HERE>"
  recognizers="BlinkIdSingleSideRecognizer"
></blinkid-in-browser>
```

### JavaScript
```javascript
const el = document.querySelector("blinkid-in-browser");

el.addEventListener("scanSuccess", (ev) => {
  console.log("Results", ev.detail);
});
```
```

--------------------------------

### React: Install shx for Resource Copying

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/README.md

Install `shx` as a dev dependency to help with copying BlinkID SDK resources in your React project.

```bash
# Auxiliary tool for cross-platform support
$ npm install --save-dev shx
```

--------------------------------

### Install BlinkID UI Component via NPM

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/README.md

Install the SDK via NPM or Yarn, copy JS files to your project's public directory, and configure the custom element with WASM engine location.

```sh
# Install latest version of UI component via NPM or Yarn
npm install @microblink/blinkid-in-browser-sdk # OR yarn add @microblink/blinkid-in-browser-sdk

# Copy JS file to folder where other JS assets are located
cp -r node_modules/@microblink/blinkid-in-browser-sdk/ui/dist/* src/public/js/

# Copy WASM resources from SDK to folder where other static assets are located
cp -r node_modules/@microblink/blinkid-in-browser-sdk/resources/* src/public/assets/
```

```html
<!-- Load custom element via `<script>` tag -->
<script type="module" src="public/js/blinkid-in-browser/blinkid-in-browser.esm.js"></script>

<!-- Custom element is now available and location of WASM engine must be provided -->
<!-- IMPORTANT: location of WASM engine must be an absolute path
<blinkid-in-browser license-key="..." engine-location="http://localhost/public/assets/"></blinkid-in-browser>
```

--------------------------------

### Install BlinkID SDK

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

Add the BlinkID SDK to your project's dependencies using npm.

```bash
npm install --save @microblink/blinkid-in-browser-sdk
```

--------------------------------

### Clone BlinkID-InBrowserSDK Repository

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

Clone the BlinkID-InBrowserSDK repository from GitHub to get started.

```bash
git clone https://github.com/BlinkID/blinkid-in-browser
```

--------------------------------

### MbHelp Component Methods

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/docs/components/shared/mb-help/readme.md

This section details the methods available for interacting with the MbHelp component, such as initializing, opening specific help screens or onboarding flows, closing modals, and terminating the component's services.

```APIDOC
## close() => Promise<void>

### Description
Closes the help modal.

### Method
close

### Returns
Type: `Promise<void>`
```

```APIDOC
## initialize(callbacks: MbHelpCallbacks) => Promise<void>

### Description
Initializes the MbHelp component, starting tooltip timers and other necessary processes.

### Method
initialize

### Parameters
#### Arguments
- `callbacks` (MbHelpCallbacks) - Callbacks to be used during initialization.

### Returns
Type: `Promise<void>`
```

```APIDOC
## openHelpScreens() => Promise<void>

### Description
Opens the modal specifically for displaying Help Screens.

### Method
openHelpScreens

### Returns
Type: `Promise<void>`
```

```APIDOC
## openOnboarding() => Promise<void>

### Description
Opens the modal for the onboarding flow.

### Method
openOnboarding

### Returns
Type: `Promise<void>`
```

```APIDOC
## terminate() => Promise<void>

### Description
Terminates the MbHelp component's services, including cancelling tooltip timers and closing any open modals.

### Method
terminate

### Returns
Type: `Promise<void>`
```

--------------------------------

### Clone and Run BlinkID In-browser Example

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/README.md

Steps to quickly test the BlinkID In-browser SDK on your local machine. Requires Node.js and Git. Ensure you obtain a license key from Microblink DevHub and add it to the `LICENSE` variable.

```bash
git clone https://github.com/BlinkID/blinkid-in-browser
cd blinkid-in-browser/examples/getting-started && npm install && npm run dev
```

--------------------------------

### Vite Project Initialization Output

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

The expected output when creating a new Vite project with specified options.

```bash
✔ Project name: … blinkid-integration
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

Scaffolding project in /Users/nikola/DEV/test-vite/blinkid-integration...

Done. Now run:

  cd blinkid-integration
  npm install
  npm run dev

```

--------------------------------

### startImageScan

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/docs/components/shared/mb-component/readme.md

Starts image scan, emits results from provided file.

```APIDOC
## `startImageScan(file: File) => Promise<void>`

### Description
Starts image scan, emits results from provided file.

### Method Signature
`startImageScan(file: File)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **file** (File) - Description: The file to scan.
```

--------------------------------

### Initialize BlinkID SDK with WasmSDKLoadSettings

Source: https://context7.com/blinkid/blinkid-in-browser/llms.txt

Asynchronously downloads, compiles, and initializes the WebAssembly module. Ensure the license key is valid and engine/worker locations are correctly set.

```typescript
import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk";

const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings("your-base64-license-key");
loadSettings.engineLocation = window.location.origin + "/blinkid-resources";
loadSettings.workerLocation  = window.location.origin + "/blinkid-resources/BlinkIDWasmSDK.worker.min.js";

BlinkIDSDK.loadWasmModule(loadSettings).then(
  (wasmSDK: BlinkIDSDK.WasmSDK) => {
    console.log("SDK loaded successfully.");
    // Store wasmSDK and proceed to create recognizers
  },
  (error: any) => {
    console.error("Failed to load SDK!", error);
    // Handle error: invalid license key, network failure, unsupported browser feature, etc.
  }
);
```

--------------------------------

### startMultiSideImageScan

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/docs/components/shared/mb-component/readme.md

Starts multi-side image scan, emits results from provided files.

```APIDOC
## `startMultiSideImageScan(firstFile: File, secondFile: File) => Promise<void>`

### Description
Starts multi-side image scan, emits results from provided files.

### Method Signature
`startMultiSideImageScan(firstFile: File, secondFile: File)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **firstFile** (File) - Description: The first file to scan.
- **secondFile** (File) - Description: The second file to scan.
```

--------------------------------

### Load BlinkID SDK and Scan Document

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

This snippet initializes the BlinkID SDK, sets up the recognizer, and starts video capture for document scanning. Ensure the browser supports the SDK and the 'myCameraVideoElement' is present in your HTML.

```javascript
const LICENSE = '';
import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk";

if (BlinkIDSDK.isBrowserSupported()) {
  const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(LICENSE);
  loadSettings.engineLocation = window.location.origin + "/resources/";

  BlinkIDSDK.loadWasmModule(loadSettings).then
    (
      async (wasmSDK) => {
        const recognizer = await BlinkIDSDK.createBlinkIdSingleSideRecognizer(wasmSDK);

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

        const cameraFeed = document.getElementById("myCameraVideoElement");
        try {
          const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream(
            cameraFeed,
            recognizerRunner
          );

          const processResult = await videoRecognizer.recognize();
          console.log(processResult);

          if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) {
            const recognitionResult = await recognizer.getResult();
            console.log(recognitionResult);
          }
          else {
            console.log("Recognition was not successful!");
          }

        }
        catch (error) {
          console.error(error);
        }
      },
      (error) => {
        console.log("Error during the initialization of the SDK!", error);
      }
    )
}
else {
  console.log("This browser is not supported by the SDK!");
}
```

--------------------------------

### Configure WASM SDK Load Settings

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/examples/getting-started/README.md

Sets up the configuration for loading the WebAssembly module, including the license key and the location of the engine files. Ensure the 'resources' folder is correctly placed.

```javascript
const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(LICENSE);
loadSettings.engineLocation = window.location.origin + "/resources/";

```

--------------------------------

### Install BlinkID UI Component via CDN

Source: https://github.com/blinkid/blinkid-in-browser/blob/master/ui/README.md

Load the custom element script and configure the component with license key and WASM engine location. Ensure the engine location is an absolute path.

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@microblink/blinkid-in-browser-sdk@X.Y.Z/ui/dist/blinkid-in-browser/blinkid-in-browser.esm.js"
></script>
<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@microblink/blinkid-in-browser-sdk@X.Y.Z/ui/dist/blinkid-in-browser.js"
></script>

<blinkid-in-browser
  license-key="..."
  engine-location="http://localhost/resources/"
></blinkid-in-browser>
```