npm package: @idscan/idvc-dvs-wrapper
Description: wrapper for idvc component
Author: IDScan.net
Latest version: 1.0.1

## Overview

Wrapper for the idvc library.

## Use cases

- Capture and determination of the document type
- Capture of pdf417
- Capture of MRZ
- Capture of faces

## Recommendations

Use a modern phone with a good camera having the definition of not less than 8 megapixels.
The capture must be made in a well-lighted room. A document must be located at the uniform background.

## Limitations

This component works in phones with the operation system Android in the browser Chrome (minimum version 52) and in phones with the operation system iOS (minimum version 11) in the browser Safari

## Installation

```
$ npm install @idscan/idvc-dvs-wrapper
```

This component contains JS, CSS files.

1. Before importing wrapper it is necessary to set the webpack-configuration.

*Note: The project must use the webpack 4 and later versions.*

1.1. Add the following rules of loading to the field rules
```javascript
{
	test: /\.css$/,
	use: ["style-loader", "css-loader"]
}
```

1.2. Into the section &#39;plugins&#39; add the &#39;CopyWebpackPlugin&#39; which will copy the files, which are necessary for the work of the neural network, from the folder to another folder that should be selected by you.

*Note: The structure inside the folder of the component &#39;networks&#39; must be saved on the server with due regard to the nesting.
There are binary files in the folder which do not have the extension. These files must be provided by the server with the header `Content-Type: application/octet-stream`.*
##### copy-webpack-plugin v.6 with webpack v.4
```javascript
new CopyWebpackPlugin ([
	{
		from: 'node_modules/@idscan/idvc/dist/networks/**/*',
		to: 'networks/[folder]/[name].[ext]',
		toType: 'template'
	}
])
```
##### copy-webpack-plugin v.8 with webpack v.5
```javascript
new CopyWebpackPlugin({
	patterns: [{
		from: '**/*',
		to: 'networks/[file]',
		toType: 'template',
		context: 'node_modules/@idscan/idvc/dist/networks/',
	}],
})
```

1.3. Import the library to your project.

```javascript
import IDVCWrapper from '@idscan/idvc-dvs-wrapper'

```
## Initialization

Create an instance of the object &#39;IDVCWrapper&#39;. The object takes one object of the component configuration as a parameter.

Available fields:

**el** (string) – id of an element on the page where the component will be integrated.

**publicKey** (string) – public key for dvs server

**licenseKey** (string) – license key for IDVC library. May be obtained by public key.

**dvsUrl** (string) - url address of DVS server API. Default: https://dvs2.idware.net/api/v3/

**verifyFace** (boolean) - option to add verify face step

**isShowManualSwitchButton** (boolean) - option to show the button with which you can switch between the uploader and the video. Default: true

**showSubmitBtn** (boolean) – option to show or not to show the button &#39;submit&#39; after capturing all the images. If a button is switched off, an event of sending the images will be created automatically after capturing all the images. Default: true

**isShowVersion** (boolean) - hide/show version of library in the bottom. Default: true

**tapOnVideo** (boolean) - tap and hold on the video if you want capture frame manual. Default: true

**tapBackSide** (boolean) - tap and hold the screen to capture the back side of the ID. Default: false

**minPDFframes** (integer) - the option "minPDFframes" which determines the minimal number of frames for capturing the PDF417. Default: 1

**parsePDF** (boolean) -  if it is enabled, the received trackstring is converted into the parsed document fields. Thus on-server parsing won’t be necessary.
                          At the PDF step, the parsedData object would be available. Default: false
                          
**parseMRZ** (boolean) -  if it is enabled, the captured mrz strings is converted into the parsed document fields. Thus on-server parsing won’t be necessary.
                          At the Front and mrz steps, the parsedData object would be available. Default: false

**tapFace** (boolean) - tap and hold the screen to capture the face. Default: false

**enableLimitation** (boolean) - boolean parameter using which you are able to switch off the limitation for desktop browsers. Default: true

**autoContinue** (boolean) - the option that switches on the automatic transition to the next step. Default: true

**resizeUploadedImage** (integer) - sets the maximum size for manually loaded pictures. Default: null

**enableMobileLimitation** (boolean) - enable limitation for mobile browsers. Default: false

**showForceCapturingBtn** (boolean) - Switches on the button over the video. On pressing this button, the capturing of the image will take place. Default: false

**fixFrontOrientAfterUpload** (boolean) - the option using which you will able to rotate the document into correct position in case of manual uploading. Default: false

**enableFlash** (boolean) - the option which turns on the flash while capturing an image. Default: false

**capturingMode** - The option that switches the mode of capturing the front of the documents. Available values are 2,4, ‘none’. Type 2 - auto capturing with the help of determining the borders. Type 4 - auto capturing which analyses the text in the image. ‘None’ - switch off the auto capturing. This method should be used together with the option showForceCapturingBtn:true. Default: 4

**steps** (array) – array of steps which are necessary for you. Every step represents an object with the fields &#39;type&#39; and &#39;name&#39;. The field &#39;name&#39; is the name of a step, which will be represented in the header. The field &#39;type&#39; is a type of a step. Possible variants are:

- front – capture of a document with the following analysis of the document type. In case if a document requires the back side, the step for the back side of a document will be added automatically. Use the step &#39;front&#39; if you use the component for the document validation.
- mrz – detection, capture and parsing of the mrz-code of a document
- pdf – detection and capture of pdf417 of a document
- face – detection and capture of a face using the front camera
- capturing – capture of a document without analysis

Steps can be combined in any order and in any combinations, except for the step &#39;front&#39;.

E.g.:
```javascript
steps:[
	{type: 'front', name: 'Image'},
	{type: 'face', name: 'Selfie'}
]
```


**networkUrl** (string) - path to the folder with neural networks. Specify the path on the server if you need to remove the folder to another location. The default path is &#39;networks&#39;. Default: 'networks'

**showPreviewForOneStep** (boolean) - using this option you can hide the preview if you have only one step configured. Default: true

**priority** (string) - initial method of work of the component. Available values: 'uploader','camera', 'auto' (on desktop - uploader, on mobile - camera). Default: 'auto'

**realFaceMode** (string) - option that enable advanced capture with volumetric face detection. Available values: 'auto','all', 'none'. Auto - enable "realFaceMode" only for iphone. All - enable "realFaceMode" for all devices. None - disable this option. Default: 'auto'

**types** (array) – array of types of acceptable documents. If you are going to use the component for the document validation, you can limit the list of acceptable documents.

Available types (int):

- **ID (1)** – USA driver license and USA ID (non-driver license), Canadian driver licenses,
- **Passport (2)** – with 2 lines MRZ
- **PassportCard (3)** – with 3 lines MRZ (most European IDs, USA passports/cards)
- **GreenCard (6)** – USA Permanent Resident Cards (only MRZ),
- **InternationalId (7)** – Internationally approved U.S. IDs with 3 lines MRZ

E.g.: types:
```javascript
['ID', 'PassportCard']
```

*Note: If you provide one type in the array, this type of document will not be analyzed further.*

**onChange** - callback-function which will be called after change one step. The returnable value is the object with the type and the image

**onCameraError** - callback-function which will be called after exceptions from a camera

**onCameraError** - The function that is invoked in case if the camera is not available. The response value is the object with the error code and the message

**onReset** - callback-function which will be called after reset all the steps. The returnable value is the object with the steps

**submitBehavior** - (string) - an option that determines what data will be passed to submit callback-function. Possible variants are:

- **libOutput** – return data IDVC library formed,
- **dvsRequest** – return formed request for send to DVS server,
- **dvsResponse** – return request id from DVS server.

**submit** - callback-function which will be called after completing all the steps.
```javascript
{
    submit(data) {
      console.log(data);
    },
  }
```

Config example:

```javascript
new IDVC ({
	networkUrl: 'networks',
	el: 'videoCapturingEl',
	publicKey: 'pk_**************',
	verifyFace: true,
	types: ['ID', 'PassportCard'],
	showSubmitBtn: true,
	steps: [
		{type: 'front', name: 'Image'}
	]
})
```

If you using router system in your SPA you should call **stopProccesing** method without args after the page leaving. This method prevent video proccesing in background

*Note: Request a public key for the library by emailing
 [sales@idscan.net](mailto:sales@idscan.net) or [support@idscan.net](mailto:support@idscan.net)*