Two-Device Flow ​

The "Two-Device Flow" feature enhances the desktop users experience by allowing them to seamlessly go through the photo capture flow using their mobile device. It is managed using the companion option in the sources attribute and can be enabled as shown below:

<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"],
})

Differences ​

• When enabled, desktop source selection screen will display a QR-code that'll bring the user to companion app where they can take photo and transfer it to the desktop.

Affected APIs ​

• Styles:
  • Desktop:
    • .source-selection .qr-code selector will become active.
    • .source-selection .icon-camera-lg, .source-selection .icon-upload-lg, .source-selection .icon-camera-access-denied selectors will be ignored.
  • Mobile: nothing will be affected
• Messages: companion.* and source_selection.continue_on_desktop will become active

How it works ​

When user activates LIQA, it checks if it is running on desktop device and displays slightly modified source selection screen with a QR-code to scan using mobile device, such as below:

The QR-code is valid only for 10 minutes. If the user didn't manage to take a photo during that period of time, a new QR-code should be generated to start another photo capture session. The LIQA interface will provide a control to generate a new QR-code:

Once the user has scanned the QR-code and went to the provided link, LIQA will be set to the awaiting state, hiding all the buttons and waiting for the photo to be taken:

On mobile device, in the companion app, LIQA runs with the same configuration as on the desktop (including styles, messages, preset, source, etc.) and the user goes through the same LIQA flow as they would go on the desktop.

Once the user completed the photo capture process and submitted the photo, both apps will change to 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 mobile device and the mobile app will display success message:

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