@ekycsolutions/ml-js-sdk

Ekyc SDK

A web sdk.

1. Module

filename: "ekyc-web-sdk.js",
library: "EkycWebSdk",

2. How-to-use

For further detail, please find example.***.html files.

<!-- html -->
<script src="ekyc-web-sdk.js"></script>
<!-- -- or -- -->
<script src="https://package.registry.gitlab.com/ekyc/ekyc-web-sdk.js"></script>

<script>
  const detector = new EkycWebSdk.FaceDetection();
  detector.build();
  const result = await detector.send(imageData);
</script>

// ES2015
import { faceDetection, cardDetection } from "ekyc-web-sdk";
import EkycWebSdk from "ekyc-web-sdk";
// -- or --
// js module
const faceDetection = require("ekyc-web-sdk");

3. How-to-manually-test-module

I create an index.html file in the dist folder. Modifying it to your like. Later on, I will set up the test which make it easier for automation the coding process.

quick start

with svelte

1. create a project pnpm create vite, select svelte then typescript
2. install the sdk pnpm add @ekycsolutions/ml-js-sdk
3. if you want to use it locally, clone the repo
4. install and configure verdaccio - run verdaccio to let it generate config dir and file for the first time if you havent and then close it - edit the config.yaml file which located in /home/[user]/.config/verdaccio/ if on linux - update the follow block to allow publish to local registry without authentication

   packages:
   '@*/*':
     # scoped packages
     access: $all
     publish: $anonymous
     unpublish: $anonymous
     proxy: npmjs
   
   '**':
     # allow all users (including non-authenticated users) to read and
     # publish all packages
     #
     # you can specify usernames/groupnames (depending on your auth plugin)
     # and three keywords: "$all", "$anonymous", "$authenticated"
     access: $all
   
     # allow all known users to publish/publish packages
     # (anyone can register by default, remember?)
     publish: $anonymous
     unpublish: $anonymous

- then run `verdaccio` again in another terminal
- then run `npm install`
- then run `npm run build`
- then run `npm publish --registry http://localhost:4873`
- then install the dep with `pnpm add @ekycsolutions/ml-js-sdk --registry http://localhost:4873`

1. update src/App.svelte to include a container div for kyc

<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,

    // true to use liveness config from node server
    isUseLivenessChecksFromServer: 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;
    //  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 };
    //    runKyc: Function();
    //   };
    // }
    onKYCCompleted: (e) => {
      console.log('KYC Done');
    },
  });

  kyc.init();
});
</script>

<main>
  <div id="kyc" />
</main>

1. run pnpm dev to test the ekyc with our default overlay as demo