vishwam-react-ent-sdk 1.0.7 → 1.0.9-beta.0

package/README.md

@@ -1 +1,148 @@
-# vishwam-react-sdk
+# vishwam-react-ent-sdk
+
+React components for **ENT photo liveness** (`CheckLiveness`): in-browser face capture, on-device face detection, and backend liveness verification.
+
+**Peer dependency:** React `^17.0.1`
+
+---
+
+## Install
+
+```bash
+npm install vishwam-react-ent-sdk
+# or
+yarn add vishwam-react-ent-sdk
+```
+
+---
+
+## Quick start
+
+Integration values (`url`, `appId`, and related props) are issued for your deployment. Do not use example credentials in production.
+
+```jsx
+import React from 'react'
+import { CheckLiveness } from 'vishwam-react-ent-sdk'
+
+function App() {
+  function onLiveness(response) {
+    // response.livenessImage — base64 (no data: prefix)
+    // response.livenessImageType — e.g. image/jpeg or image/png
+  }
+
+  return (
+    <CheckLiveness
+      url={apiBaseUrl}
+      appId={appId}
+      userId={userId}
+      referenceId={referenceId}
+      captureType={captureType}
+      eyesCheck={eyesCheck}
+      storeId={storeId}
+      whiteBackground={whiteBackground}
+      expiryIn={expiryIn}
+      getLivenessResponse={onLiveness}
+    />
+  )
+}
+```
+
+---
+
+## Exports
+
+| Export | Description |
+|--------|-------------|
+| `CheckLiveness` | Photo liveness UI + API call |
+| `ReadDocument` | Document capture flow |
+| `Init` | Face detector preparation helper |
+| `faceMatch` | Face match API helper |
+
+---
+
+## `CheckLiveness` props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `url` | string | API base URL for your environment |
+| `appId` | string | Application id |
+| `userId` | string \| number | User id |
+| `referenceId` | string | Reference / transaction id |
+| `captureType` | string | Capture type sent to API |
+| `eyesCheck` | string | Eyes-open check flag for API |
+| `storeId` | string | Store id |
+| `whiteBackground` | string | White background flag |
+| `expiryIn` | string | Token expiry (e.g. `1h`) |
+| `getLivenessResponse` | function | Callback with API response (see below) |
+
+---
+
+## Capture and images
+
+On capture the SDK:
+
+1. Reads a frame from the camera (desktop: webcam screenshot; mobile: canvas snapshot).
+2. Builds two square images from the same frame:
+   - **450×450** — sent as the second image field in the liveness API request.
+   - **224×224** — sent as the first image field in the liveness API request.
+3. Calls the liveness endpoint with both images (after obtaining an auth token).
+
+On-device face detection models are loaded by the SDK at runtime.
+
+---
+
+## `getLivenessResponse` callback
+
+The SDK merges the API JSON with local image fields before calling your handler:
+
+| Field | Description |
+|-------|-------------|
+| `status` | API status (e.g. `success` / `failed`) |
+| `livenessImage` | Base64-encoded face image (**no** `data:` prefix) |
+| `livenessImageType` | MIME type for decoding (typically `image/jpeg` on desktop, `image/png` on mobile) |
+| … | Other fields returned by the liveness API |
+
+**Display example:**
+
+```javascript
+const src = `data:${response.livenessImageType};base64,${response.livenessImage}`
+```
+
+Decode with `Image` / `naturalWidth` × `naturalHeight` if you need pixel dimensions.
+
+---
+
+## Changelog
+
+### 1.0.8
+
+**Callback image quality**
+
+- **`livenessImage` is now the 450×450 capture** (same asset previously sent only as the high-resolution API upload).
+- In **1.0.7**, `livenessImage` was the **224×224** image. Integrators that assumed 224×224 in the callback should update display/storage logic; API upload sizes are unchanged.
+
+**Desktop bug fix**
+
+- On **desktop**, startup now runs the full face-detection initialization path (models, UI ready state, detection loop) instead of loading models only, which could leave laptop browsers stuck on “face detector is initializing”.
+- **Mobile** flow is unchanged.
+
+### 1.0.7
+
+- Updated on-device model loading for face detection.
+
+---
+
+## Build (maintainers)
+
+```bash
+npm install
+npm run build
+```
+
+Published tarball includes `dist/` (`prepare` runs build on `npm publish`).
+
+---
+
+## License
+
+MIT

package/dist/index.js

@@ -34,6 +34,25 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
 var requestToken = function requestToken(url, expiry) {
   try {
     var formData = new FormData();
@@ -399,6 +418,13 @@ var videoConstraints = {
     facingMode: 'user'
   }
 };
+var FRONTAL_FACE_RX_MIN = 0.15;
+var FRONTAL_FACE_RX_MAX = 2.53;
+var FRONTAL_FACE_RY_MIN = 0.16;
+var FRONTAL_FACE_RY_MAX = 2.56;
+var FACE_TOO_FAR_RATIO = 6;
+var FACE_TOO_CLOSE_RATIO = 3.2;
+var FACE_MAX_ROLL_DEG = 12;
 
 function frontalFaceCheck(landmarks) {
   if (!landmarks || landmarks.length < 68) {
@@ -421,12 +447,10 @@ function frontalFaceCheck(landmarks) {
     x: (rightEyeCenter.x - landmarks[30].x) / (landmarks[30].x - leftEyeCenter.x),
     y: (landmarks[66].y - landmarks[30].y) / (landmarks[30].y - faceMiddlePoint.y)
   };
-
-  if (ratio.x > 0.75 && ratio.x < 1.33 && ratio.y > 0.56 && ratio.y < 1.56) {
-    return true;
-  }
-
-  return false;
+  var rollRad = Math.atan2(rightEyeCenter.y - leftEyeCenter.y, rightEyeCenter.x - leftEyeCenter.x);
+  var rollDeg = Math.abs(rollRad * 180 / Math.PI);
+  var rollOk = rollDeg <= FACE_MAX_ROLL_DEG || rollDeg >= 180 - FACE_MAX_ROLL_DEG;
+  return rollOk && ratio.x > FRONTAL_FACE_RX_MIN && ratio.x < FRONTAL_FACE_RX_MAX && ratio.y > FRONTAL_FACE_RY_MIN && ratio.y < FRONTAL_FACE_RY_MAX;
 }
 
 (function polyfillGetUserMedia() {
@@ -489,18 +513,53 @@ function CheckLiveness(_ref) {
 
       var _temp4 = function () {
         if (!stopFaceDetection) {
-          return Promise.resolve(detectFace()).then(function (detection) {
-            if (detection) {
-              var isFrontal = frontalFaceCheck(detection.landmarks.positions);
-
-              if (isFrontal) {
-                setFrontal(true);
-              } else {
+          return Promise.resolve(detectFace()).then(function (detections) {
+            if (detections.length > 1) {
+              setFrontal(false);
+              setIsTooFar(false);
+              setIsTooClose(false);
+              setGuidanceText(multipleFacesMessageText);
+            } else if (detections.length === 0) {
+              setFrontal(false);
+              setIsTooFar(false);
+              setIsTooClose(false);
+              setGuidanceText(noFaceMessageText);
+            } else {
+              var _detections$0$detecti = detections[0].detection.box,
+                  width = _detections$0$detecti.width,
+                  height = _detections$0$detecti.height;
+              var videoEl = webcamRef.current;
+              var faceArea = width * height;
+              var videoArea = (videoEl === null || videoEl === void 0 ? void 0 : videoEl.videoWidth) * (videoEl === null || videoEl === void 0 ? void 0 : videoEl.videoHeight);
+              var faceRatio = videoArea / faceArea;
+
+              if (faceRatio > FACE_TOO_FAR_RATIO) {
+                setIsTooFar(true);
+                setIsTooClose(false);
                 setFrontal(false);
+                setGuidanceText('');
+              } else if (faceRatio < FACE_TOO_CLOSE_RATIO) {
+                setIsTooFar(false);
+                setIsTooClose(true);
+                setFrontal(false);
+                setGuidanceText('');
+              } else {
+                setIsTooFar(false);
+                setIsTooClose(false);
+                var isFrontal = frontalFaceCheck(detections[0].landmarks.positions);
+                setFrontal(isFrontal);
+                setGuidanceText(isFrontal ? '' : straightFaceMessageText);
               }
-            } else {
+            }
+
+            if (!navigator.onLine) {
               setFrontal(false);
+              setIsTooFar(false);
+              setIsTooClose(false);
+              setGuidanceText('');
             }
+
+            setLoadingText('');
           });
         }
       }();
@@ -573,8 +632,42 @@ function CheckLiveness(_ref) {
   var detectFace = function detectFace() {
     try {
       var videoEl = document.getElementById('webcam');
+
+      if (!videoEl) {
+        return Promise.resolve([]);
+      }
+
       var options = new faceapi.TinyFaceDetectorOptions();
-      return Promise.resolve(faceapi.detectSingleFace(videoEl, options).withFaceLandmarks(true));
+
+      if (videoEl.readyState !== HTMLVideoElement.HAVE_ENOUGH_DATA) {
+        return Promise.resolve(new Promise(function (resolve) {
+          videoEl.addEventListener('loadeddata', function () {
+            try {
+              var _temp6 = _catch(function () {
+                return Promise.resolve(faceapi.detectAllFaces(videoEl, options).withFaceLandmarks(true)).then(function (result) {
+                  resolve(result);
+                });
+              }, function (error) {
+                console.error('Face detection error:', error);
+                resolve([]);
+              });
+
+              return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          }, {
+            once: true
+          });
+        }));
+      }
+
+      return Promise.resolve(_catch(function () {
+        return Promise.resolve(faceapi.detectAllFaces(videoEl, options).withFaceLandmarks(true));
+      }, function (error) {
+        console.error('Face detection error:', error);
+        return [];
+      }));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -589,6 +682,11 @@ function CheckLiveness(_ref) {
       storeId = _ref.storeId,
       whiteBackground = _ref.whiteBackground,
       expiryIn = _ref.expiryIn,
+      tooFarMessage = _ref.tooFarMessage,
+      tooCloseMessage = _ref.tooCloseMessage,
+      multipleFacesMessage = _ref.multipleFacesMessage,
+      noFaceMessage = _ref.noFaceMessage,
+      straightFaceMessage = _ref.straightFaceMessage,
       getLivenessResponse = _ref.getLivenessResponse;
   var webcamRef = React.useRef();
 
@@ -608,10 +706,27 @@ function CheckLiveness(_ref) {
       cameraAvailable = _React$useState[0],
       setCameraAvailable = _React$useState[1];
 
-  var _useState4 = React.useState('Please wait, while the face detector is initializing'),
-      loadingText = _useState4[0],
-      setLoadingText = _useState4[1];
+  var _useState4 = React.useState(false),
+      isTooFar = _useState4[0],
+      setIsTooFar = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      isTooClose = _useState5[0],
+      setIsTooClose = _useState5[1];
+
+  var _useState6 = React.useState(''),
+      guidanceText = _useState6[0],
+      setGuidanceText = _useState6[1];
+
+  var _useState7 = React.useState('Please wait, while the face detector is initializing'),
+      loadingText = _useState7[0],
+      setLoadingText = _useState7[1];
 
+  var tooFarMessageText = tooFarMessage || 'Move a little closer';
+  var tooCloseMessageText = tooCloseMessage || 'Move a little further away';
+  var multipleFacesMessageText = multipleFacesMessage || 'Multiple faces detected. Only one person is allowed.';
+  var noFaceMessageText = noFaceMessage || 'No face detected. Keep your face in the circle.';
+  var straightFaceMessageText = straightFaceMessage || 'Look straight at the camera.';
   var interval;
   var videoStream = null;
   var stopFaceDetection = false;
@@ -631,7 +746,7 @@ function CheckLiveness(_ref) {
           var img2 = imgStr.split(',')[1];
           clearInterval(interval);
           return Promise.resolve(callLiveness(url, appId, userId, referenceId, captureType, eyesCheck, storeId, whiteBackground, expiryIn, img, img2, mimeString)).then(function (response) {
-            response.livenessImage = img2;
+            response.livenessImage = img;
             response.livenessImageType = mimeString;
             getLivenessResponse(response);
             setLoading(false);
@@ -650,7 +765,7 @@ function CheckLiveness(_ref) {
 
       console.log('came here return');
 
-      if (!videoStream) {
+      if (videoStream) {
         videoStream.getTracks().forEach(function (track) {
           track.stop();
         });
@@ -659,20 +774,10 @@ function CheckLiveness(_ref) {
   }, []);
   React.useEffect(function () {
     setTimeout(function () {
-      var initModels = function initModels() {
-        try {
-          return Promise.resolve(faceapi.nets.tinyFaceDetector.loadFromUri('https://skyc-cdn-prod.vishwamcorp.com/apis/models/')).then(function () {
-            return Promise.resolve(faceapi.nets.faceLandmark68TinyNet.loadFromUri('https://skyc-cdn-prod.vishwamcorp.com/apis/models/')).then(function () {});
-          });
-        } catch (e) {
-          return Promise.reject(e);
-        }
-      };
-
       if (reactDeviceDetect.isMobile) {
         startCamera();
       } else {
-        initModels();
+        init();
       }
     }, 500);
   }, []);
@@ -827,7 +932,31 @@ function CheckLiveness(_ref) {
       marginBottom: '0',
       fontWeight: '400'
     }
-  }, loadingText), /*#__PURE__*/React__default.createElement(Button, {
+  }, loadingText), isTooFar ? /*#__PURE__*/React__default.createElement(Text, {
+    style: {
+      width: '75%',
+      fontSize: '1rem',
+      marginTop: '1%',
+      marginBottom: '0',
+      fontWeight: '400'
+    }
+  }, tooFarMessageText) : null, isTooClose ? /*#__PURE__*/React__default.createElement(Text, {
+    style: {
+      width: '75%',
+      fontSize: '1rem',
+      marginTop: '1%',
+      marginBottom: '0',
+      fontWeight: '400'
+    }
+  }, tooCloseMessageText) : null, guidanceText ? /*#__PURE__*/React__default.createElement(Text, {
+    style: {
+      width: '75%',
+      fontSize: '1rem',
+      marginTop: '1%',
+      marginBottom: '0',
+      fontWeight: '400'
+    }
+  }, guidanceText) : null, /*#__PURE__*/React__default.createElement(Button, {
     disabled: disabled || !frontal,
     onClick: capture
   }, disabled || frontal ? /*#__PURE__*/React__default.createElement(SvgEnabled, {
@@ -875,7 +1004,31 @@ function CheckLiveness(_ref) {
       marginBottom: '0',
       fontWeight: '400'
     }
-  }, loadingText), cameraAvailable ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement(Text, {
+  }, loadingText), isTooFar ? /*#__PURE__*/React__default.createElement(Text, {
+    style: {
+      width: '75%',
+      fontSize: '1rem',
+      marginTop: '1%',
+      marginBottom: '0',
+      fontWeight: '400'
+    }
+  }, tooFarMessageText) : null, isTooClose ? /*#__PURE__*/React__default.createElement(Text, {
+    style: {
+      width: '75%',
+      fontSize: '1rem',
+      marginTop: '1%',
+      marginBottom: '0',
+      fontWeight: '400'
+    }
+  }, tooCloseMessageText) : null, guidanceText ? /*#__PURE__*/React__default.createElement(Text, {
+    style: {
+      width: '75%',
+      fontSize: '1rem',
+      marginTop: '1%',
+      marginBottom: '0',
+      fontWeight: '400'
+    }
+  }, guidanceText) : null, cameraAvailable ? /*#__PURE__*/React__default.createElement("div", null) : /*#__PURE__*/React__default.createElement(Text, {
     style: {
       width: '75%',
       fontSize: '1rem',
@@ -923,25 +1076,6 @@ function dataURItoBlob(dataURI, imageType) {
   return bb;
 }
 
-// A type of promise-like that resolves synchronously and supports only one observer
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously call a function and send errors to recovery continuation
-function _catch(body, recover) {
-	try {
-		var result = body();
-	} catch(e) {
-		return recover(e);
-	}
-	if (result && result.then) {
-		return result.then(void 0, recover);
-	}
-	return result;
-}
-
 var _path$1, _path2$1;
 
 function _extends$4() {