Web component
Web component is an image capture tool that allows the user to perform registration and authorization through a web interface. Please note that the Web component works only in Chromium-based browsers.
Install Web component
Web component is supplied as an npm package in the form of a .tgz archive. To install the Web component, place it in the root of your project next to the package.json file.
In package.json in the dependencies section add the line:
"@tdv/onboarding": "tdv-onboarding-2.2.21.tgz".
The archive version may differ. Example of the final package.json file:
After this, call the npm install command, which will install the library into your project.
Import and Use Web component
Import the library and the styles. If needed, you can overwrite the styling. Example of importing a library and styles:
Now initialize the Web component. To do this, fill out the configuration file described below:
Description of the Web component configuration
el (string) - id of the element on the page where the Web component is integrated (required field).
applicantId (string) - applicant id (required field).
domainId (string) - id of the domain that contains settings and styles for the Web component (required field).
domainApi (string) - URL address for getting access to API (required field).
publicKey (string) - public key for getting access to API (required field).
isAuth (boolean) - flag used to indicate that only user authorization is required.
faceOnly (boolean) - flag used to indicate that registration and authorization should be by face only.
chunkPublicPath (string) - path to the folder with chunks. Specify the path on the server if you need to move the folder to a different location. The default path is 'networks'.
networkUrl (string) - path to the folder with neural networks. Specify the path on the server if you need to move the folder to a different location. The default path is 'networks'.
useCDN (boolean) - flag is enabled if you need to load 'networks' from a CDN, and not from your domain.
preferApiConfig (boolean) - flag is enabled if you prefer to use the TDV library configuration sent from BAF API instead of the configuration used when initializing the shell.
hideDocumentTitle (boolean) - this option enables/disables the display of document titles.
processingImageFormat (string) - this option switches the image format used for image processing.
callbacks (object) - an object with callback functions. The following functions are available:
onChange - callback function that will be called after each step has passed. The return value is an object with a type and an image.
onCameraError - function called if the camera is unavailable. The response value is an object with an error code and a message.
onReset - callback function that will be called after all steps are reset. The return value is an object with steps.
onRetakeHook - a function that will be called before resetting the current step. The return value is the object with the current step.
onValidate - a function that will be called after receiving a verification response. The return value is an object with verification information.
onError - a function that will be called in case of an error. The response value is an object with an error code and a message.
onReloaded - a function that will be called after the component reload is completed. This function doesn't return a value.
onMounted - a function that will be called on the mounted component. This function doesn't return a value.
submit - callback function that will be called after all steps have been completed. The return value is an object with the following content:
Example of Web component initialization:
Methods
Restart
The method completely restarts the Web component with the configuration with which it was initialized.
Example:
Set Applicant
The method restarts the component with the passed applicant and the configuration with which it was initialized.
Example:
Update config
The method restarts the component with the passed configuration.
Example:
