Quick Start ​

Here is a 3-minute guide of LIQA integration into your web application with the default LIQA configuration.

1. Access credentials
2. Import
3. Integration
4. Collection of Images

Access credentials ​

1. Contact Haut.AI to acquire the license for LIQA. See the Licensing section for more details.
2. Receive a CDN (Content Delivery Network) URL "SOURCE_URL_PROVIDED_BY_HAUT.AI". This URL is used for downloading LIQA assets during LIQA sessions.
3. Receive a license key "LICENSE_KEY_PROVIDED_BY_HAUT.AI". This key is used for identifying your Company during LIQA sessions.

Import ​

Connect the LIQA JavaScript library to your web application via the <script> tag:

<script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>

<script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>

This script exposes <hautai-liqa></hautai-liqa> tag that encapsulates the LIQA user-facing interface and logic, ready to be used.

Integration ​

Place the <hautai-liqa> tag in the desired place in your application markup:

tsx
<hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

tsx
<hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

This script inserts LIQA into the selected place of your application and automatically starts the LIQA session.

Collection of Images ​

Collect the standardized images emitted by LIQA by adding an event listener for the "capture" event:

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("capture", handleImageCapture)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("capture", handleImageCapture)

tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("capture", handleImageCapture)
 
    return () => ref.current.removeEventListener("capture", handleImageCapture)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}

tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("capture", handleImageCapture)
 
    return () => ref.current.removeEventListener("capture", handleImageCapture)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @capture="handleImageCapture"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @capture="handleImageCapture"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (capture)="handleImageCapture($event)"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (capture)="handleImageCapture($event)"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:capture="{handleImageCapture}"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:capture="{handleImageCapture}"
></hautai-liqa>

This script offers an event listener with a mockup function for handling the LIQA ImageCapture. The simplest handleImageCapture function converts the captured image into a Blob JPEG that can be later displayed or sent to the server.

Single capture ​

Applies to the "hair" and "face" presets. The following code snippet demonstrates how to handle a single image capture event:

ts
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob (JPEG format)
 
  // ...app logic handling the captured image...
}

ts
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob (JPEG format)
 
  // ...app logic handling the captured image...
}

Multiple captures ​

Applies to the "face-180" preset. When the capture process completes, it produces 3 different images, each representing a different face side. You can retrieve the information about the face side from the image metadata (event.detail.metadata). The code snippet below demonstrates an example how to handle multiple captures and process each based on the face side::

ts
const processedCaptures = []
 
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob (JPEG format)
  const { side } = capture.metadata // access the capture's face side
  const processedCapture = yourCustomProcessing(image, side)
 
  // ...app logic handling the captured image...
 
  processedCaptures.push(processedCapture)
}

ts
const processedCaptures = []
 
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob (JPEG format)
  const { side } = capture.metadata // access the capture's face side
  const processedCapture = yourCustomProcessing(image, side)
 
  // ...app logic handling the captured image...
 
  processedCaptures.push(processedCapture)
}