Advanced Usage ​

Here is an advanced guide for some optional methods that can make embedding the LIQA more seamless, and provide more control over the integration. Make sure to follow the Quick Start guide first.

Preload LIQA resources before LIQA session ​

The goal is to minimize the time the user sees the LIQA loading screen by preloading LIQA resources in advance.

You can achieve this by leveraging the preload API. The following code example illustrates the initiation of the Face preset preloading:

tsx
import { preload } from "SOURCE_URL_PROVIDED_BY_HAUT_AI/liqa.js"
 
// Initiate the preloading of the "face" preset's resource in advance
// to ensure LIQA is ready when the user encounters it
preload({ preset: "face" })

tsx
import { preload } from "SOURCE_URL_PROVIDED_BY_HAUT_AI/liqa.js"
 
// Initiate the preloading of the "face" preset's resource in advance
// to ensure LIQA is ready when the user encounters it
preload({ preset: "face" })

Recommendations for usage ​

• If your page contains some activity required before the LIQA session (e.g. filling a questionnaire/survey), it's best to execute the preloading before this user-time-consuming activity.
• Considering the tiny size of the liqa.js script (only 1.5Kb gzipped), it‘s safe to put the import of the preload function at the page‘s head without concern for its impact on the page‘s loading speed.
• If the resources have not been fully loaded before the user starts interacting with LIQA, LIQA will efficiently reuse the previously downloaded chunks, avoiding unnecessary resource reloading.

Mirror image from front camera ​

It is a common pattern for camera applications to display the video from front device camera horizontally flipped (mirrored) to ease the user ineraction. It is also common to return the final image as "camera sees" (not mirrored).

LIQA adopts this UX pattern and returns not mirrored image from LIQA sessions that used the front camera. This means that the image retrieved from the ImageCapture API looks flipped compared to what end-user saw during the interaction with LIQA.

To overwrite this default process, LIQA also provides methods to invert or re-apply mirroring to final image. You can achieve it by leveraging two ImageCapture APIs: transform and source. The following code example illustrates how the transformation is applied to the captured image with a conditional logic based on source of the image:

ts
if (capture.source === "front_camera")
  capture = capture.transform({ horizontalFlip: true })
 
const imageBlob = await capture.blob()

ts
if (capture.source === "front_camera")
  capture = capture.transform({ horizontalFlip: true })
 
const imageBlob = await capture.blob()

Recommendations for usage ​

• Please, note, that if the image from the front camera is mirrored (the code above is applied), the right side of the face on image would represent the left side of the face in reality. This should be taken into account when SaaS Face Metrics 2.0 are displayed per face area.
• The available sources for image capturing can be configured. Please, follow the Image Sources Customization Guideline.

Convert captured image to Base64-encoded string ​

The goal is to change the encoding format of the output image to better fit the upload HautAI SaaS API.

By default, LIQA emits the captured image as Blob, encoded with JPEG with 100% quality, using the blob API. The following code example provides a utility function blobToBase64 that can convert data from Blob to Base64-encoded string:

ts
function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

ts
function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

Recommendations for usage ​

Add the utility function from above to the mentioned in a Quick Start section handleImageCapture event listener for the "capture" event as follows:

ts
async function handleImageCapture(event) {
  const capture = event.detail
 
  const blob = await capture.blob() // returns the captured image as Blob JPEG
 
  const base64 = await blobToBase64(blob) // converts the captured image to Base64 string
 
  // ... app logic handling the captured image ...
}

ts
async function handleImageCapture(event) {
  const capture = event.detail
 
  const blob = await capture.blob() // returns the captured image as Blob JPEG
 
  const base64 = await blobToBase64(blob) // converts the captured image to Base64 string
 
  // ... app logic handling the captured image ...
}