Video Recording

Facephi's Video Provider component offers Video Recording of the process carried out on different widgets such as SelphID and Selphi.

The facephi-video-provider is a key web component of the SDK Web, enabling real-time video recording of the onboarding or authentication process. It supports real-time transmission modes (ws, sse) as well as a browser-only local recording mode (serviceType: 'local').

As a provider, you must wrap the components you want to record.

Type: HTMLFacephiVideoProviderElement

How It Works

The facephi-video-provider provides smooth video recording by capturing interactions and processes during authentication or onboarding. Wrapping it around components ensures that all activities are included in the recording.

Recording types

Recording can be performed in different ways:

Remote recording (default)

The tool will use WebSocket services (ws) or Server-Sent Events (sse) for recording.

By default, the WebSocket service ( will be usedws).

Integration Example

Widgets must be integrated within the Video Provider tag once it has fully loaded.

<facephi-video-provider
    settings={{ serviceType: 'ws' }}
    onChangeLoading={(event) => {
        if (!event.detail) {
            // Start Facephi widget flow
        }
    }}
/>

The Video Provider must be stopped once the extraction process has been completed.

<facephi-video-provider
    settings={{ serviceType: 'local' }}
>
    <facephi-selphi-widget
        onExtractionFinish={async () => {
            await video.stopVideo();
        }}
    />
</facephi-video-provider>

To obtain the video, see the section on video provider results.

Local recording

The component <facephi-video-provider> supports a local recording mode that captures video entirely in the browser using the MediaRecorder API. Unlike the default WebSocket service types (ws) or Server-Sent Events (sse), local recording does not transmit video to an external server during capture. Instead, the recorded video remains client-side and is returned as a Blob when recording stops.

The recorded video is still automatically sent through the SDK tracking pipeline (trackingAsset with MIME type video/mp4), so it integrates seamlessly with subsequent processing.

Once <facephi-video-provider> is rendered in the DOM with settings.serviceType set to 'local', the component immediately starts the recording pipeline: initializes the camera stack, calls getUserMedia and the browser requests the required permissions from the user (camera and microphone when audioEnabled es true). No additional start call is needed: rendering the provider is enough to start recording.

The generated video can be obtained by calling the method stopVideo() of the component, which will return a Blob.

Browser compatibility

Local recording is based on the MediaRecorder API, which is compatible with all modern browsers (Chrome, Firefox, Safari 14.5+, Edge). The component automatically selects the best video codec available for the current browser.

In Chrome/Edge 94+, the component uses Insertable Streams for higher-fidelity frame processing (for example, timer overlays) without an intermediate canvas layer. This is automatically detected and used without requiring configuration.

Permissions

The user must grant camerapermission. If audioEnabled es true (the default value), microphone permission is also required microphone. The component internally handles the call getUserMedia.

Proxy configuration

If you are routing SDK requests through a forwarding proxy, you must configure the proxy en <facephi-sdk-provider> property so that the camera module can load its required assets. See the property proxy of the SDK provider and the proxy configuration guide for configuration details.

Licensing

Local recording mode does not require a video recording license. When serviceType is configured as "local", the component skips the license validation required by the modes ws and sse.

Integration Example

Widgets must be integrated within the Video Provider tag once it has fully loaded.

<facephi-video-provider
    settings={{ serviceType: 'local' }}
>
    <facephi-selphi-widget />
</facephi-video-provider>

To obtain the video, see the section on video provider results.

Differences between WS and SSE modes

Aspect

Local

WS / SSE

Server infrastructure

Not required for recording

Requires baseUrl and apiKey

Video recording license

Not required

Required

Video output

Blob returned client-side through stopVideo()

Transmitted to the server in real time

Codec selection

Automatic (best available: VP8, VP9, H.264, AV1)

Determined by the server

Timer overlay

Optional (videoTimer: true)

Not available

Camera switching

Supported (continuous recording maintained)

Supported

Tracking integration

Automatic (sent after stopVideo())

Automatic (in real time)

Troubleshooting

Camera permission denied

If the user denies access to the camera or microphone, the component emits an error through the SDK error pipeline (SDKErrorType.VideoProviderError). Listen for the event emitError en <facephi-sdk-provider> to handle it in your application.

Unsupported MIME type

In very old browsers that do not support any of the tested codecs (VP8, VP9, H.264, AV1, H.265), MediaRecorder will fall back to the browser's default codec. If no codec is supported, a recording error will be emitted.

Camera switching failure

When cameraSwitch is set to true and the initial camera request fails (common on devices with restricted permissions), the component will automatically retry with cameraSwitch disabled. If both attempts fail, an error is emitted. Check the messages [LocalRecording] in the browser console.

Debug logging

Configure showLog={true} en <facephi-video-provider> to enable detailed console output. Look for messages with the prefix [LocalRecorder] to track the recording lifecycle: