Browser SDK Initial Integration Guide

Use this guide to integrate the UR Scan+Match Browser SDK into Your App.

Other Device SDK Integration Guides:

Create a New Browser Web App:

Open a new terminal in Your App's Root Directory.

In Your App's Root Directory, create a basic index.html file with the Source Directory specified for the JavaScript Portion (i.e. /dist/main.js).

<!DOCTYPE html>
<head>
  <title>UR Scan+Match Browser App</title>
  <meta charset="utf-8"/>
  <!-- These settings are highly recommended for good app behavior. -->
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <script type="text/javascript" src="./dist/main.js"></script>
</head>
<body>

</body>
</html>

Create a src directory. In src, create the file index.ts.
From Your App's Root Directory, run npm init -y.
From Your App's Root Directory, run npm i -D webpack-cli webpack typescript ts-loader @types/node @types/webpack.

From Your App's Root Directory, run npx create-new-webpack-app.
Answer the questions as follows:

? Which of the following JS solutions do you want to use? Typescript
? Would you like to use Webpack Dev server? No
? Do you want to simplify the creation of HTML files for your bundle? No
? Do you want to add PWA support? No
? Which of the following CSS solution do you want to use? CSS only
? Do you want to use PostCSS in your project? No
? Do you want to extract CSS into separate files? No
? Which package manager do you want to use? npm
[create-webpack] ℹ️ Initializing a new Webpack project
✔ File conflict at index.html? do not overwrite
	skip  index.html
	create  webpack.config.js
✔ File conflict at package.json? overwrite
	overwrite  package.json
	create  README.md
	create  tsconfig.json
✔ File conflict at index.ts? do not overwrite
	skip  src/index.ts

From Your App's Root Directory, run npm install live-server.

In package.json, specify the Application Name, the Main Source File, and the script for running live-server from localhost.

 "name": "MyURScanMatchApp",
  "main": "src/index.ts",
  "scripts": {
    "local-server": "live-server --host=localhost --port=8080",
    ...
  }

From Your App's Root Directory, run npm run local-server.
Open a second terminal in Your App's Root Directory. In this second terminal, run npm run watch.
On success, src/index.ts will build successfully, webpack will compile, and a blank webpage titled "UR Scan+Match Browser App" will be shown.

Add the UR Scan+Match Browser SDK to Your New App:

Terminate the process that is running "npm run watch".
Download and extract the UR Scan+Match Browser SDK. Copy the directory core-sdk and place it into Your App's folder.

In src/index.ts, import the UR Scan+Match Browser SDK.

import { FaceTecURScanMatchSDK } from "../core-sdk/FaceTecURScanMatchSDK.js/FaceTecURScanMatchSDK";

Rerun "npm run watch".
On success, /src/index.ts will build successfully, webpack will compile, and a blank webpage titled "UR Scan+Match Browser App" will be shown.

Import the Default UR Scan+Match Wrapper Classes & Methods:

Terminate the process that is running "npm run watch".
From the UR Scan+Match Browser SDK's sample-apps/UR-Codes-Sample-App/src directory, copy the Config.ts file into Your App's src directory.

In src/index.ts, import FaceTecURScanMatchInitializationError, FaceTecURScanMatchSessionStatus, and FaceTecURScanMatchSDKInstance.

import { FaceTecURScanMatchInitializationError, FaceTecURScanMatchSessionStatus, type FaceTecURScanMatchSDKInstance } from "../core-sdk/FaceTecURScanMatchSDK.js/FaceTecURScanMatchPublicAPI";

In src/index.ts, import Config.
```
import { Config } from "./Config";
```
Rerun "npm run watch".
On success, /src/index.ts will build successfully, webpack will compile, and a blank webpage titled "UR Scan+Match Browser App" will be shown.

Create and implement the Start UR Scan Button:

In index.html, create a button with id="start-ur-scan-match-button" and onclick="MyURScanMatchApp.onStartURScanMatchPressed()".

<style>
  button {
    height: 20px;
    width: auto;
  }
  .wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
  }
</style>
<div class="wrapper">
  <button id="start-ur-scan-match-button" onClick="MyURScanMatchApp.onStartURScanMatchPressed()">Start UR Scan+Match Session</button>
</div>

In src/index.ts, create and export the class MyFaceTecURScanMatchApp with private FaceTecURScanMatchSDKInstance and licenseText properties. Set the licenseText property to the previously configured Config.LicenseText. Afterwards, create an initialization function that does the following:

Sets the directory path for the UR Scan+Match Browser SDK Resources
Sets the directory path for the UR Scan+Match Browser SDK Images
Initializes the UR Scan+Match Browser SDK by calling FaceTecURScanMatchSDK.initialize(...)

export class MyFaceTecURScanMatchApp {
  private faceTecURScanMatchSDKInstance!: FaceTecURScanMatchSDKInstance;
  private licenseText: string = Config.LicenseText;

  public init = (): void => {
    // Set the directory path for the UR Scan+Match Browser SDK Resources.
    FaceTecURScanMatchSDK.setResourceDirectory("../core-sdk/FaceTecURScanMatchSDK.js/resources");

    // Set the directory path for the UR Scan+Match Browser SDK Images.
    FaceTecURScanMatchSDK.setImagesDirectory("../core-sdk/URCode_images");

    // Initialize the UR Scan+Match Browser SDK.
    FaceTecURScanMatchSDK.initialize(this.licenseText, {
      onSuccess: (newFaceTecURScanMatchSdkInstance: FaceTecURScanMatchSDKInstance) => {
        this.faceTecURScanMatchSDKInstance = newFaceTecURScanMatchSdkInstance;
        // Finish setup after initialization is successful.
        this.onFaceTecURScanMatchInitializationSuccess();
      },
      // Handle the case where initialization is not successful.
      onError: this.onFaceTecURScanMatchInitializationFailure
    });
  }

  ...
  
}

In src/index.ts, create empty methods for onFaceTecURScanMatchInitializationSuccess and onFaceTecURScanMatchInitializationFailure.

// Finish setup after initialization is successful.
private onFaceTecURScanMatchInitializationSuccess = (): void => {

};

// Handle the case where initialization is not successful.
private onFaceTecURScanMatchInitializationFailure = (faceTecInitializationError: FaceTecURScanMatchInitializationError): void => {

};

In src/index.ts, create the onStartURScanMatchPressed method to configure the "Start UR Scan+Match Session" Button to launch the UR Scan+Match Browser SDK.

// Initiate a UR Scan+Match Session
public onStartURScanMatchPressed = (): void => {
  this.faceTecURScanMatchSDKInstance.startURCodeMatch({
    onComplete: (sessionStatus: FaceTecURScanMatchSessionStatus) => {
      this.onComplete(sessionStatus);
    },
  });
}

In src/index.ts, create an empty method for onComplete.

// Handle session completion and cancellation
public onComplete = (sessionStatus: FaceTecURScanMatchSessionStatus): void => {
  // Handle the FaceTecURScanMatchSessionStatus with Your Custom Logic.
  return;
}

In src/index.ts, but outside of the MyFaceTecURScanMatchApp Class, add the method for initializing the SDK when the Browser is loaded.

window.onload = ():void => {
  const MyURScanMatchApp = new MyFaceTecURScanMatchApp();
  MyURScanMatchApp.init();
  // @ts-ignore
  // Make the class available to the html file.
  window.MyURScanMatchApp = MyURScanMatchApp;
}

Rerun "npm run watch".
On success, Your App will be able to build and run!

Additional Note: Incorrect Response MIME Type & Methods: