Types

CameraConfig

The camera configuration for virtual camera detection

type CameraConfig = {
  virtualLabel: string[];
};

Properties:

Name/PathTypeDescription
virtualLabelstring[]An array of substrings for virtual camera detection to test against

CompressionAlgorithm

Image compression algorithm parameters

type CompressionAlgorithm = {
  dimension: ImageDimension,
  fileSizeThreshold: number,
  qualityThreshold?: number,
};

Properties:

Name/PathTypeDescription
dimensionImageDimensionThe preffered photo dimension
fileSizeThresholdnumberMaximum photo size
qualityThresholdnumber | undefinedMinimum photo quality in percentage

Credential

The credential configuration for generating image hash for authenticity check

type Credential = {
  clientId: string;
  secret: string;
};

Properties:

Name/PathTypeDescription
clientIdstringThe client id to be included for image hashing
secretstringThe secret for image hashing

Endpoint

An endpoint specification

type Endpoint = {
  headers: Record<any, any>;
  params: Record<any, any>;
  url: Url;
};

Properties:

Name/PathTypeDescription
headersRecord<any, any>The custom header field to be sent together
paramsRecord<any, any>The query parameter field to be sent together
urlUrlThe url destination

ImageDimension

Image dimension array of 2 numbers, width and height respectively

type ImageDimension = [number, number];

Instruction

The instruction type

type Instruction =
  | 'look_left'
  | 'look_right'
  | 'open_mouth'
  | 'see_straight';

Values:

ValueDescription
look_leftLook left instruction
look_rightLook right instruction
open_mouthOpen mouth instruction
see_straightSee straight instruction

📘

Info

For content of running verification screen illustration, please check Builder.setInstruction.

InstructionOptions

Active liveness parameters

type InstructionOptions = {
  commands: Instruction[];
  seedLimit: number;
  translator: Record<Instruction, string>;
  illustrator: Record<Instruction, string>;
  isShowInstruction: boolean;
  isSoundLooping: boolean;
  isUseSound: boolean;
  speaker: Record<Instruction, string>;
};

Properties:

Name/PathTypeDescription
commandsInstruction[]Instructions to be appended at the end of random generated instructions
seedLimitnumberRandom instruction count to be generated
translatorRecord<Instruction, string>Instruction text to be shown according to each instructions
illustratorRecord<Instruction, string>Instruction image to be shown according to each instructions
isShowInstructionbooleanHide instruction text if true
isSoundLoopingbooleanLoop instruction sound if true
isUseSoundbooleanPlay instruction sound if true
speakerRecord<Instruction, string>Instruction sound to be played according to each instructions

📘

Info

For content of running verification screen illustration, please check Builder.setInstruction.

InstructionPageContent

Instruction page content configuration

type InstructionPageContent = {
  title: string;
  subtitle: string;
  instructions: Array<{
    caption: string;
    image: string;
  }>;
  action: {
    backIcon: string;
    start: string;
    next: string;
  };
};

Properties:

Name/PathTypeDescription
titlestringThe title text
subtitlestringThe subtitle text below the title text
instructionsobject[]The instruction contents on the instruction page
instructions[number].captionstringThe instruction image caption
instructions[number].imagestringThe instruction image url
actionobjectThe instruction page action button content configurations
action.backIconstringThe back icon image url
action.startstringThe start button text
action.nextstringThe next button text

Images:

Instruction content names/paths on first instruction

Instruction content names/paths on first instruction

Instruction content names/paths on last instruction

Instruction content names/paths on last instruction

📘

Note

  • The back icon is only visible on the second to the last instruction of the
    instruction page.
  • The next button is only visible on the first to the second last instruction,
    while the start button is only visible on the last instruction.

InstructionPageTheme

Instruction page theme configuration

type InstructionPageTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
  };
  subtitle: {
    color: string;
    fontSize: string;
  };
  figcaption: {
    color: string;
    fontSize: string;
  };
  action: {
    start: {
      color: string;
      fontSize: string;
      backgroundColor: string;
      hover: {
        backgroundColor: string;
      };
    };
    next: {
      color: string;
      fontSize: string;
      backgroundColor: string;
      hover: {
        backgroundColor: string;
      };
    };
  };
};

Properties:

Name/PathTypeDescription
frameContainerobjectThe page frame container style
frameContainer.backgroundColorstringThe page frame container background color
titleobjectThe title style
title.colorstringThe title font color
title.fontSizestringThe title font size
subtitleobjectThe subtitle style
subtitle.colorstringThe subtitle font color
subtitle.fontSizestringThe subtitle font size
figcaptionobjectThe figcaption style
figcaption.colorstringThe figcaption font color
figcaption.fontSizestringThe figcaption font size
actionobjectThe action styles
action.startobjectThe start action button style
action.start.colorstringThe start action button font color
action.start.fontSizestringThe start action button font size
action.start.backgroundColorstringThe start action button background color
action.start.hoverobjectThe start action button hover style
action.start.hover.backgroundColorstringThe start action button background color when hovered
action.nextobjectThe next action button style
action.next.colorstringThe next action button font color
action.next.fontSizestringThe next action button font size
action.next.backgroundColorstringThe next action button background color
action.next.hoverobjectThe next action button hover style
action.next.hover.backgroundColorstringThe next action button background color when hovered

Images:

Instruction theme names/paths on first instruction

Instruction theme names/paths on first instruction

Instruction theme names/paths on first instruction

Instruction theme names/paths on first instruction

📘

Note

  • The back icon is only visible on the second to the last instruction of the
    instruction page.
  • The next button is only visible on the first to the second last instruction,
    while the start button is only visible on the last instruction.

LivenessContentConfiguration

The Liveness WebSDK content configuration

type ContentConfiguration = {
  Instruction: InstructionPageContent;
  Verification: VerificationPageContent;
  Result: ResultPageContent;
};

Properties:

NameTypeDescription
InstructionInstructionPageContentInstruction page content configuration
VerificationVerificationPageContentVerification page content configuration
ResultResultPageContentResult page content configuration

LivenessSDK

The Liveness WebSDK instance

type LivenessSDK = {
  onStart: (hideFrame?: boolean) => void;
  onDestroy: () => void;
};

Methods:

Name/PathType SignatureDescription
onStart(hideFrame?: boolean) => voidShows and starts the Liveness WebSDK
onDestroy() => voidStops and remove the Liveness WebSDK

onStart

Shows and starts the Liveness WebSDK

onStart(hideFrame?: boolean): void;

Parameters:

NameTypeDescription
hideFrameboolean | undefinedHides the Liveness WebSDK if true.

onDestroy

Stops and remove the Liveness WebSDK

onDestroy(): void;

LivenessThemeConfiguration

The Liveness WebSDK theme configuration

type LivenessThemeConfiguration = {
  Component: {
    Instruction: InstructionPageTheme;
    Verification: VerificationPageTheme;
    Result: ResultPageTheme;
    Shared: SharedTheme;
  };
  Palette: ThemePalette;
  Typography: TypographyPalette;
};

Properties:

Name/PathTypeDescription
ComponentobjectAll page theme configurations
Component.InstructionInstructionPageThemeInstruction page theme configuration
Component.VerificationVerificationPageThemeVerification page theme configuration
Component.ResultResultPageThemeResult page theme configuration
Component.SharedSharedThemeShared theme configuration
PalettePaletteThemeGlobal palette configuration
TypographyTypographyThemeGlobal typography configuration

Palette

A color palette for theming

type Palette = {
  contrastText: string;
  default: string;
  LIGHT: string;
  DARK: string;
};

Properties:

Name/PathTypeDescription
contrastTextstringUsually for button text color
defaultstringPrimary color for the palette
LIGHTstringLighter version of the default color
DARKstringLightest version of the default color

PaletteTheme

Global palette configuration

type PaletteTheme = {
  primary: Palette;
  secondary: Palette;
};

Properties:

Name/PathTypeDescription
primaryPaletteThe primary palette
secondaryPaletteThe secondary palette

ProxyMiddleware

Endpoint specification collection for the Liveness WebSDK

type ProxyMiddleware = {
  License: Endpoint;
  PassiveLiveness: Endpoint;
  GenerateKey?: Endpoint;
};

Properties:

Name/PathTypeDescription
LicenseEndpointThe license endpoint specification
PassiveLivenessEndpointThe passive liveness endpoint specification
GenerateKeyEndpoint | undefinedThe generate key endpoint specification

ResultPageContent

Result page content configuration

type ResultPageContent = {
  icon: string;
  description: string;
};

Properties:

Name/PathTypeDescription
iconstringThe result icon image url
descriptionstringThe result description text

Images:

Result content names/paths

Result content names/paths

ResultPageTheme

Result page theme configuration

type ResultPageTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  description: {
    color: string;
    fontSize: string;
  };
};

Properties:

Name/PathTypeDescription
frameContainerobjectThe page frame container style
frameContainer.backgroundColorstringThe page frame container background color
descriptionobjectThe description style
description.colorstringThe description font color
description.fontSizestringThe description font size

Images:

Result theme names/paths

Result theme names/paths


SharedTheme

Shared theme configuration

type SharedTheme = {
  background: {
    backgroundColor: string;
    backgroundImage: string;
    backgroundSize: string;
  };
};

Properties:

Name/PathTypeDescription
backgroundobjectThe background style
background.backgroundColorstringThe background color
background.backgroundImagestringThe background image url
background.backgroundSizestringThe background size

ScreenOrientation

The orientation for photo output

type ScreenOrientation =
  | 'auto'
  | 'landscape'
  | 'portrait';

Values:

ValueDescription
autoAutomatically detect current screen orientation
landscapeForce landscape
portraitForce portrait

Url

Url string

type Url = string;

VerificationPageContent

Verification page content configuration

type VerificationPageContent = {
  title: string;
  action: {
    backIcon: string;
  };
  instruction: {
    loading: {
      caption: string;
      image: string;
      sound: string;
    };
    processing: {
      caption: string;
      image: string;
      sound: string;
    };
  };
};

Properties:

Name/PathTypeDescription
titlestringThe title text
actionobjectThe verification page action button content configurations
action.backIconstringThe back icon image url
instructionobjectThe status content configurations
instruction.loadingobjectThe loading status content configuration
instruction.loading.captionstringThe loading status caption
instruction.loading.imagestringThe loading status image url
instruction.loading.soundstringThe loading status sound url
instruction.processingobjectThe processing status content configuration
instruction.processing.captionstringThe processing status caption
instruction.processing.imagestringThe processing status image url
instruction.processing.soundstringThe processing status sound url

Images:

Verification content names/paths on loading verification

Verification content names/paths on loading verification

Verification content names/paths on processing/final verification

Verification content names/paths on processing/final verification

📘

Note

  • The loading verification screen will only be shown when the active
    liveness model is loading.
  • The processing/final verification screen will only be shown when the
    active liveness model is finished and the passive liveness model is
    running.

📘

Info

For content of running verification screen illustration, please check Builder.setInstruction.

VerificationPageTheme

Verification page theme configuration

type VerificationPageTheme = {
  frameContainer: {
    backgroundColor: string;
  };
  title: {
    color: string;
    fontSize: string;
  };
  camera: {
    initial: {
      borderColor: string;
    };
    undetected: {
      borderColor: string;
    };
    detected: {
      borderColor: string;
    };
  };
  instruction: {
    backgroundColor: string;
    color: string;
    fontSize: string;
  };
};

Properties:

Name/PathTypeDescription
frameContainerobjectThe page frame container style
frameContainer.backgroundColorstringThe page frame container background color
titleobjectThe title style
title.colorstringThe title font color
title.fontSizestringThe title font size
cameraobjectThe camera preview style
camera.initialobjectThe camera preview initial style
camera.initial.borderColorstringThe camera preview initial border color
camera.undetectedobjectThe camera preview style when face is undetected
camera.undetected.borderColorstringThe camera preview border color when face is undetected
camera.detectedobjectThe camera preview style when face is detected
camera.detected.borderColorstringThe camera preview border color when face is detected
instructionobjectThe instruction section style
instruction.backgroundColorstringThe instruction section background color
instruction.colorstringThe instruction section font color
instruction.fontSizestringThe instruction section font size

Images:

Verification theme names/paths on loading verification with initial border color

Verification theme names/paths on loading verification with initial border color

Verification theme names/paths on processing/final verification with face detected border color

Verification theme names/paths on processing/final verification with face detected border color

Verification theme names/paths on running verification with undetected face border color

Verification theme names/paths on running verification with undetected face border color

📘

Note

  • The loading verification screen will only be shown when the active liveness model is loading.

  • The processing/final verification screen will only be shown when the active liveness model is finished and the passive liveness model is running.

  • The running verification screen will only be shown when the active liveness model is running.

  • The initial border color will only be shown when the active liveness model is loading.

  • The detected border color will only be shown when the face is fully detected by the active liveness.

  • The undetected border color will only show when:

    1. the full face is not detected after the full face was detected (i.e the full face was detected, then pulled out) within 3 seconds after the model is loaded, or
    2. the full face was never detected after the model is loaded.

    When the full face is not detected after a successful full face detection and 3 seconds after the model is loaded, message Verification.Disrupted

📘

Info

For content of running verification screen illustration, please check Builder.setInstruction.

TypographyTheme

Global typography configuration

type TypographyTheme = {
  fontFamily: string[];
  fontSize: {
    title: string;
    body: string;
    caption: string;
    button: string;
  };
};

Properties:

Name/PathTypeDescription
fontFamilystring[]An array of font family. Uses the first one. If not available, uses the next one.
fontSizeobjectText font size variations
fontSize.titlestringTitle text font size
fontSize.bodystringBody text font size
fontSize.captionstringCaption text font size
fontSize.buttonstringButton text font size