Skip to content

API Reference

Component

LiqaAttributes

ts
LiqaAttributes: object
LiqaAttributes: object

LIQA Web component HTML attributes to configure the component look and behavior.

Example

html
<hautai-liqa
  license="xxx-xxx-xxx"
  styles="@import url('/path/to/custom-liqa-styles.css')"
>
</hautai-liqa>
<hautai-liqa
  license="xxx-xxx-xxx"
  styles="@import url('/path/to/custom-liqa-styles.css')"
>
</hautai-liqa>

Type declaration

MemberTypeDescription
licensestringThe license key obtained from Haut.ai.
styles?stringA string containing valid CSS rules. For more information, see Styles page.

Example

"@import url('/path/to/custom-liqa-styles.css')"
messages?stringA string containing a valid JSON object whose keys are messages keys and values are messages texts. For more information, see Text Messages page.

Example

"{ \"preview\": { \"submit\": \"Confirm\" } }"
preset?"face" | "face-180" | "hair"A preset used to customize AI quality criteria and user flow. For more information, see Presets page.

Default

"face"
sources?"camera" | "front_camera" | "back_camera" | "upload" | "camera,upload" | "front_camera,upload" | "back_camera,upload"A list of sources to capture the image from: different device cameras or file upload.
Check the relevant user flow customization section to learn about the logic.

Default

"front_camera"

Alias

"camera"
Starting from 6.7.0 version "camera" acts as an alias for "front_camera".

Note: For face-180 preset only "front_camera" source is available. The rest will be ignored.
capture?"auto" | "manual"Image capture mode for "camera" source.
"auto" means LIQA will automatically take a photo when all AI quality criteria met.
"manual" means LIQA will allow the user to take a photo on their own via a button.

Note: The option is only applicable to "hair" preset. For other presets it is always "auto".

LiqaElement

LIQA Web component available as <hautai-liqa></hautai-liqa> tag.

Example

html
<hautai-liqa license="xxx-xxx-xxx"></hautai-liqa>
<hautai-liqa license="xxx-xxx-xxx"></hautai-liqa>

Extends

  • any

Methods

addEventListener
ts
addEventListener<K>(
  type,
  listener,
  options?): void
addEventListener<K>(
  type,
  listener,
  options?): void

Subscribes the event listener to the given LIQA event.

Type parameters
Parameter
K extends keyof LiqaEventMap
Parameters
ParameterType
typeK
listenerfunction
options?any
Returns

void


removeEventListener
ts
removeEventListener<K>(
  type,
  listener,
  options?): void
removeEventListener<K>(
  type,
  listener,
  options?): void

Unsubscribes the event listener from the given LIQA event.

Type parameters
Parameter
K extends keyof LiqaEventMap
Parameters
ParameterType
typeK
listenerfunction
options?any
Returns

void


LiqaEventMap

ts
LiqaEventMap: object
LiqaEventMap: object

LIQA event names and corresponding event details.

Type declaration

MemberTypeDescription
readyvoidFired when LIQA has finished loading its resources and is ready to operate.
loadedvoidFired when LIQA has finished loading its resources and is ready to operate.

Alias

ready

Deprecated

Use the ready event instead.
captureImageCaptureFired when all the AI quality criteria passed and the user submitted the image.
The image can be obtained via the event.detail ImageCapture interface.

Note: For face-180 preset this event is dispatched 3 times (for front, left and right side captures). The captured side is written to image metadata. An example how to handle it is on Collection of Images page.
analyticsAnalyticsDetailsFired when an analytics event occur.
errorLiqaErrorFired when a LiqaError occurs.

Component (imperative)

Liqa

ts
Liqa(config): LiqaElement
Liqa(config): LiqaElement

An imperative way to create LIQA web component.

Parameters

ParameterType
configLiqaConfig

Returns

LiqaElement

Example

javascript
const liqa = new Liqa({
  license: "xxx-xxx-xxx",
  target: document.querySelector("#liqa-container"),
  styles: "@import url('/path/to/custom-liqa-styles.css')"
})
const liqa = new Liqa({
  license: "xxx-xxx-xxx",
  target: document.querySelector("#liqa-container"),
  styles: "@import url('/path/to/custom-liqa-styles.css')"
})

Deprecated

Use the <hautai-liqa> web component instead.


LiqaConfig

ts
LiqaConfig: object
LiqaConfig: object

Options to configure the LIQA‘s look and behavior.

Deprecated

Use the <hautai-liqa> web component with the LiqaAttributes instead.

Type declaration

MemberTypeDescription
licensestringThe license key obtained from Haut.ai.
target?Element | stringQuery selector to the target element or HTMLElement to render LIQA to.

Example

document.querySelector("#liqa-container")
styles?stringA string containing valid CSS rules. For more information, see Styles page.

Example

"@import url('/path/to/custom-liqa-styles.css')"
messages?MessagesAn object whose keys are messages keys and values are messages texts. For more information, see Text Messages page.

Example

{ "preview": { "submit": "Confirm" } }
preset?"face" | "face-180" | "hair"A preset used to customize AI quality criteria and user flow. For more information, see Presets page.

Default

"face"
sources?["camera" | "front_camera" | "back_camera"] | ["upload"] | ["camera" | "front_camera" | "back_camera", "upload"]A list of sources to capture the image from: different device cameras or file upload.
Check the relevant user flow customization section to learn about the logic.

Default

["front_camera"]

Alias

["camera"]
Starting from 6.7.0 version "camera" acts as an alias for "front_camera".

Note: For face-180 preset only "front_camera" source is available. The rest will be ignored.
capture?"auto" | "manual"Image capture mode for "camera" source.
"auto" means LIQA will automatically take a photo when all AI quality criteria met.
"manual" means LIQA will allow the user to take a photo on their own via a button.

Note: The option is only applicable to "hair" preset. For other presets it is always "auto".

Capture

ImageCapture

Interface for accessing the captured frame in different formats and image types.

Properties

PropertyTypeDescription
source"front_camera" | "back_camera" | "upload"The capture source.

The value can be leveraged to perform a conditional logic, e.g. a conditional horizontal flip of the captured image.
metadataCaptureMetadataThe capture-related metadata.

Methods

blob
ts
blob(format?): Promise< Blob >
blob(format?): Promise< Blob >

Converts the captured image to Blob.

Parameters
ParameterTypeDescription
format?CaptureFormatDesired image format. "jpeg" by default.
Returns

Promise< Blob >

The captured frame as Blob in the specified image format.

Example
js
const imageBlob = await capture.blob()
const imageBlob = await capture.blob()

transform
ts
transform(transformations): ImageCapture
transform(transformations): ImageCapture
Parameters
ParameterType
transformationsCaptureTransformations
Returns

ImageCapture

a copy of the ImageCapture with the specified transformations applied.

Example
js
/*
   By default, the image is returned as the camera sees it,
   but it can be flipped horizontally to look like it is in a mirror
*/
const mirroredImageBlob = await capture
   .transform({ horizontalFlip: true })
   .blob()
/*
   By default, the image is returned as the camera sees it,
   but it can be flipped horizontally to look like it is in a mirror
*/
const mirroredImageBlob = await capture
   .transform({ horizontalFlip: true })
   .blob()

CaptureTransformations

ts
CaptureTransformations: object
CaptureTransformations: object

Image capture transformations.

Type declaration

MemberTypeDescription
horizontalFlip?booleanMirrors the given image horizontally

Default

false

CaptureFormat

ts
CaptureFormat: "jpeg" | "png" | "webp"
CaptureFormat: "jpeg" | "png" | "webp"

Image capture image format.


CaptureMetadata

ts
CaptureMetadata: object
CaptureMetadata: object

The capture-related metadata.

Type declaration

MemberTypeDescription
presetNonNullable< LiqaAttributes >["preset"]Preset used to produce the capture, reflects LiqaAttributes.preset
sourceNonNullable< LiqaAttributes >["sources"][number]The source of the capture, reflects LiqaAttributes.source
side?"front" | "left" | "right"The captured face side, either "front", "left", or "right"
captureLiqaAttributes["capture"]The capture mode, reflects LiqaAttributes.capture

Analytics

AnalyticsEventsMap

ts
AnalyticsEventsMap: object
AnalyticsEventsMap: object

LIQA analytics event names and corresponding event payloads. For more information, see CTA Events page.

Type declaration

MemberTypeDescription
photo_uploadvoidFired when the user uploads a photo via the Source Selection screen.
photo_captureobjectFired when a photo of the user is captured.
photo_capture.mode"auto" | "manual"The photo capture mode. Reflects the capture parameter of LiqaAttributes.
photo_retakevoidFired when the user decided to retake the photo capture.
photo_confirmobjectFired when the user confirmed the photo capture.
photo_confirm.camera_facing_mode?"front" | "back"-

AnalyticsDetails

ts
AnalyticsDetails: { [K in keyof AnalyticsEventsMap]: Object }[keyof AnalyticsEventsMap]
AnalyticsDetails: { [K in keyof AnalyticsEventsMap]: Object }[keyof AnalyticsEventsMap]

LIQA analytics event detail.

Example

js
function handleLiqaAnalyticsEvent(event) {
  const { name, payload } = event.detail

  if (name === "photo_capture") {
    if (payload.mode === "auto")
      console.log("LIQA has automatically captured a photo")
    if (payload.mode === "manual")
      console.log("User has manually captured a photo")
  }

  if (name === "photo_upload")
    console.log("User has uploaded a photo")

  if (name === "photo_retake")
    console.log("User decided to retake the photo")
  if (name === "photo_confirm")
    console.log("User has confirmed the photo")
}
function handleLiqaAnalyticsEvent(event) {
  const { name, payload } = event.detail

  if (name === "photo_capture") {
    if (payload.mode === "auto")
      console.log("LIQA has automatically captured a photo")
    if (payload.mode === "manual")
      console.log("User has manually captured a photo")
  }

  if (name === "photo_upload")
    console.log("User has uploaded a photo")

  if (name === "photo_retake")
    console.log("User decided to retake the photo")
  if (name === "photo_confirm")
    console.log("User has confirmed the photo")
}

Errors

ErrorCodes

Enumeration Members

MemberValueDescription
UNKNOWN0An unexpected error that should never arise. Please, contact LIQA support in case of occurrence and provide reproduction details.
LICENSE_KEY_MALFORMED1The supplied License key is malformed or missing.
LICENSE_KEY_EXPIRED2The supplied License key has expired.
CAMERA_NOT_FOUND3The environment has no camera devices available.
CAMERA_PERMISSION_DENIED4-

LiqaError

Extends

  • Error

Properties

PropertyTypeDescription
readonly name"LiqaError"The name for the type of error.
MDN Reference
readonly codeErrorCodesInternal error code.
You may want to report this value when discussing an issue with LIQA support.
readonly messagestringA human-readable description of the error.
MDN Reference
cause?ErrorThe specific original cause of the error.
MDN Reference
stack?stringA trace of which functions were called, in what order, from which line and file, and with what arguments.
MDN Reference

Misc

preload

ts
preload(options = {}): Promise< void >
preload(options = {}): Promise< void >

Preloads preset‘s resources in advance. For more information, see Preload Resources page.

Parameters

ParameterTypeDescription
optionsPreloadOptionsPreload options.

Returns

Promise< void >

Example

ts
preload({ preset: "face" })
preload({ preset: "face" })

PreloadOptions

ts
PreloadOptions: Pick< Props, "preset" >
PreloadOptions: Pick< Props, "preset" >

VERSION

ts
const VERSION: string
const VERSION: string

The library version.

Example

js
"6.0.0"
"6.0.0"