Web component

Web component is an image capture tool that allows the user to perform registration and authorization through a web interface.

Version compatibility table:

BAF	@tdvc/face-onboarding
1.9.*	1.9.*
1.8.*	1.8.*
1.7.0	1.7.0
1.5.0-1.7.0	1.6.0-1.6.3
1.5.0	1.5.0
1.3.0-1.4.0	1.4.0-1.4.1
1.3.0-1.3.1	1.3.1
1.3.0-1.3.1	1.3.1
1.2.0	1.2.0-1.3.0
1.1.0	1.0.0-1.1.2
1.0.0	1.0.0

Install Web Component

The component is supplied as a TGZ archive. Also, for the tdvc-face-onboarding library to work, the tdvc library is required, which is also supplied as an archive. Move the archives to your project's root folder and add the following lines to your package.json in the dependencies section:

"@tdvc/face-onboarding": "file:tdvc-face-onboarding-{version}.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.

For the component to work, the opencv.js script is required. After installing the package, move the "networks" folder from /node_modules/@tdvc/face-onboarding/ to the "public" folder of 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:

1. Create Web component integration on server.
2. Fill out the configuration file described below. Detailed configuration settings are described in the README file of the component.

Registration component initialization example:

import TDVOnboarding from '@tdvc/face-onboarding';
import '@tdvc/face-onboarding/dist/css/style.css';

const lib = new TDVOnboarding.Register(
    {
        integrationId: '03520f5d-cdc3-4dca-9125-ece78c1050a9',
        baseUrl: '/',
        language: 'en',
        mountElement: 'registrationEl',
        locales,
        callbacks: {
            onValidate(data) {
                console.log('onValidate callback', data);
            },
            onError(message, code) {
                onsole.log('onError callback', message, code);
            },
            onBack() {
                console.log('onBack callback');
            },
            onMotion(type,currentAttemptNumber, result) {
                console.log('onMotion callback', type, currentAttemptNumber, result);
            },
            onUpdate() {
                console.log('onUpdate callback');
            },
            onMounted() {
                console.log('onMounted callback');
            },
        },
    }
);

Methods

Destroy

The method completely dismantles the Web component.