Skip to main content

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-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()

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