# Настройка интерфейса Для настройки интерфейса воспользуйтесь разделом `style` в методе `Ozliveness.open`. Полный список настроек приведен после примера. Пример использования: ```css 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% }, switchCameraButtonCustomization: { enableSwitchCameraButton: true, }, .ozliveness_wrap_overlay .ozliveness_face_stroke { overflow: hidden; box-shadow: 0 0 10px rgb(90 201 207); border: none; /* важно: удалите используемую по умолчанию рамку */ }, /* для HTML-строки используйте тип string; HTMLElement нужно вставить через cloneNode(true) */ loaderSlot: yourLoader, /* */ loaderTransition: {type: 'fade', duration: 500} } }); ``` ### baseColorCustomization Основные цветовые настройки. | **Параметр** | **Описание** | | ------------------------ | -------------------------- | | textColorPrimary | Основной цвет текста | | backgroundColorPrimary | Основной цвет фона | | textColorSecondary | Дополнительный цвет текста | | backgroundColorSecondary | Дополнительный цвет фона | | iconColor | Цвет значков | ### baseFontCustomization Основные настройки шрифта. | **Параметр** | **Описание** | | ------------ | ------------------- | | textFont | Шрифт | | textSize | Размер шрифта | | textWeight | Насыщенность шрифта | | textStyle | Стиль текста | ### titleFontCustomization Настройки шрифта заголовка. | **Параметр** | **Описание** | | ------------ | ------------------- | | textFont | Шрифт | | textSize | Размер шрифта | | textWeight | Насыщенность шрифта | | textStyle | Стиль текста | ### buttonCustomization Настройки кнопок. | **Параметр** | **Описание** | | ------------------------ | -------------------------- | | textFont | Шрифт | | textSize | Размер шрифта | | textWeight | Насыщенность шрифта | | textStyle | Стиль текста | | textColorPrimary | Основной цвет текста | | backgroundColorPrimary | Основной цвет фона | | textColorSecondary | Дополнительный цвет текста | | backgroundColorSecondary | Дополнительный цвет фона | | cornerRadius | Угловой радиус кнопки | ### toolbarCustomization Настройки панели инструментов. | **Параметр** | **Описание** | | --------------- | ---------------------- | | closeButtonIcon | Значок кнопки закрытия | | iconColor | Цвет значка | ### centerHintCustomization Настройки подсказки в центре. | **Параметр** | **Описание** | | ---------------------- | ----------------------- | | textFont | Шрифт | | textSize | Размер шрифта | | textWeight | Насыщенность шрифта | | textStyle | Стиль текста | | textColor | Цвет текста | | backgroundColor | Цвет фона | | backgroundOpacity | Непрозрачность фона | | backgroundCornerRadius | Угловой радиус подложки | | verticalPosition | Положение по вертикали | ### hintAnimation Анимация подсказки. | **Параметр** | **Описание** | | ------------------- | ------------------------ | | hideAnimation | Скрыть анимацию | | hintGradientColor | Цвет градиента | | hintGradientOpacity | Непрозрачность градиента | | animationIconSize | Размер значка анимации | ### faceFrameCustomization Настройки рамки вокруг лица. | **Параметр** | **Описание** | | ---------------------- | ------------------------------------ | | geometryType | Форма рамки – прямоугольник или овал | | cornersRadius | Угловой радиус прямоугольника | | strokeDefaultColor | Цвет рамки (лицо не в кадре) | | strokeFaceInFrameColor | Цвет рамки (лицо в кадре) | | strokeOpacity | Непрозрачность обводки | | strokeWidth | Толщина линии обводки | | strokePadding | Отступ в рамке | ### documentFrameCustomization Настройки рамки для съемки документа. | **Параметр** | **Описание** | | --------------- | ---------------------- | | cornersRadius | Угловой радиус | | templateColor | Цвет шаблона | | templateOpacity | Непрозрачность шаблона | ### backgroundCustomization Настройки фона. | **Параметр** | **Описание** | | ----------------- | ------------------- | | backgroundColor | Цвет фона | | backgroundOpacity | Непрозрачность фона | ### antiscamCustomization Настройки защиты от мошенников: при включении во время записи видео появляется дополнительное сообщение. | **Параметр** | **Описание** | | ---------------------- | ------------------------- | | textMessage | Текст сообщения | | textFont | Шрифт | | textSize | Размер шрифта | | textWeight | Насыщенность шрифта | | textStyle | Стиль текста | | textColor | Цвет текста | | textOpacity | Непрозрачность текста | | backgroundColor | Цвет фона | | backgroundOpacity | Непрозрачность фона | | backgroundCornerRadius | Угловой радиус подложки | | flashColor | Цвет мигающего индикатора | ### versionTextCustomization Настройки текста версии SDK. | **Параметр** | **Описание** | | ------------ | --------------------- | | textFont | Шрифт | | textSize | Размер шрифта | | textWeight | Насыщенность шрифта | | textStyle | Стиль текста | | textColor | Цвет текста | | textOpacity | Непрозрачность текста | ### maskCustomization Настройки 3D-маски, добавленной в версии 1.2.1. | **Параметр** | **Описание** | | ------------ | ----------------------------------------------------------- | | maskColor | Цвет самой маски | | glowColor | Цвет обводки маски | | minAlpha | Минимальный уровень прозрачности маски (добавлено в 1.3.1) | | maxAlpha | Максимальный уровень прозрачности маски (добавлено в 1.3.1) | ### switchCameraButtonCustomization Настройка управляет видимостью кнопки переключения камеры (добавлено в 1.7.14). | **Parameter** | **Description** | | ------------------------ | -------------------------------------------------------------------------------------------------------------- | | enableSwitchCameraButton | | ### loaderSlot Настройки loader (добавлено в 1.7.15).
СобытиеPayloadВызов
loader:init{os, browser, platform}сразу после вставки слота
loader:waitingCamera{os, browser, platform, waitedMs}каждые waitedMs мс, пока нет доступа к камере
loader:cameraReady когда доступ к камере получен и loader нужно скрыть
loader:processing{phase: 'start' | 'end'}до / после подготовки данных
loader:uploading{phase: 'start' | 'progress' | 'end', percent?}до / во время / после отправки данных
loader:destroy при скрытии слота
### loaderTransition Настройки переходов loader (добавлено в 1.8.0).
ПараметрОписание
typeТип анимации: none, fade, slide, scale
durationДлительность анимации в мс
easing (опционально)Сглаживание: linear, ease-in-out и так далее
### .ozliveness\_face\_stroke Используйте этот класс для настройки внешнего вида овала (с версии 1.9.2). Поддерживаются все стандартные инструменты CSS. ### Переход на новый дизайн с предыдущих версий (до 1.0.1) Таблица соответствия параметров: | **Предыдущий дизайн** | **Новый дизайн** | | ----------------------------------------------------- | --------------------------------------------- | | 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 | | centerHint.letterSpacing | - | | centerHint.fontStyle | centerHintCustomization.textStyle | | closeButton.image | - | | backgroundOutsideFrame.color | backgroundCustomization.backgroundColor |