qr

Enables mobile capture using QR code on desktop.

Details

Attribute: qr

Type: boolean

Default value: undefined

Morphology

provider.qr = true;

Description

Enables the mobile continuation Flow via QR Code when facephi-sdk-provider used on desktop. When activated, a QR Code is displayed in the source browser; when scanned, the capture continues on the mobile device while the desktop reports progress.

The SDK automatically determines whether the view is mobile or desktop, with no additional configuration.

Considerations

Compatible components: SelphID, Selphi, File Uploader, and Video Provider.

When the capture finishes on mobile, call the method stopQr to properly close the QR session on desktop.

You can monitor the progress with emitTrackStatus.

The animations shown on desktop during the QR Flow are customized with customAnimations (qr.selphi, qr.selphid, qr.fileUploader).

---

Example

import { ComponentStatus, FacephiComponent } from '@facephi/sdk-web-wc';

<facephi-sdk-provider
    apikey={process.env.FACEPHI_SDK_APIKEY}
    customAnimations={{
        qr: {
            selphi: '/assets/anim/desktop-selphi.gif',
            selphid: '/assets/anim/desktop-selphid.gif',
            fileUploader: '/assets/anim/desktop-file-uploader.gif',
        },
    }}
    qr={true}
>
    <facephi-selphid-widget onExtractionFinish={handleExtractionFinish} />
</facephi-sdk-provider>

const provider = document.querySelector('facephi-sdk-provider');
const selphid = document.querySelector('facephi-selphid-widget');

async function handleExtractionFinish(event: CustomEvent) {
  const result = event.detail.detail;
  await provider.stopQr();
  sendResultsToBackend(result);
}

provider.addEventListener('emitTrackStatus', handleEmitTrackStatus);

function handleEmitTrackStatus(event: CustomEvent) {
  const trackStatus = event.detail;
  if (
    trackStatus.component === FacephiComponent.QrWidget
    && trackStatus.status === ComponentStatus.finish
  ) {
    continueAfterOnboarding();
  }
}