SDK Detocated

This SDK He's deprecated. JAAK Stamps SDK Web as a substitute.

DocumentDetector is a web component that allows the capture of identifications.

Introduction

DocumentDetector It's a web component designed to facilitate the capture and processing of identification document images in modern web applications. Interoperable web components, compatible with the main standards of the Web. Shadow DOM, Slots and encapsulation of styles allows clear, secure and maintenance integration in any environment with support for Web Components.

Key functionality

Loading of local archives: The users can select images from their device. The component valids the file and, if they meet the criteria of a legible document, emits the result encoded with Base64.
Capture with camera: It activates the device's camera to automatically detect a document in real time. When it detects a valid, captures and emits coded data as well as Base64.

Installation

Requires:
- Node.js and npm installed.
- Download from: https://nodejs.org
- Check the installation:
```
node -v
npm -v
```
Start your project (if applicable):
```
npm init
```
Install package:
```
npm install @jaak.ai/document-detector
```
Confirm the installation: Check that the package is listed at package.json.

Alternative installation option

Also you can install the component directly with a label <script> at the head head HTML:

<script
  type="module"
  src="https://unpkg.com/@jaak.ai/document-detector"></script>

Component Setup

The configuration properties can be established as HTML attributes or through JavaScript:

Property	Description	Required	Type	Default value
`key`	Authentication key provided by the JAAK	Yes	string	*
`mode`	Operating mode: `'upload-file'` (up from device) or `'video-camera'` (camera capture)	Yes	string	`'upload-file'`
`documentDetect`	It activates automatic document detection (only in `video-camera`)	No	boolean	`true`
`videoFeedback`	Sample visual feedback during live capture	No	boolean	`true`
`width`	Unit width, e. g. `'200px'` \| `'100%'`	No	string	`'500px'`
`height`	Unit height, e.g. `'200px'` \| `'100%'`	No	string	`'400px'`
`progressiveDetection`	Enabling continuous capture to stop or remove component	No	boolean	`false`
`placeholder`	Additional text in file loading mode (device storage)	No	string	N / A
`buttonText`	Button label in mode `'upload-file'`	No	string	N / A
`size`	Maximum permitted file size (KB)	No	number	N / A
`translate`	Object with custom text for guides and instructions	No	object	N / A
`sdkConfig`	Allows to configure advanced options from SDK document recognition.	No	object	N / A

Object properties `translate`

To set up text instructions uses an object with the following properties:

Property	Type	Default value
`front`	`string`	About the front of your document
`back`	`string`	About the back of your document
`changeSide`	`string`	Flip your document
`adjustAngle`	`string`	Adjust angle
`cameraFeedbackBlur`	`string`	Just stay put.
`cameraFeedbackFacePhotoCovered`	`string`	Incline or move document to remove reflexes
`cameraFeedbackGlare`	`string`	Turn the document around
`cameraFeedbackWrongSide`	`string`	Keep face photo completely visible
`moveCloser`	`string`	Come closer
`moveFarther`	`string`	Move further

Object properties `sdkConfig`

To set advanced options from SDK document recognition uses an object with the following properties:

Property	Type	Description	Default value
`forceMobileMode`	`boolean`	Strength mobile mode of SDK independently of the device detected.	Fasse
`modelIdVariant`	`'lightweight' \'full'`	Define the variant of SDK To be used: 'light weight' for a lighter or 'full' version for all functionality.	"full"
`initialMemory`	`number`	lays down the initial amount of memory (in MB) assigned to SDK.	64
`numberOfWorkers`	`number \ null`	Define the number of workers that will use the SDK. If null, the optimum number shall be used as per device.	null

Important note about leave (`key`)

The authentication key (key) have to be requested to the mail support indicating that a licence from SDK Web. It's important to include URL (domains) If used in a local environment, it should also be indicated that it is a localhost.

Example of `translate`

{
  "front": "About the front of your document",
  "back": "About the back of your document",
  "changeSide": "Flip your document",
  "adjustAngle": "Adjust angle",
  "cameraFeedbackBlur": "Just stay put.",
  "cameraFeedbackFacePhotoCovered": "Incline or move document to remove reflexes",
  "cameraFeedbackGlare": "Turn the document around",
  "cameraFeedbackWrongSide": "Keep face photo completely visible",
  "moveCloser": "Come closer",
  "moveFarther": "Move further"
}

Example of Basic Implementation

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/@jaak.ai/document-detector"></script>
    <style>
      .demo-container {
        display: flex;
        justify-content: center;
        padding-top: 80px;
        gap: 50px;
      }
    </style>
  </head>
  <body>
    <div class="demo-container">
      <document-detector></document-detector>
    </div>
    <script>
      const detector = document.querySelector("document-detector");
      const userConfig = {
        key: 'your-access-key',
        width: '640px',
        height: '480px',
        mode: 'video-camera',
        placeholder: 'Upload your document',
        buttonText: 'Upload',
        size: 2048,
        translate: {
          front: 'About the document',
          back: 'About the back of the document',
          changeSide: 'Flip your document',
          adjustAngle: 'Drop your document',
          cameraFeedbackBlur: 'Keep the camera stable.'
        }
      };

      detector.config = userConfig;

      detector.addEventListener("results", e => {
        console.log('RESULTS:', e.detail);
      });
    </script>
  </body>
</html>

Events Issued

Event	Description	Detail
`results`	Returns data from document found	`e.detail` (item)
`status`	Reforms component status changes	`string`
`componentError`	Notify internal errors during operation	`object`

Example result

{
  "documentData": {
    "generalData": {
      "type": "ID",
      "nationality": "MEXICAN",
      "name": "MARIA FERNANDA",
      "surname": "RODRIGUEZ",
      "motherSurname": "VALENCIA",
      "address": "AV REFORMA 247\nCOL JUAREZ 06600\nCUAUHTEMOC, CDMX",
      "expiryPermanent": false,
      "birthDate": "891225",
      "gender": "M",
      "documentImage": {
        "frontFull": "/9j/4AAQ...",
        "backFull": "/9j/4AAQ...",
        "front": "/9j/4AAQ...",
        "back": "/9j/4AAQ...",
        "signature": "/9j/4AAQ...",
        "face": "/9j/4AAQ..."
      }
    },
    "mechanicalReadingZone": "IDMEX8901234567<<8912254M2512311MEX<02<<12345<6\nRODRIGUEZ<VALENCIA<<MARIA<FERNANDA<<\n",
    "specificData": [
      { "label": "curp", "value": "ROVM123456MDFDRR78" },
      { "label": "electorKey", "value": "RDVLMF123456M789" },
      { "label": "registerYear", "value": 2023 },
      { "label": "registerMonth", "value": 6 },
      { "label": "emissionYear", "value": 2023 },
      { "label": "identificationOCR", "value": "0123456789123" },
      { "label": "numIdentificationCredential", "value": "123456789" }
    ]
  }
}

Public methods

Method	Function
`switchMode(mode)`	It dynamically changes between `'upload-file'` and `'video-camera'`
`getMode()`	Returns the current mode of operation
`uploadFile()`	Begins file and processing load flow
`startDetection()`	activates camera mode detection
`stopComponent()`	Stops all operations and processes currently under way
`restartComponent()`	Reboot component and return to its original status

Example: Alternate between modes

<button onclick="switchMode()">Cambiar modo</button>
<script>
  async function switchMode() {
    const mode = await detector.getMode();
    detector.switchMode(mode === "video-camera" ? "upload-file" : "video-camera");
  }
</script>

Additional

Example Repository

Can be supported with a functional example at the following repository: https://github.com/jaak-ai/document-detector-js-example