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

{
	test: /\.css$/,
	use: ["style-loader", "css-loader"]
}

1.2. Into the section 'plugins' add the 'CopyWebpackPlugin' 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 'networks' 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

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

new CopyWebpackPlugin({
	patterns: [{
		from: '**/*',
		to: 'networks/[file]',
		toType: 'template',
		context: 'node_modules/@idscan/idvc/dist/networks/',
	}],
})

1.3. Import the library to your project.

import IDVCWrapper from '@idscan/idvc-dvs-wrapper'

Initialization

Create an instance of the object 'IDVCWrapper'. 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 'submit' 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 'type' and 'name'. The field 'name' is the name of a step, which will be represented in the header. The field 'type' 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 'front' 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 'front'.

E.g.:

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 'networks'. 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:

['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.

{
    submit(data) {
      console.log(data);
    },
  }

Config example:

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 [email protected] or [email protected]