Appearance
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
Member | Type | Description |
---|---|---|
license | string | The license key obtained from Haut.ai. |
styles ? | string | A string containing valid CSS rules. For more information, see Styles page. Example "@import url('/path/to/custom-liqa-styles.css')" |
messages ? | string | A 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
Parameter | Type |
---|---|
type | K |
listener | function |
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
Parameter | Type |
---|---|
type | K |
listener | function |
options ? | any |
Returns
void
LiqaEventMap
ts
LiqaEventMap: object
LiqaEventMap: object
LIQA event names and corresponding event details.
Type declaration
Member | Type | Description |
---|---|---|
ready | void | Fired when LIQA has finished loading its resources and is ready to operate. |
loaded | void | Fired when LIQA has finished loading its resources and is ready to operate. Alias ready Deprecated Use the ready event instead. |
capture | ImageCapture | Fired 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. |
analytics | AnalyticsDetails | Fired when an analytics event occur. |
error | LiqaError | Fired when a LiqaError occurs. |
Component (imperative)
Liqa
ts
Liqa(config): LiqaElement
Liqa(config): LiqaElement
An imperative way to create LIQA web component.
Parameters
Parameter | Type |
---|---|
config | LiqaConfig |
Returns
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
Member | Type | Description |
---|---|---|
license | string | The license key obtained from Haut.ai. |
target ? | Element | string | Query selector to the target element or HTMLElement to render LIQA to. Example document.querySelector("#liqa-container") |
styles ? | string | A string containing valid CSS rules. For more information, see Styles page. Example "@import url('/path/to/custom-liqa-styles.css')" |
messages ? | Messages | An 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
Property | Type | Description |
---|---|---|
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. |
metadata | CaptureMetadata | The capture-related metadata. |
Methods
blob
ts
blob(format?): Promise< Blob >
blob(format?): Promise< Blob >
Converts the captured image to Blob.
Parameters
Parameter | Type | Description |
---|---|---|
format ? | CaptureFormat | Desired 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
Parameter | Type |
---|---|
transformations | CaptureTransformations |
Returns
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
Member | Type | Description |
---|---|---|
horizontalFlip ? | boolean | Mirrors 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
Member | Type | Description |
---|---|---|
preset | NonNullable < LiqaAttributes >["preset" ] | Preset used to produce the capture, reflects LiqaAttributes.preset |
source | NonNullable < LiqaAttributes >["sources" ][number ] | The source of the capture, reflects LiqaAttributes.source |
side ? | "front" | "left" | "right" | The captured face side, either "front", "left", or "right" |
capture | LiqaAttributes ["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
Member | Type | Description |
---|---|---|
photo_upload | void | Fired when the user uploads a photo via the Source Selection screen. |
photo_capture | object | Fired when a photo of the user is captured. |
photo_capture.mode | "auto" | "manual" | The photo capture mode. Reflects the capture parameter of LiqaAttributes. |
photo_retake | void | Fired when the user decided to retake the photo capture. |
photo_confirm | object | Fired 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
Member | Value | Description |
---|---|---|
UNKNOWN | 0 | An unexpected error that should never arise. Please, contact LIQA support in case of occurrence and provide reproduction details. |
LICENSE_KEY_MALFORMED | 1 | The supplied License key is malformed or missing. |
LICENSE_KEY_EXPIRED | 2 | The supplied License key has expired. |
CAMERA_NOT_FOUND | 3 | The environment has no camera devices available. |
CAMERA_PERMISSION_DENIED | 4 | - |
LiqaError
Extends
Error
Properties
Property | Type | Description |
---|---|---|
readonly name | "LiqaError" | The name for the type of error. MDN Reference |
readonly code | ErrorCodes | Internal error code. You may want to report this value when discussing an issue with LIQA support. |
readonly message | string | A human-readable description of the error. MDN Reference |
cause ? | Error | The specific original cause of the error. MDN Reference |
stack ? | string | A 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
Parameter | Type | Description |
---|---|---|
options | PreloadOptions | Preload 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"