The EkycID Web SDK lets you build a factastic OCR and Face Recognition experienced in your Website.
With one quick scan, your users will be able to extract information from thier identity cards, passports, driver licenses, license plate, vehicle registration, covid-19 vaccinate card, and any other document by government-issued.
EkycID is:
- Easy to integrate into existing ecosystems and solutions through the use of SDKs that supported both native and hybrid applications.
- Better for user experience being that the document detections and liveness checks are done directly offline on the device.
- Great for cutting down operations cost and increasing efficiency by decreasing reliance on human labor and time needed for manual data entry.
EkycID can:
- Extract information from identity documents through document recognition & OCR.
- Verify whether an individual is real or fake through liveness detection, and face recognition.
- Verify the authenticity of the identity documents by combining the power of document detection, OCR, liveness detection, and face recognition.
nodejsnpmorpnpmoryarn- ekyc proxy server setup, refer here for setup instruction for
nodejs
Step 1: Create a web project
for quick start
run pnpm create vite, select svelte then typescript.
NOTE: you can use it with any framework other than svelte
Step 2: Install the web sdk
install the sdk pnpm add @ekycsolutions/ml-js-sdk
Step 3: Configure the sdk
update src/App.svelte to add a div element with id kyc or any value as you like to be used to instantiate Kyc component
<main>
<div id="kyc" />
</main>
<script lang='ts'>
import { onMount } from 'svelte';
import {
Kyc,
DocumentScannerDefaultOverlay,
LivenessDetectionDefaultOverlay,
} from '@ekycsolutions/ml-js-sdk';
onMount(() => {
const kyc = new Kyc({
containerId: 'kyc',
isEnableDebug: true,
videoWidth: 640 * 1.5,
videoHeight: 480 * 1.5,
// true to use manual kyc flow
// false to use express ekyc flow
isLivenessDetectFaceSideOnly: false,
// liveness config from local
// if `isUseLivenessChecksFromServer` is true
// will override this
livenessChecks: ['left', 'right', 'blinking'],
// document scanner overlay, by default we provide one
// but you could also bring your own ui
DocumentScannerOverlayClass: DocumentScannerDefaultOverlay,
// liveness detection overlay, by default we provide one
// but you could also bring your own ui
LivenessDetectionOverlayClass: LivenessDetectionDefaultOverlay,
documentScannerOverlayOpts: {
lang: 'en',
wrapperId: 'wrapper',
overlayId: 'overlay',
},
livenessDetectionOverlayOpts: {
lang: 'en',
wrapperId: 'wrapper',
overlayId: 'overlay',
},
// access to all events within each flow
onChange: (e) => {
console.log('==== manual kyc on changed ====');
console.log(e);
},
// after all kyc flow completed
// there is callback that contains all data
// and another callback within to call ekyc api
// the types of the argument
// {
// event: Kyc.CallbackEvent;
// runKyc: Function();
// data: {
// livenessChecks: { checks: string; canvasImageData: Canvas.ImageData; }[];
// faceImagesData: { frontSize: Canvas.ImageData; leftSide: Canvas.ImageData; rightSide: Canvas.ImageData; };
// documentScanned: { [DocumentSide.Main = 0]: Canvas.ImageData; [DocumentSide.Secondary = 1]: Canvas.ImageData };
// };
// }
onKYCCompleted: (e) => {
console.log('KYC Done');
},
});
kyc.init();
});
</script>Step 4: Run the app
run pnpm dev to start the development server
NOTE: we also provided default overlay for you from importing DocumentScannerDefaultOverlay and LivenessDetectionDefaultOverlay
For any other questions, feel free to contact us at ekycsolutions.com
© 2022 EKYC Solutions Co, Ltd. All rights reserved.