Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
При работе с Web SDK ваше приложение обращается к Web Plugin, который работает в контексте браузера. Плагин обменивается информацией с Web Adapter, а тот, в свою очередь – с Oz API.
Образец кода Oz Liveness Web SDK находится здесь. Чтобы все работало корректно, нужно заменить <web-adapter-url> на полученную от нас ссылку на Web Adapter.
В перечисленных ниже образцах кода нужно заменить ссылку https://web-sdk.sandbox.ozforensics.com в index.html.
Образец кода для Angular
Образец кода для
Образец кода для
Образец кода для
Для подключения плагина на страницу необходимо добавить в html-код страницы ссылку на основной скрипт плагина (plugin_liveness.php). web-sdk-root-url – это полученная от нас ссылка на Web Adapter.
<script src="https://web-sdk-root-url/plugin_liveness.php"></script><link rel="stylesheet" href="https://web-sdk-root-url/plugin/ozliveness.css" />
<script src="https://web-sdk-root-url/plugin_liveness.php"></script>Для настройки интерфейса воспользуйтесь разделом style в методе Ozliveness.open. Изменить можно следующие настройки:
faceFrame – цвет рамки вокруг лица:
faceReady – цвет рамки при правильном расположении лица;
faceNotReady – цвет рамки при неправильном положении лица, когда анализ не может быть запущен.
centerHint – текст подсказки в центре.
textSize – размер текста;
color – цвет текста;
closeButton – кнопка закрытия плагина:
image – изображение для кнопки, может быть картинкой в формате PNG или dataURL в base64.
backgroundOutsideFrame – заливка вне рамки вокруг лица:
color – цвет заливки.
Пример:
Для работы плагина Oz Liveness браузер должен поддерживать JavaScript ES6. Версия браузера должна быть не ниже указанной в таблице.
Opera
47
*В режиме совместимости с Internet Explorer Web SDK работать не будет, так как не поддерживаются некоторые важные функции.
Google Chrome (и другие браузеры на движке Chromium)
56
Mozilla Firefox
55
Safari
11
Microsoft Edge*
17
yPosition – позиция по вертикали относительно верха контейнера;
letterSpacing – расстояние между буквами;
fontStyle – стиль текста (полужирный, курсив и так далее).
OzLiveness.open({
// ...
style: {
//блок для обратной совместимости
doc_color: "",
face_color_success: "",
face_color_fail: "",
//основной блок
faceFrame: {
faceReady: "",
faceNotReady: "",
},
centerHint: {
textSize: "",
color: "",
yPosition: "",
letterSpacing: "",
fontStyle: "",
},
closeButton: {
image: "",
},
backgroundOutsideFrame: {
color: "",
},
},
// ...
});Этот коллбэк вызывается после окончания проверки и возвращает результат анализа (не применяется в режиме capture). Вид результата зависит от параметра настройки Web Adapter result_mode.
Если result_mode установлен как safe, коллбэкon_complete возвращает только состояние анализов:
Обратите внимание: перечисленные ниже result_mode используются только для тестирования. Если информации, которая передается в режиме Safe, вам недостаточно, настройте плагин в соответствии с .
При значении status коллбэк возвращает состояние анализов, а также – для каждого типа анализа – название типа, состояние анализа этого типа и вердикт системы.
При значенииfolderвозвращается практически то же самое, что при status, только добавляется идентификатор папки.
В этом случае коллбэк возвращает полную информацию, включая чувствительные данные. Мы рекомендуем использовать safe; full будет отключен в ближайших релизах из соображений безопасности.
Чтобы скрыть окно плагина, не отменяя запросы результатов анализов и пользовательские callback'и, воспользуйтесь методом hide(). Метод может пригодиться, если, к примеру, после отправки данных требуется вывести собственный индикатор загрузки.
OzLiveness.open({
// При получении промежуточного результата скрываем окно плагина и показываем собственные индикаторы загрузки
on_result: function(result) {
OzLiveness.hide();
if (result.state === 'processing') {
show_my_loader();
}
},
on_complete: function() {
hide_my_loader();
}
});Для принудительного закрытия окна плагина воспользуйтесь методом close(). При этом все запросы к серверу и callback-функции (кроме on_close) в рамках данной сессии будут остановлены.
Пример использования:
var session_id = 123;
OzLiveness.open({
// Передаем произвольные метаданные, по которым в дальнейшем сможем идентифицировать сессию в Oz API
meta: {
session_id: session_id
},
// После отправки данных принудительно закрываем окно плагина и самостоятельно запрашиваем результат
on_submit: function() {
OzLiveness.close();
my_result_function(session_id);
}
});{
"state": "finished"
}{
"state": "finished",
"analyses": {
"quality": {
"state": "finished",
"resolution": "success"
}
}
}{
"state": "finished",
"folder_id": "your_folder_id",
"analyses": {
"quality": {
"state": "finished",
"resolution": "success"
}
}
}Для запуска окна плагина следует воспользоваться методом open(options). Параметры:
options – объект с настройками:
token – (опционально) токен авторизации;
license – объект с информацией о лицензии;
licenseUrl – строка, содержащая путь к файлу лицензии;
Пример:
Для выпуска лицензии потребуется информация о доменных именах сайтов, где будет использоваться Web SDK. Можно также указывать поддомены.
Укажите информацию о лицензии одним из двух способов:
через данные о лицензии:
через путь к лицензии:
Проверьте, как установилась лицензия: например, пройдите по доменному имени хоста и выполните действие Liveness -> Simple selfie.
Далее при каждом запуске Web SDK система будет проверять валидность лицензии.
Этот коллбэк вызывается, если в системе возникает какая-либо ошибка. Он возвращает информацию об ошибке и идентификатор телеметрии, с помощью которого можно получить дополнительные данные о причине сбоя.
Для добавления нового языкового пакета или модификации существующего следует воспользоваться методом add_lang(lang_id, lang_obj).
Параметры:
lang_id – строковое значение, которое далее можно использовать в качестве параметра lang метода open();
lang – строка с идентификатором одного из подключенных языковых пакетов;meta – объект, ключи которого являются названиями метаполей, а значения – их строковыми значениями. Метаданные передаются в Oz API и могут быть использованы для получения результатов анализа или поиска;
params – объект с идентификаторами и значениями дополнительных параметров:
extract_best_shot: true/false – запуск выбора лучшего кадра в анализе Quality;
action – массив строк с идентификаторами действий, по которым будет проводиться проверка.
Доступные действия:
photo_id_front – фото лицевой стороны документа;
photo_id_back – фото обратной стороны документа;
video_selfie_left – поворот головы налево;
video_selfie_right – поворот головы направо;
video_selfie_down – наклон головы вниз;
video_selfie_high – поднятие головы вверх;
video_selfie_smile – улыбка;
video_selfie_eyes – моргание;
video_selfie_scan – сканирование;
video_selfie_blank – отсутствие действия, простое селфи.
video_selfie_best – специальное действие, которое извлекает из видео лучший кадр и выполняет анализ по нему вместо целого видео.
overlay_options – параметры отображения шаблона документа:
show_document_pattern: true/false – по умолчанию true, отображает картинку-шаблон, при значении false остается только прямоугольная рамка;
on_submit – callback-функция без аргументов, вызываемая после отправки пользовательских данных на сервер (не применяется в режиме capture).
on_capture_complete – callback-функция с одним аргументом, вызываемая по завершении съемки и возвращающая информацию о снятом видео. Пример возвращаемого объекта показан здесь.
on_error – callback-функция с одним аргументом, вызываемая при ошибке во время съемки и возвращающая информацию об ошибке: код ошибки, сообщение, идентификатор телеметрии для журналирования.
on_close – callback-функция без аргументов, вызываемая по окончании проверки после закрытия окна плагина, как ручного, так и автоматического.
style – раздел для настройки интерфейса.
device_id – (опционально) идентификатор используемой камеры.
enable_3d_mask (с версии 1.2.1) – включает использование 3D-маски при съемке вместо овала. Параметр работает только при load_3d_mask= true в настройках конфигурации адаптера; значение по умолчанию – false.
cameraFacingMode (добавлено в 1.4.0) – параметр, определяющий, какую камеру использовать; возможные значения: user (передняя камера), environment (задняя камера). Этот параметр работает только в том случае, когда для параметра use_for_liveness в файле конфигурации Web Adapter не установлено значение. Если use_for_liveness установлено любое значение, cameraFacingMode игнорируется.
disable_adaptive_aspect_ratio (добавлено в 1.5.0) – выключает автоматическую подстройку соотношения сторон видео к соотношению сторон окна. Значение по умолчанию – False, при стандартных настройках видео подстраивается под ближайшее соотношение из списка: 4:3, 3:4, 16:9, or 9:16. Обратите внимание: для съемки видео на смартфонах нужна портретная ориентация.
get_user_media_timeout (добавлено в 1.5.0) – когда SDK не может получить доступ к камере, по истечении этого таймаута появится подсказка, как решить проблему. Значение по умолчанию – 40000 (мс).
С помощью следующих параметров (добавлены в 1.7.15) вы можете управлять поведением SDK при зависании getUserMedia():
get_user_media_promise_timeout_ms – по истечении установленного здесь таймаута (в мс) SDK вызовет ошибку или покажет инструкцию для пользователя. Этот параметр представляет собой объект с ключами: "platform_browser", "browser", "platform", "default"(приоритет соответствует последовательности).
get_user_media_promise_timeout_throw_error – определяет, что именно демонстрирует SDK после таймаута, ошибку (если true) или инструкцию (если false).
OzLiveness.open({
license: {
'payload_b64': 'some_payload',
'signature': 'some_data',
'enc_public_key': 'some_key'
},
...,
})OzLiveness.open({
licenseUrl: 'https://some_url',
...,
})on_error {
"code": "error_code",
"event_session_id": "id_of_telemetry_session_with_error",
"message": "<error decription>",
"context": {} // дополнительная информация
}Если result_mode установлен как safe, коллбэк on_result возвращает только состояние анализов:
или
Обратите внимание: перечисленные ниже result_mode используются только для тестирования. Если информации, которая передается в режиме Safe, вам недостаточно, настройте плагин в соответствии с Рекомендациями по безопасности.
При значении status коллбэк возвращает состояние анализов, а также – для каждого типа анализа – название типа, состояние анализа этого типа и вердикт системы.
или
При значенииfolderвозвращается практически то же самое, что при status, только добавляется идентификатор папки.
В этом случае коллбэк возвращает полную информацию, включая чувствительные данные. Мы рекомендуем использовать safe; full будет отключен в ближайших релизах из соображений безопасности.
lang_obj– объект, ключами которого являются идентификаторы строк перевода, а значениями – сами строки перевода.Список идентификаторов языков:
en
Английский
ru
Русский
es
Испанский
pt-br*
Португальский (бразильский)
kz
Казахский
*До версии 1.3.1 назывался pt.
Пример использования:
OzLiveness.add_lang('ru', ruTranslation), гдеruTranslation – объект JSON.
Для установки нужного языка укажите его идентификатор в lang:
Вы можете запросить, какие языковые пакеты установлены в Web SDK, с помощью метода ozLiveness.get_langs(). Добавленные вручную локали также отобразятся.
Список всех строковых идентификаторов:
Ключи вида oz_action_*_go относятся к соответствующим жестам. oz_tutorial_camera_* – к подсказкам, как включить камеру для различных браузеров. Остальные – к подсказкам для всех жестов, информационным сообщениям или ошибкам.
Если какие-либо из ключей в вашем языковом пакете отсутствуют, соответствующие строки будут отображаться на английском языке.
OzLiveness.open({
lang: 'en',
action: [
'video_selfie_blank',
],
meta: { // если нужно, добавьте метаданные для папки
'transaction_id': 'your unique transaction identifier', // идентификатор транзакции для поиска через Oz API
'end_user_id': '<user_or_lead_id>',
'meta_key': 'meta_value',
},
on_result: function (result) {
console.log('on_result', result);
},
on_complete: function (result) {
console.log('on_complete', result);
},
on_close: function () {
console.log('on_close');
},
on_capture_complete: function (result) {
console.log('on_capture_complete', result);
}
});{
"state": "processing"
}{
"state": "finished"
}{
"state": "processing",
"analyses": {
"quality": {
"state": "processing",
"resolution": ""
}
}
}{
"state": "finished",
"analyses": {
"quality": {
"state": "finished",
"resolution": "success"
}
}
}{
"state": "processing",
"folder_id": "your_folder_id",
"analyses": {
"quality": {
"state": "processing",
"resolution": ""
}
}
}// Редактируем текст кнопки
OzLiveness.add_lang('ru', {
action_photo_button: 'Сделать фото'
});OzLiveness.open({
lang: 'es', // идентификатор нужного языка
...
});Результаты анализа доступны клиентскому приложению через функции-коллбэки Web Plugin, однако мы рекомендуем получать их через бэкенд напрямую от Oz API и там же обрабатывать впоследствии. Таким образом исключается вероятность манипуляций с результатами анализов через контекст браузера.
Чтобы найти нужную папку со стороны бэкенда, сделайте следующее:
На фронтенде добавьте уникальный идентификатор папки через метаданные:
Вы можете добавить собственные пары ключ-значение для хранения любой текстовой информации, например, номера документа или телефона. Однако удостоверьтесь при этом, что соблюдаются нормы законодательства о защите персональной информации.
Для оповещения о завершении анализа используйте функцию-коллбэк on_result, затем вызовите бэкенд и передайте значение transaction_id.
На стороне бэкенда найдите папку по присвоенному ранее идентификатору с помощью метода Folder LIST:
Для ускорения обработки запроса мы рекомендуем ограничить выдачу по времени:
В ответе придут результаты анализов и идентификатор папки folder_id - он потребуется для дальнейших действий.
Web Adapter отправляет Web Plugin данные с различным уровнем детализации. Для продакшна рекомендуется установить минимальный уровень. Для этого в Web Adapter установите параметру result_mode значение "safe".
/api/folders/?meta_data=transaction_id==unique_id1&with_analyses=trueOzLiveness.open({
...
meta: {
// идентификатор пользователя или лида из стороннего лидогенератора
// передавайте ID, если вам нужно отслеживать несколько попыток от одного и того же пользователя
'end_user_id': '<user_or_lead_id>',
// уникальный идентификатор попытки
'transaction_id': '<unique_id1>'
}
});/api/folders/?meta_data=transaction_id==unique_id1&with_analyses=true&time_created.min=([CURRENT_TIME]-1hour)"result_mode": "safe"В этом разделе вы узнаете, как снимать видео и отправлять его Oz API через ваш бэкенд.
Режим capture работает следующим образом:
1. Oz Web SDK снимает видео и передает его вашему web-приложению в виде последовательности кадров.
2. Web-приложение вызывает ваш бэкэнд и передает в него архив с кадрами.
3. После обработки видео ваш бэкэнд вызывает Oz API для выполнения анализов, после чего получает их результаты.
4. Ваш бэкэнд передает результаты обратно в web-приложение (опционально).
На стороне сервера необходимо сконфигурировать Web SDK для работы в режиме capture: параметру architecture в файле app_config.json значение capture.
В вашем web-приложении добавьте callback-функцию для обработки кадров при открытии Web SDK:
Структура получаемого объекта зависит от того, была ли обнаружена виртуальная камера.
Список переменных с их значениями приведен ниже.
Видео, полученное через Oz Web SDK, – это последовательность кадров. Чтобы отправить его Oz API, поместите кадры в ZIP-архив, затем используйте метод POST {{host}}/api/folders (пройдите по для ознакомления с коллекцией Postman).
Вы можете получить из папки видео в формате MP4 video: вызовите метод /api/folders/{{folder_id}}, указав идентификатор папки. В JSON-ответе найдите preview_url в source_media. В preview_url содержится ссылка на видео. Из плагина получить MP4-видео нельзя (только в виде последовательности кадров).
Для передачи в Oz API используйте данные без кодирования в base64.
Координаты "ориентиров" лица (левый глаз, правый глаз, нос, рот, левое ухо, правое ухо) на лучшем кадре
frame_list
Array[String]
Все кадры в формате data URL
frame_bounding_box_list
Array[Array[Named_parameter: Int]]
Координаты прямоугольников, в которые вписано лицо на кадрах из frame_list в соответствующем порядке
frame_landmarks
Array[Named_parameter: Array[Int, Int]]
Координаты "ориентиров" лица (левый глаз, правый глаз, нос, рот, левое ухо, правое ухо) на кадрах из frame_list в соответствующем порядке
action
String
Код действия
additional_info
String
Информация о среде клиента
При использовании архитектуры capture также необходимо добавить в запрос POST {{host}}/api/folders дополнительное поле additional_info. Оно нужно для сбора информации о среде клиента. Пример заполнения тела запроса:
Переменная
Тип
Описание
best_frame
String
Лучший кадр, JPEG в формате data URL
best_frame_png
String
Лучший кадр, PNG в формате data URL, необходим для защиты от подмены видеопотока с помощью виртуальной камеры
best_frame_bounding_box
Array[Named_parameter: Int]
Координаты прямоугольника, в который вписано лицо на лучшем кадре
best_frame_landmarks
Array[Named_parameter: Array[Int, Int]]
OZLiveness.open({
... // другие параметры
on_capture_complete: function(result) {
// Код для обработки кадров / отправки его через ваш API, шаг 2 на схеме
}
}){
"action": <action>,
"best_frame": <bestframe>,
"best_frame_png": <bestframe_png>,
"best_frame_bounding_box": {
"left": <bestframe_bb_left>,
"top": <bestframe_bb_top>,
"right": <bestframe_bb_right>,
"bottom": <bestframe_bb_bottom>
},
"best_frame_landmarks": {
"left_eye": [bestframe_x_left_eye, bestframe_y_left_eye],
"right_eye": [bestframe_x_right_eye, bestframe_y_right_eye],
"nose_base": [bestframe_x_nose_base, bestframe_y_nose_base],
"mouth_bottom": [bestframe_x_mouth_bottom, bestframe_y_mouth_bottom],
"left_ear": [bestframe_x_left_ear, bestframe_y_left_ear],
"right_ear": [bestframe_x_right_ear, bestframe_y_right_ear]
},
"frame_list": [<frame1>, <frame2>],
"frame_bounding_box_list": [
{
"left": <frame1_bb_left>,
"top": <frame1_bb_top>,
"right": <frame1_bb_right>,
"bottom": <frame1_bb_bottom>
},
{
"left": <frame2_bb_left>,
"top": <frame2_bb_top>,
"right": <frame2_bb_right>,
"bottom": <frame2_bb_bottom>
},
],
"frame_landmarks": [
{
"left_eye": [frame1_x_left_eye, frame1_y_left_eye],
"right_eye": [frame1_x_right_eye, frame1_y_right_eye],
"nose_base": [frame1_x_nose_base, frame1_y_nose_base],
"mouth_bottom": [frame1_x_mouth_bottom, frame1_y_mouth_bottom],
"left_ear": [frame1_x_left_ear, frame1_y_left_ear],
"right_ear": [frame1_x_right_ear, frame1_y_right_ear]
},
{
"left_eye": [frame2_x_left_eye, frame2_y_left_eye],
"right_eye": [frame2_x_right_eye, frame2_y_right_eye],
"nose_base": [frame2_x_nose_base, frame2_y_nose_base],
"mouth_bottom": [frame2_x_mouth_bottom, frame2_y_mouth_bottom],
"left_ear": [frame2_x_left_ear, frame2_y_left_ear],
"right_ear": [frame2_x_right_ear, frame2_y_right_ear]
}
],
"from_virtual_camera": null,
"additional_info": <additional_info>
}{
"action": <action>,
"best_frame": null,
"best_frame_png": null,
"best_frame_bounding_box": null,
"best_frame_landmarks": null
"frame_list": null,
"frame_bounding_box_list": null,
"frame_landmarks": null,
"from_virtual_camera": {
"additional_info": <additional_info>,
"best_frame": <bestframe>,
"best_frame_png": <best_frame_png>,
"best_frame_bounding_box": {
"left": <bestframe_bb_left>,
"top": <bestframe_bb_top>,
"right": <bestframe_bb_right>,
"bottom": <bestframe_bb_bottom>
},
"best_frame_landmarks": {
"left_eye": [bestframe_x_left_eye, bestframe_y_left_eye],
"right_eye": [bestframe_x_right_eye, bestframe_y_right_eye],
"nose_base": [bestframe_x_nose_base, bestframe_y_nose_base],
"mouth_bottom": [bestframe_x_mouth_bottom, bestframe_y_mouth_bottom],
"left_ear": [bestframe_x_left_ear, bestframe_y_left_ear],
"right_ear": [bestframe_x_right_ear, bestframe_y_right_ear]
},
"frame_list": [<frame1>, <frame2>],
"frame_bounding_box_list": [
{
"left": <frame1_bb_left>,
"top": <frame1_bb_top>,
"right": <frame1_bb_right>,
"bottom": <frame1_bb_bottom>
},
{
"left": <frame2_bb_left>,
"top": <frame2_bb_top>,
"right": <frame2_bb_right>,
"bottom": <frame2_bb_bottom>
},
],
"frame_landmarks": [
{
"left_eye": [frame1_x_left_eye, frame1_y_left_eye],
"right_eye": [frame1_x_right_eye, frame1_y_right_eye],
"nose_base": [frame1_x_nose_base, frame1_y_nose_base],
"mouth_bottom": [frame1_x_mouth_bottom, frame1_y_mouth_bottom],
"left_ear": [frame1_x_left_ear, frame1_y_left_ear],
"right_ear": [frame1_x_right_ear, frame1_y_right_ear]
},
{
"left_eye": [frame2_x_left_eye, frame2_y_left_eye],
"right_eye": [frame2_x_right_eye, frame2_y_right_eye],
"nose_base": [frame2_x_nose_base, frame2_y_nose_base],
"mouth_bottom": [frame2_x_mouth_bottom, frame2_y_mouth_bottom],
"left_ear": [frame2_x_left_ear, frame2_y_left_ear],
"right_ear": [frame2_x_right_ear, frame2_y_right_ear]
}
]
}
}"VIDEO_FILE_KEY": VIDEO_FILE_ZIP_BINARY
"payload": "{
"media:meta_data": {
"VIDEO_FILE_KEY": {
"additional_info": <additional_info>
}
}
}"Для настройки интерфейса воспользуйтесь разделом style в методе Ozliveness.open. Полный список настроек приведен после примера.
Пример использования:
Основные цветовые настройки.
Основные настройки шрифта.
Настройки шрифта заголовка.
Настройки кнопок.
Настройки панели инструментов.
Настройки подсказки в центре.
Анимация подсказки.
Настройки рамки вокруг лица.
Настройки рамки для съемки документа.
Настройки фона.
Настройки защиты от мошенников: при включении во время записи видео появляется дополнительное сообщение.
Настройки текста версии SDK.
Настройки 3D-маски, добавленной в версии 1.2.1.
Настройки loader (добавлено в 1.7.15).
Настройки переходов loader (добавлено в 1.8.0).
Таблица соответствия параметров:
OzLiveness.open({
style: {
baseColorCustomization: {
textColorPrimary: "#000000",
backgroundColorPrimary: "#FFFFFF",
textColorSecondary: "#8E8E93",
backgroundColorSecondary: "#F2F2F7",
iconColor: "#00A5BA"
},
baseFontCustomization: {
textFont: "Roboto, sans-serif",
textSize: "16px",
textWeight: "400",
textStyle: "normal"
},
titleFontCustomization: {
textFont: "inherit",
textSize: "36px",
textWeight: "500",
textStyle: "normal"
},
buttonCustomization: {
textFont: "inherit",
textSize: "14px",
textWeight: "500",
textStyle: "normal",
textColorPrimary: "#FFFFFF",
backgroundColorPrimary: "#00A5BA",
textColorSecondary: "#00A5BA",
backgroundColorSecondary: "#DBF2F5",
cornerRadius: "10px"
},
toolbarCustomization: {
closeButtonIcon: "cross",
iconColor: "#707070"
},
centerHintCustomization: {
textFont: "inherit",
textSize: "24px",
textWeight: "500",
textStyle: "normal",
textColor: "#FFFFFF",
backgroundColor: "#1C1C1E",
backgroundOpacity: "56%",
backgroundCornerRadius: "14px",
verticalPosition: "38%"
},
hintAnimation: {
hideAnimation: false,
hintGradientColor: "#00BCD5",
hintGradientOpacity: "100%",
animationIconSize: "80px"
},
faceFrameCustomization: {
geometryType: "oval",
cornersRadius: "0px",
strokeDefaultColor: "#D51900",
strokeFaceInFrameColor: "#00BCD5",
strokeOpacity: "100%",
strokeWidth: "6px",
strokePadding: "4px"
},
documentFrameCustomization: {
cornersRadius: "20px",
templateColor: "#FFFFFF",
templateOpacity: "100%"
},
backgroundCustomization: {
backgroundColor: "#FFFFFF",
backgroundOpacity: "88%"
},
antiscamCustomization: {
enableAntiscam: false,
textMessage: "",
textFont: "inherit",
textSize: "14px",
textWeight: "500",
textStyle: "normal",
textColor: "#000000",
textOpacity: "100%",
backgroundColor: "#F2F2F7",
backgroundOpacity: "100%",
backgroundCornerRadius: "20px",
flashColor: "#FF453A"
},
versionTextCustomization: {
textFont: "inherit",
textSize: "16px",
textWeight: "500",
textStyle: "normal",
textColor: "#000000",
textOpacity: "56%"
},
maskCustomization: {
maskColor: "#008700",
glowColor: "#000102",
minAlpha: "30%", // от 0 до 1 или 0-100%
maxAlpha: "100%" // от 0 до 1 или 0-100%
},
/* для HTML-строки используйте тип string; HTMLElement нужно вставить через cloneNode(true) */
loaderSlot: yourLoader, /* <string | HTMLElement> */
loaderTransition: {type: 'fade', duration: 500}
}
});Дополнительный цвет текста
backgroundColorSecondary
Дополнительный цвет фона
cornerRadius
Угловой радиус кнопки
Непрозрачность фона
backgroundCornerRadius
Угловой радиус подложки
verticalPosition
Положение по вертикали
Отступ в рамке
Непрозрачность текста
backgroundColor
Цвет фона
backgroundOpacity
Непрозрачность фона
backgroundCornerRadius
Угловой радиус подложки
flashColor
Цвет мигающего индикатора
{phase: 'start' | 'progress' | 'end', percent?}
до / во время / после отправки данных
loader:destroy
при скрытии слота
-
centerHint.fontStyle
centerHintCustomization.textStyle
closeButton.image
-
backgroundOutsideFrame.color
backgroundCustomization.backgroundColor
Параметр
Описание
textColorPrimary
Основной цвет текста
backgroundColorPrimary
Основной цвет фона
textColorSecondary
Дополнительный цвет текста
backgroundColorSecondary
Дополнительный цвет фона
iconColor
Цвет значков
Параметр
Описание
textFont
Шрифт
textSize
Размер шрифта
textWeight
Насыщенность шрифта
textStyle
Стиль текста
Параметр
Описание
textFont
Шрифт
textSize
Размер шрифта
textWeight
Насыщенность шрифта
textStyle
Стиль текста
Параметр
Описание
textFont
Шрифт
textSize
Размер шрифта
textWeight
Насыщенность шрифта
textStyle
Стиль текста
textColorPrimary
Основной цвет текста
backgroundColorPrimary
Основной цвет фона
Параметр
Описание
closeButtonIcon
Значок кнопки закрытия
iconColor
Цвет значка
Параметр
Описание
textFont
Шрифт
textSize
Размер шрифта
textWeight
Насыщенность шрифта
textStyle
Стиль текста
textColor
Цвет текста
backgroundColor
Цвет фона
Параметр
Описание
hideAnimation
Скрыть анимацию
hintGradientColor
Цвет градиента
hintGradientOpacity
Непрозрачность градиента
animationIconSize
Размер значка анимации
Параметр
Описание
geometryType
Форма рамки – прямоугольник или овал
cornersRadius
Угловой радиус прямоугольника
strokeDefaultColor
Цвет рамки (лицо не в кадре)
strokeFaceInFrameColor
Цвет рамки (лицо в кадре)
strokeOpacity
Непрозрачность обводки
strokeWidth
Толщина линии обводки
Параметр
Описание
cornersRadius
Угловой радиус
templateColor
Цвет шаблона
templateOpacity
Непрозрачность шаблона
Параметр
Описание
backgroundColor
Цвет фона
backgroundOpacity
Непрозрачность фона
Параметр
Описание
textMessage
Текст сообщения
textFont
Шрифт
textSize
Размер шрифта
textWeight
Насыщенность шрифта
textStyle
Стиль текста
textColor
Цвет текста
Параметр
Описание
textFont
Шрифт
textSize
Размер шрифта
textWeight
Насыщенность шрифта
textStyle
Стиль текста
textColor
Цвет текста
textOpacity
Непрозрачность текста
Параметр
Описание
maskColor
Цвет самой маски
glowColor
Цвет обводки маски
minAlpha
Минимальный уровень прозрачности маски (добавлено в 1.3.1)
maxAlpha
Максимальный уровень прозрачности маски (добавлено в 1.3.1)
Событие
Payload
Вызов
loader:init
{os, browser, platform}
сразу после вставки слота
loader:waitingCamera
{os, browser, platform, waitedMs}
каждые waitedMs мс, пока нет доступа к камере
loader:cameraReady
когда доступ к камере получен и loader нужно скрыть
loader:processing
{phase: 'start' | 'end'}
до / после подготовки данных
Параметр
Описание
type
Тип анимации: none, fade, slide, scale
duration
Длительность анимации в мс
easing (опционально)
Сглаживание: linear, ease-in-out и так далее
Предыдущий дизайн
Новый дизайн
doc_color
-
face_color_success
faceFrame.faceReady
faceFrameCustomization.strokeFaceInFrameColor
face_color_fail
faceFrame.faceNotReady
faceFrameCustomization.strokeDefaultColor
centerHint.textSize
centerHintCustomization.textSize
centerHint.color
centerHintCustomization.textColor
centerHint.yPosition
centerHintCustomization.verticalPosition
textColorSecondary
backgroundOpacity
strokePadding
textOpacity
loader:uploading
centerHint.letterSpacing