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

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;
@@ -650,7 +765,7 @@ function CheckLiveness(_ref) {
 
       console.log('came here return');
 
-      if (!videoStream) {
+      if (videoStream) {
         videoStream.getTracks().forEach(function (track) {
           track.stop();
         });
@@ -817,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, {
@@ -865,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',
@@ -913,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() {