Skip to content

API Reference

Component

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.
analyticsAnalyticsDetailsFired when an analytics event occur.
errorLiqaErrorFired when a LiqaError occurs.

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

  • HTMLElement

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?boolean | AddEventListenerOptions
Returns

void

Inherited from

HTMLElement.addEventListener


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?boolean | EventListenerOptions
Returns

void

Inherited from

HTMLElement.removeEventListener


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.

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.

Example

"{ \"preview\": { \"submit\": \"Confirm\" } }"
preset?"face" | "hair"A preset used to customize AI quality criteria and user flow.

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".
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.
The option is only applicable to "hair" preset. For other presets it is always "auto".

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.

Example

"@import url('/path/to/custom-liqa-styles.css')"
messages?DeepPartial< typeof Messages >An object whose keys are messages keys and values are messages texts.

Example

{ "preview": { "submit": "Confirm" } }
preset?"face" | "hair"A preset used to customize AI quality criteria and user flow.

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".
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.
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.

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.

Analytics

AnalyticsEventsMap

ts
AnalyticsEventsMap: object
AnalyticsEventsMap: object

LIQA analytics event names and corresponding event payloads.

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.

Parameters

ParameterTypeDescription
optionsPreloadOptionsPreload options.

Returns

Promise< void >

Example

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

PreloadOptions

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

VERSION

ts
const VERSION: string
const VERSION: string

The library version.

Example

js
"6.0.0"
"6.0.0"

NAME

ts
const NAME: "hautai-liqa"
const NAME: "hautai-liqa"

The Web component name.