Two-Device Flow ​

The "Two-Device Flow" feature enhances the desktop user experience by allowing users to continue the photo capture flow on their mobile device. It is managed using the companion option in the sources attribute.

Variants ​

Companion only ​

Use companion together with a camera source when you want the desktop user to have two options:

1. Continue on desktop
2. Scan the QR code and continue on mobile

<hautai-liqa license="LICENSE_KEY" sources="front_camera,companion"></hautai-liqa>

<hautai-liqa license="LICENSE_KEY" sources="front_camera,companion"></hautai-liqa>

new Liqa({
  target: "#selector",
  license: "LICENSE_KEY",
  sources: ["front_camera", "companion"],
})

new Liqa({
  target: "#selector",
  license: "LICENSE_KEY",
  sources: ["front_camera", "companion"],
})

Companion + upload ​

Use companion together with upload when you want the desktop user to have three options:

1. Continue on desktop
2. Upload a photo
3. Scan the QR code and continue on mobile

<hautai-liqa license="LICENSE_KEY" sources="front_camera,upload,companion"></hautai-liqa>

<hautai-liqa license="LICENSE_KEY" sources="front_camera,upload,companion"></hautai-liqa>

new Liqa({
  target: "#selector",
  license: "LICENSE_KEY",
  sources: ["front_camera", "upload", "companion"],
})

new Liqa({
  target: "#selector",
  license: "LICENSE_KEY",
  sources: ["front_camera", "upload", "companion"],
})

Tutorial Compatibility ​

Two-Device Flow can also be combined with:

• tutorial="video"
• tutorial="image"
• entry-point="tutorial"
• entry-point="tutorial-alt"

With tutorial ​

The example below shows a tutorial-enabled variant of the Two-Device Flow with upload, where the tutorial is displayed together with the desktop source-selection experience.

<hautai-liqa
  license="LICENSE_KEY"
  sources="front_camera,upload,companion"
  tutorial="video"
  entry-point="tutorial"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY"
  sources="front_camera,upload,companion"
  tutorial="video"
  entry-point="tutorial"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY"
  sources="front_camera,upload,companion"
  tutorial="image"
  entry-point="tutorial-alt"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY"
  sources="front_camera,upload,companion"
  tutorial="image"
  entry-point="tutorial-alt"
></hautai-liqa>

Without tutorial ​

The example below shows the same desktop source-selection idea without tutorial, so the user goes directly to the QR code, upload (if enabled), and desktop continuation options.

Differences ​

• When enabled on desktop, LIQA shows a source-selection screen adapted for Two-Device Flow.
• The screen can include desktop continuation, QR code, and upload options depending on the configured sources.
• On mobile, the companion app inherits the desktop LIQA configuration, with sources forwarded without companion.

Affected APIs ​

• Styles: Image Source Selection: on desktop entry screens, .source-selection anchors remain relevant, but .source-selection .icon-camera-lg, .source-selection .icon-upload-lg, and .source-selection .icon-camera-access-denied can be ignored when companion entry UI is shown.
• Styles: Companion (2-device flow): .companion .qr-code, .companion .upload-progress, .companion .camera-permission-prompt, and .companion .camera-permission-denied selectors can become active on desktop and mobile companion screens.
• Text Messages (i18n): companion.* keys become active, especially companion.continue_on_desktop, companion.upload_photo, and companion.qr_retry.

How it works ​

When the user activates LIQA on a desktop device, LIQA displays a source-selection screen adapted for the current configuration.

• With sources="front_camera,companion", the user can continue on desktop or scan the QR code and continue on mobile.
• With sources="front_camera,upload,companion", the user can continue on desktop, upload a photo, or continue on mobile through the QR code.
• When tutorial and an entry-point are configured, the same flow can be shown together with tutorial content before the user chooses how to proceed.

The QR code is valid only for 10 minutes. If the user did not manage to take a photo during that period, a new QR code should be generated to start another photo capture session. LIQA provides a control to generate a new QR code:

Once the user has scanned the QR code and opened the provided link, LIQA enters the awaiting state, hides the buttons, and waits for the photo to be taken:

On the mobile device, the companion app inherits the desktop configuration, including styles, i18n, preset, tutorial, and entry-point, while forwarding sources without the companion option.

Once the user completes the photo capture process and submits the photo, both apps change to the uploading state (spinner on mobile, progress bar on desktop):

When the photo transfer process is completed, the desktop LIQA emits captures event with all the photos that were taken on the mobile device and the mobile app displays the success message:

When the upload session is not initialized or is outdated, the companion app displays the error screen: