Web Library
Overview
CheckpointID’s Web Library for DVS provides client applications the ability to leverage built-in image capture tools. When using the Web Library, image preprocessing occurs locally within the client application, reducing the image data payload that is sent to the DVS server. This increases the efficiency of the service by eliminating the risk of sending erroneous images to the DVS and also removes the need for images to be passed to the server multiple times.
The Web library assists in the image capture process, performing a liveness check on the capture of the selfie image as well as providing immediate feedback re:image cropping and lighting. CheckpointID recommends using this pluggable JS library as the primary method of integrating our DVS into your application.
Use cases
- Capture and determination of the document type
- Capture of pdf417
- Capture of MRZ
- Capture of faces
Prerequisites for Image Capture via Web Library
- Use a smartphone camera with at least 8 MP resolution
- Capture images in a well lit room
- Place the document on a uniform dark background while capturing image
- When capturing via a webcam on an iOS device, Safari is the only supported browser
- When capturing via a webcam on an Android device, Chrome is the only supported browser
- Library is approximately 10MB
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
- Before importing 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'.
new CopyWebpackPlugin ([
{
from: 'node_modules/@idscan/idvc/dist/networks/**/*',
to: 'networks/[folder]/[name].[ext]',
toType: 'template'
}
])
1.3. Import the library and css to your project.
import IDVC from '@idscan/idvc'
import '@idscan/idvc/dist/css/idvc.css'
Initialization
Create an instance of the object 'IDVC'. 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.
licenseKey (string) – key for the library
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
enableLimitation (boolean) - boolean parameter using which you are able to switch off the limitation for desktop browsers. Default: true
resizeUploadedImage (integer) - sets the maximum size for manually loaded pictures. Default: null
enableMobileLimitation (boolean) - enable limitation for mobile browsers. Default: false
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 and capture 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'.
showPreviewForOneStep (boolean) - using this option you can hide the preview if you have only one step configured
priority (string) - initial method of work of the component. Available values: 'uploader','camera', 'auto' (on desktop - uploader, on mobile - camera)
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
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
onReset - callback-function which will be called after reset all the steps. The returnable value is the object with the steps
submit - callback-function which will be called after completing all the steps. The returnable value is the object with the following content:
{ "steps": [{
"img": "",
"type": "front"
}…],
"documentType": 1
}
where documentType – id of a document type ( ID – 1, Passport - 2, PassportCard – 3, GreenCard – 6, InternationalId – 7)
steps – steps with the type and the image in the format base64
Also, if you use automatic capture, in the "back" step trackstring will be returned (raw PDF417 data from Barcode encoded in base64)
Config example:
new IDVC ({
networkUrl: 'networks',
el: 'videoCapturingEl',
licenseKey: '',
types: ['ID', 'PassportCard'],
showSubmitBtn: true,
steps: [
{type: 'front', name: 'Image'},
{type: 'face', name: 'Selfie'}
]
})
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
Request an license key for the component by emailing and Demo example support@checkpointid.com
Sample React Demo with JS SDK Download
JS SDK for the client application integration is located in the “src/App/component” folder of the archive
Download Backend Demo App on Node.js - How to run
Read next: Demo / Onboarding / Server Architecture / Using the REST API / How to run examples