Работа с Веб-компонентой

Веб-компонента — это инструмент захвата изображений, с помощью которого пользователь может выполнять регистрацию и авторизацию через веб-интерфейс.

Таблица совместимости версий:

BAF	@tdvc/face-onboarding
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

Установка веб-компоненты

Компонента поставляется в виде архива TGZ. Также для работы библиотеки tdvc-face-onboarding необходима библиотека tdvc, которая также поставляется в виде архива.

Переместите архивы в корневую папку вашего проекта и добавьте следующие строки в ваш package.json в разделе зависимостей:

"@tdvc/face-onboarding": "file:tdvc-face-onboarding-{version}.tgz"

Версия архива может отличаться. Пример итогового файла package.json:

После этого вызовите команду npm install, которая установит библиотеку в ваш проект.

Для работы веб-компоненты необходим скрипт opencv.js. После установки пакета переместите папку «networks» из /node_modules/@tdvc/face-onboarding/ в папку "public" вашего проекта.

Импорт и использование веб-компоненты

Импортируйте библиотеку, а также стили для нее. При желании стилизация может быть переписана пользователем. Пример импорта библиотеки и стилей:

Теперь инициализируйте веб-компоненту.

1. Создайте интеграцию веб-компоненты на сервере.
2. Заполните файл конфигурации. Подробная настройка конфигурации описана в README компоненты.

Пример инициализации компоненты регистрации:

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');
            },
        },
    }
);

Методы веб-компоненты

Destroy

Этот метод полностью демонтирует веб-компоненту.