Camera capture & theming

Two optional browser components handle camera preview, guide overlays, and best-frame selection (sharpest of several frames). They are a convenience, not a requirement — every API method accepts any Blob, so a fully custom capture UI works unchanged.

import { DocumentCapture, FaceCapture } from '@drukverify/ekyc-sdk-js/capture';

const capture = new DocumentCapture(containerEl, { facingMode: 'environment' });
capture.onCapture((blob) => client.ocr.scanDocument(blob));
await capture.start();
// … capture.destroy() when done

FaceCapture is the selfie equivalent (oval guide, optional countdown, mirrored preview).

Branding

The SDK imposes no UI beyond these two widgets — screens, flows and styling are your application's own. The widgets themselves take your brand:

new FaceCapture(el, {
  theme: {
    accentColor: '#E30613',          // guide outline + button
    buttonTextColor: '#FFF',
    maskColor: 'rgba(10,20,40,.6)',  // dimmed area around the guide
    guideLineWidth: 4,
  },
  labels: { captureButton: 'Take selfie' },  // any language
});

Full CSS takeover

Set theme.buttonClassName (and countdownClassName on FaceCapture) and the SDK applies no inline styles — the elements are styled entirely by your stylesheet.

Headless mode

const cap = new FaceCapture(el, { showCaptureButton: false });
cap.onCapture(handleBlob);
await cap.start();
myOwnButton.onclick = () => cap.captureWithCountdown(); // or cap.capture()

Challenge sequences

captureSequence() (0.5.0) captures an ordered sequence for burst and challenge liveness. It waits for the browser to present a new video frame before each grab, so a stalled stream is never captured twice, and it paces grabs by the interval you give it. Frames are drawn from the unmirrored video, which is what the server expects.

const cap = new FaceCapture(el, { showCaptureButton: false, width: 1280, height: 720 });
await cap.start();

const ch = await client.liveness.createChallenge();
showPrompt(ch.action);                                 // "turn your head to YOUR left, then come back"
const [baseline] = await cap.captureSequence(1, 0);    // neutral first frame
const action = await cap.captureSequence(5, 250);      // while the user acts and returns to centre
const r = await client.liveness.check([baseline, ...action], {
  mode: 'challenge',
  challengeToken: ch.challenge_token,
});

For blink, capture at 200 ms or faster with at least three frames, or ask the user to close their eyes for a second. The full capture rules are in Liveness checks.

Try all of this live in the demo console's Theme studio.