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 ? | "front_camera" | "back_camera" | "upload" | "companion" | "front_camera,back_camera" | "front_camera,upload" | "front_camera,upload,companion" | "front_camera,companion" | "front_camera,back_camera,upload" | "front_camera,back_camera,companion" | "front_camera,back_camera,upload,companion" | "back_camera,upload" | "back_camera,companion" | "back_camera,upload,companion" | "upload,companion" | A list of sources to capture the image from: different device cameras or file upload. They can be combined using , separator.Visit the corresponding user flow customization section to learn about their logic and limitations. 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" . |
required-lighting ? | "none" | "adaptive" | "default" | Lighting requirements for the image capture. - "none" : no requirements are set and lighting will not be validated. (WARNING: the quality of the processing results may be affected)- "adaptive" : the requirements will be softened if the lighting conditions are poor.- "default" : the requirements will be set to optimal which will provide more details on the photo.Note: The option is only applicable to "face" preset. For other presets it is always "default" .Default "default" |
effects ? | boolean | "true" | "false" | A flag to enable or disable the effects during the image capture process. Default false |
tutorial ? | string | "image" | "video" | A flag to enable or disable tutorial option on the source selection screen. Enabled only when sources option contain "front_camera" or "back_camera" and "upload". - "video" : a video tutorial will be shown.- "image" : an image tutorial will be shown. Can be used as a fallback for reducing the loading time.Default "video" |
quality-check ? | "off" | "normal" | "strict" | A flag to set the quality check behavior. - off : the quality check will be disabled.- strict : the quality check will be strict and the user will not be able to continue if the quality criteria are not met.- normal : the quality check will be normal and the user will be able to continue even if the quality criteria are not met.Default "off" |
quality-check-sources ? | ("front_camera" | "back_camera" | "upload" | "companion" )[] | An array specifying which capture sources should enforce quality checks. The quality check behavior (set via the qualityCheck property) will only be applied for the sources included in this array.Available values are: - front_camera : Enforces quality check on images captured from the front camera.- back_camera : Enforces quality check on images captured from the back camera.- upload : Enforces quality check on images provided via file upload.- companion : Enforces quality check on images captured via a companion source.If not provided, quality checks will be applied for all sources. Default ["front_camera","back_camera","upload","companion"] |
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. |
captures | 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. |
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" . |
required-lighting ? | "none" | "adaptive" | "default" | Lighting requirements for the image capture. - "none" : no requirements are set and lighting will not be validated. (WARNING: the quality of the processing results may be affected)- "adaptive" : the requirements will be softened if the lighting conditions are poor.- "default" : the requirements will be set to optimal which will provide more details on the photo.Note: The option is only applicable to "face" preset. For other presets it is always "default" .Default "default" |
effects ? | boolean | "true" | "false" | A flag to enable or disable the effects during the image capture process. Default false |
tutorial ? | "image" | "video" | A flag to enable or disable tutorial option on the source selection screen. Enabled only when sources option contain "front_camera" or "back_camera" and "upload". - "video" : a video tutorial will be shown.- "image" : an image tutorial will be shown. Can be used as a fallback for reducing the loading time.Default "video" |
quality-check ? | "off" | "normal" | "strict" | A flag to set the quality check behavior. - off : the quality check will be disabled.- strict : the quality check will be strict and the user will not be able to continue if the quality criteria are not met.- normal : the quality check will be normal and the user will be able to continue even if the quality criteria are not met.Default "off" |
quality-check-sources ? | ("front_camera" | "back_camera" | "upload" | "companion" )[] | An array specifying which capture sources should enforce quality checks. The quality check behavior (set via the qualityCheck property) will only be applied for the sources included in this array.Available values are: - front_camera : Enforces quality check on images captured from the front camera.- back_camera : Enforces quality check on images captured from the back camera.- upload : Enforces quality check on images provided via file upload.- companion : Enforces quality check on images captured via a companion source.If not provided, quality checks will be applied for all sources. Default ["front_camera","back_camera","upload","companion"] |
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 ? | ImageFormat | 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: ImageFormat
CaptureFormat: ImageFormat
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"