LIQA™

Appearance

Image Sources ​

LIQA is designed to collect the standardized images. Image Source is a setting that defines what image sources are offered for the end-user in your integration in their user flow. The supported options include:

  1. Start with front (selfie) camera
  2. Start with back (main) camera
  3. Start with screen allowing to select between camera and gallery upload options
  4. Start with screen allowing to take a photo on mobile device

Use the sources API to customize the user flow. If property is left empty, the default option will be used. See all available options below.

Start with Front (Selfie) Device Camera default ​

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

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera"
>
</hautai-liqa>
Backward compatibility: "camera" = "front_camera"

Previously, the default option was known as "camera" image source and it started front (selfie) device camera.

To maintain the backward compatibility for most of current users, this old API parameter is still supported and it equals to "front_camera". Still we recommend using the "front_camera" parameter for better clarity.

How it works ​

  1. When the LIQA session starts, the user is immediately prompted to allow access to the camera with a native browser dialog.
  2. When the user allows camera access, the front camera video feed is started and the user can interact with the LIQA AR interface and take a photo.
  3. If the device has at least one back camera available and back_camera source is provided, the user will be able to switch between front and back cameras by tapping the switch button in the LIQA interface during LIQA session. The button can be styled, check the relevant CSS selector.

Supported fallbacks ​

Full user flow for this option ​

Start with Back (Main) Device Camera ​

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

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

How it works ​

  1. When LIQA session starts, the user is immediately prompted to allow access to the device camera with a native browser dialog.
  2. When the user allows camera access, the back camera video feed is started and the user can interact with LIQA AR interface and take a photo.
  3. If the device has at least one front camera available and front_camera source is provided, the user will be able to switch between back and front cameras by tapping the switch button in the LIQA interface during LIQA session. The button can be styled, check the relevant CSS selector.

Preset-specific support ​

  • "back_camera" image source is supported only for "hair" and "face" presets.

Multiple back camera support device-specific feature ​

If the device has more than 1 back camera (e.g. smartphone with 2+ camera lenses), LIQA will automatically select the one camera that suits best for portrait photos.

Example

iPhone 15 has 3 back cameras: 1 Back, 2 Back Ultrawide (zoomed-out), 3 Back Telephoto (zoomed-in, macro). LIQA always selects 1 Back camera for portrait photos.

Focus auto-switch (macro lens) OS version-specific feature ​

For some latest iOS devices, LIQA can automatically detect the need to switch to a macro lens when the face is detected at a very close distance. When the user's face moves away from the back camera, LIQA will automatically switch back to the main lens.

UX notice

The lens switch moment might be noticeable to the user by a slight change in video feed appearance. The switch is necessary to make sure that the user's face is captured in the focus.

Supported fallbacks ​

Full user flow for this option ​

By default, uploading of photos is not allowed to the user. Instead, it is used only as a fallback option (see supported fallbacks for front camera, back camera).

To enable the photo upload option as a part of default user flow part, add the upload image source for the selected camera source:

tsx
tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
>
</hautai-liqa>
tsx
tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="back_camera,upload"
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="back_camera,upload"
>
</hautai-liqa>

How it works ​

  1. When LIQA session starts, source-selection screen is displayed to the user. On this screen the user can select one of two options: use camera (front/back/both, depending on the passed sources) or upload photo from the device gallery.
  2. When the user selects to use camera, the user flow is the same as for the selected camera source (front camera, back camera).
  3. When the user selects to upload a photo, the user is able to select and upload any photo from the device gallery.

Preset-specific support ​

  • "upload" image source is supported only for "hair" and "face" presets.

Full user flow for this option ​

Allow taking photo on mobile device (companion flow) optional ​

To enable the companion flow, add companion image source to the web-component's sources attribute:

The full description of this feature is located on Two-Device Flow page.

tsx
tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload,companion"
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload,companion"
>
</hautai-liqa>

How it works ​

  1. When LIQA session starts and it detects that the session is initiated on desktop, LIQA displays source-selection screen and prompts to scan a QR-code to take photo on user's mobile device. If LIQA doesn't detect that the session was started on desktop, the user goes through the usual LIQA flow (front camera, back camera, upload).
  2. When the user scans QR-code and goes to the provided link, they go through the usual LIQA flow (the companion app configuration is identical to the one on the desktop, including styles, messages, sources etc.).
  3. Once the photo is taken on the mobile device, the desktop LIQA receives this photo and emits capture event.

Full user flow for this option ​