@aws-amplify/ui-react-liveness 3.0.15 → 3.0.17

package/dist/index.js

@@ -75,7 +75,6 @@ var FaceMatchState;
 (function (FaceMatchState) {
     FaceMatchState["MATCHED"] = "MATCHED";
     FaceMatchState["TOO_FAR"] = "TOO FAR";
-    FaceMatchState["TOO_CLOSE"] = "TOO CLOSE";
     FaceMatchState["CANT_IDENTIFY"] = "CANNOT IDENTIFY";
     FaceMatchState["FACE_IDENTIFIED"] = "ONE FACE IDENTIFIED";
     FaceMatchState["TOO_MANY"] = "TOO MANY FACES";
@@ -86,6 +85,7 @@ var FaceMatchState;
  * The liveness error states
  */
 const LivenessErrorState = {
+    CONNECTION_TIMEOUT: 'CONNECTION_TIMEOUT',
     TIMEOUT: 'TIMEOUT',
     RUNTIME_ERROR: 'RUNTIME_ERROR',
     FRESHNESS_TIMEOUT: 'FRESHNESS_TIMEOUT',
@@ -99,12 +99,20 @@ const LivenessErrorState = {
 
 // Face distance is calculated as pupilDistance / ovalWidth.
 // The further away you are from the camera the distance between your pupils will decrease, thus lowering the threshold values.
-// These FACE_DISTNACE_THRESHOLD values are determined by the science team and should only be changed with their approval.
+// These FACE_DISTANCE_THRESHOLD values are determined by the science team and should only be changed with their approval.
 // We want to ensure at the start of a  check that the user's pupilDistance/ovalWidth is below FACE_DISTANCE_THRESHOLD to ensure that they are starting
 //  a certain distance away from the camera.
 const FACE_DISTANCE_THRESHOLD = 0.32;
 const REDUCED_THRESHOLD = 0.4;
 const REDUCED_THRESHOLD_MOBILE = 0.37;
+// Constants from science team to determine ocular distance (space between eyes)
+const PUPIL_DISTANCE_WEIGHT = 2.0;
+const FACE_HEIGHT_WEIGHT = 1.8;
+// Constants from science team to find face match percentage
+const FACE_MATCH_RANGE_MIN = 0;
+const FACE_MATCH_RANGE_MAX = 1;
+const FACE_MATCH_WEIGHT_MIN = 0.25;
+const FACE_MATCH_WEIGHT_MAX = 0.75;
 const WS_CLOSURE_CODE = {
     SUCCESS_CODE: 1000,
     DEFAULT_ERROR_CODE: 4000,
@@ -292,87 +300,33 @@ function getPupilDistanceAndFaceHeight(face) {
     const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
     return { pupilDistance, faceHeight };
 }
-function generateBboxFromLandmarks(face, oval) {
-    const { leftEye, rightEye, nose, leftEar, rightEar, top: faceTop, height: faceHeight, } = face;
+function generateBboxFromLandmarks(face, oval, frameHeight) {
+    const { leftEye, rightEye, nose, leftEar, rightEar } = face;
     const { height: ovalHeight, centerY } = oval;
     const ovalTop = centerY - ovalHeight / 2;
     const eyeCenter = [];
     eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
     eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
     const { pupilDistance: pd, faceHeight: fh } = getPupilDistanceAndFaceHeight(face);
-    const alpha = 2.0, gamma = 1.8;
-    const ow = (alpha * pd + gamma * fh) / 2;
-    const oh = 1.618 * ow;
-    let cx;
+    const ocularWidth = (PUPIL_DISTANCE_WEIGHT * pd + FACE_HEIGHT_WEIGHT * fh) / 2;
+    let centerFaceX, centerFaceY;
     if (eyeCenter[1] <= (ovalTop + ovalHeight) / 2) {
-        cx = (eyeCenter[0] + nose[0]) / 2;
+        centerFaceX = (eyeCenter[0] + nose[0]) / 2;
+        centerFaceY = (eyeCenter[1] + nose[1]) / 2;
     }
     else {
-        cx = eyeCenter[0];
-    }
-    const bottom = faceTop + faceHeight;
-    const top = bottom - oh;
-    const left = Math.min(cx - ow / 2, rightEar[0]);
-    const right = Math.max(cx + ow / 2, leftEar[0]);
+        // when face tilts down
+        centerFaceX = eyeCenter[0];
+        centerFaceY = eyeCenter[1];
+    }
+    const faceWidth = ocularWidth;
+    const faceHeight = 1.68 * faceWidth;
+    const top = Math.max(centerFaceY - faceHeight / 2, 0);
+    const bottom = Math.min(centerFaceY + faceHeight / 2, frameHeight);
+    const left = Math.min(centerFaceX - ocularWidth / 2, rightEar[0]);
+    const right = Math.max(centerFaceX + ocularWidth / 2, leftEar[0]);
     return { bottom, left, right, top };
 }
-/**
- * Returns the state of the provided face with respect to the provided liveness oval.
- */
-// eslint-disable-next-line max-params
-function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersection, sessionInformation) {
-    let faceMatchState;
-    const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
-        ?.ChallengeConfig;
-    if (!challengeConfig ||
-        !challengeConfig.OvalIouThreshold ||
-        !challengeConfig.OvalIouHeightThreshold ||
-        !challengeConfig.OvalIouWidthThreshold ||
-        !challengeConfig.FaceIouHeightThreshold ||
-        !challengeConfig.FaceIouWidthThreshold) {
-        throw new Error('Challenge information not returned from session information.');
-    }
-    const { OvalIouThreshold, OvalIouHeightThreshold, OvalIouWidthThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold, } = challengeConfig;
-    const faceBoundingBox = generateBboxFromLandmarks(face, ovalDetails);
-    const minFaceX = faceBoundingBox.left;
-    const maxFaceX = faceBoundingBox.right;
-    const minFaceY = faceBoundingBox.top;
-    const maxFaceY = faceBoundingBox.bottom;
-    const { ovalBoundingBox, minOvalX, minOvalY, maxOvalX, maxOvalY } = getOvalBoundingBox(ovalDetails);
-    const intersection = getIntersectionOverUnion(faceBoundingBox, ovalBoundingBox);
-    const intersectionThreshold = OvalIouThreshold;
-    const ovalMatchWidthThreshold = ovalDetails.width * OvalIouWidthThreshold;
-    const ovalMatchHeightThreshold = ovalDetails.height * OvalIouHeightThreshold;
-    const faceDetectionWidthThreshold = ovalDetails.width * FaceIouWidthThreshold;
-    const faceDetectionHeightThreshold = ovalDetails.height * FaceIouHeightThreshold;
-    /** From Science
-     * p=max(min(1,0.75∗(si−s0)/(st−s0)+0.25)),0)
-     */
-    const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
-        (intersectionThreshold - initialFaceIntersection) +
-        0.25), 0) * 100;
-    const faceIsOutsideOvalToTheLeft = minOvalX > minFaceX && maxOvalX > maxFaceX;
-    const faceIsOutsideOvalToTheRight = minFaceX > minOvalX && maxFaceX > maxOvalX;
-    if (intersection > intersectionThreshold &&
-        Math.abs(minOvalX - minFaceX) < ovalMatchWidthThreshold &&
-        Math.abs(maxOvalX - maxFaceX) < ovalMatchWidthThreshold &&
-        Math.abs(maxOvalY - maxFaceY) < ovalMatchHeightThreshold) {
-        faceMatchState = FaceMatchState.MATCHED;
-    }
-    else if (faceIsOutsideOvalToTheLeft || faceIsOutsideOvalToTheRight) {
-        faceMatchState = FaceMatchState.OFF_CENTER;
-    }
-    else if (minOvalY - minFaceY > faceDetectionHeightThreshold ||
-        maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
-        (minOvalX - minFaceX > faceDetectionWidthThreshold &&
-            maxFaceX - maxOvalX > faceDetectionWidthThreshold)) {
-        faceMatchState = FaceMatchState.TOO_CLOSE;
-    }
-    else {
-        faceMatchState = FaceMatchState.TOO_FAR;
-    }
-    return { faceMatchState, faceMatchPercentage };
-}
 /**
  * Returns the illumination state in the provided video frame.
  */
@@ -548,8 +502,10 @@ async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails
             detectedFace = detectedFaces[0];
             const { width } = ovalDetails;
             const { pupilDistance, faceHeight } = getPupilDistanceAndFaceHeight(detectedFace);
-            const alpha = 2.0, gamma = 1.8;
-            const calibratedPupilDistance = (alpha * pupilDistance + gamma * faceHeight) / 2 / alpha;
+            const calibratedPupilDistance = (PUPIL_DISTANCE_WEIGHT * pupilDistance +
+                FACE_HEIGHT_WEIGHT * faceHeight) /
+                2 /
+                PUPIL_DISTANCE_WEIGHT;
             if (width) {
                 isDistanceBelowThreshold =
                     calibratedPupilDistance / width <
@@ -782,7 +738,61 @@ class VideoRecorder {
     }
 }
 
-const VERSION = '3.0.15';
+/**
+ * Returns the state of the provided face with respect to the provided liveness oval.
+ */
+function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceIntersection, sessionInformation, frameHeight, }) {
+    let faceMatchState;
+    const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
+        ?.ChallengeConfig;
+    if (!challengeConfig ||
+        !challengeConfig.OvalIouThreshold ||
+        !challengeConfig.OvalIouHeightThreshold ||
+        !challengeConfig.OvalIouWidthThreshold ||
+        !challengeConfig.FaceIouHeightThreshold ||
+        !challengeConfig.FaceIouWidthThreshold) {
+        throw new Error('Challenge information not returned from session information.');
+    }
+    const { OvalIouThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold } = challengeConfig;
+    const faceBoundingBox = generateBboxFromLandmarks(face, ovalDetails, frameHeight);
+    const minFaceX = faceBoundingBox.left;
+    const maxFaceX = faceBoundingBox.right;
+    const minFaceY = faceBoundingBox.top;
+    const maxFaceY = faceBoundingBox.bottom;
+    const { ovalBoundingBox, minOvalX, minOvalY, maxOvalX, maxOvalY } = getOvalBoundingBox(ovalDetails);
+    const intersection = getIntersectionOverUnion(faceBoundingBox, ovalBoundingBox);
+    const intersectionThreshold = OvalIouThreshold;
+    const faceDetectionWidthThreshold = ovalDetails.width * FaceIouWidthThreshold;
+    const faceDetectionHeightThreshold = ovalDetails.height * FaceIouHeightThreshold;
+    /** From Science
+     * p=max(min(1,0.75∗(si−s0)/(st−s0)+0.25)),0)
+     */
+    const faceMatchPercentage = Math.max(Math.min(FACE_MATCH_RANGE_MAX, (FACE_MATCH_WEIGHT_MAX * (intersection - initialFaceIntersection)) /
+        (intersectionThreshold - initialFaceIntersection) +
+        FACE_MATCH_WEIGHT_MIN), FACE_MATCH_RANGE_MIN) * 100;
+    const isFaceOutsideOvalToTheLeft = minOvalX > minFaceX && maxOvalX > maxFaceX;
+    const isFaceOutsideOvalToTheRight = minFaceX > minOvalX && maxFaceX > maxOvalX;
+    const isFaceMatched = intersection > intersectionThreshold;
+    const isFaceMatchedClosely = minOvalY - minFaceY > faceDetectionHeightThreshold ||
+        maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
+        (minOvalX - minFaceX > faceDetectionWidthThreshold &&
+            maxFaceX - maxOvalX > faceDetectionWidthThreshold);
+    if (isFaceMatched) {
+        faceMatchState = FaceMatchState.MATCHED;
+    }
+    else if (isFaceOutsideOvalToTheLeft || isFaceOutsideOvalToTheRight) {
+        faceMatchState = FaceMatchState.OFF_CENTER;
+    }
+    else if (isFaceMatchedClosely) {
+        faceMatchState = FaceMatchState.MATCHED;
+    }
+    else {
+        faceMatchState = FaceMatchState.TOO_FAR;
+    }
+    return { faceMatchState, faceMatchPercentage };
+}
+
+const VERSION = '3.0.17';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -794,6 +804,7 @@ const getLivenessUserAgent = () => {
  * Because of this the file is not fully typed at this time but we should eventually work on fully typing this file.
  */
 const DEFAULT_WS_CONNECTION_TIMEOUT_MS = 2000;
+const WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE = 'Websocket connection timeout';
 const isWebSocketRequest = (request) => request.protocol === 'ws:' || request.protocol === 'wss:';
 const isReadableStream = (payload) => typeof ReadableStream === 'function' && payload instanceof ReadableStream;
 /**
@@ -893,11 +904,7 @@ class CustomWebSocketFetchHandler {
         return new Promise((resolve, reject) => {
             const timeout = setTimeout(() => {
                 this.removeNotUsableSockets(socket.url);
-                reject({
-                    $metadata: {
-                        httpStatusCode: 500,
-                    },
-                });
+                reject(new Error(WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE));
             }, connectionTimeout);
             socket.onopen = () => {
                 clearTimeout(timeout);
@@ -1300,6 +1307,10 @@ const isServerSesssionInformationEvent = (value) => {
     return !!value
         ?.ServerSessionInformationEvent;
 };
+const isConnectionTimeoutError = (error) => {
+    const { message } = error;
+    return message.includes(WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE);
+};
 const isDisconnectionEvent = (value) => {
     return !!value
         ?.DisconnectionEvent;
@@ -1340,7 +1351,6 @@ const STATIC_VIDEO_CONSTRAINTS = {
 
 const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
 const DEFAULT_FACE_FIT_TIMEOUT = 7000;
-const MIN_FACE_MATCH_TIME = 1000;
 let responseStream;
 const responseStreamActor = async (callback) => {
     try {
@@ -1384,14 +1394,20 @@ const responseStreamActor = async (callback) => {
         }
     }
     catch (error) {
-        let returnedError = error;
         if (isInvalidSignatureRegionException(error)) {
-            returnedError = new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.');
-        }
-        if (returnedError instanceof Error) {
             callback({
                 type: 'SERVER_ERROR',
-                data: { error: returnedError },
+                data: {
+                    error: new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.'),
+                },
+            });
+        }
+        else if (error instanceof Error) {
+            callback({
+                type: isConnectionTimeoutError(error)
+                    ? 'CONNECTION_TIMEOUT'
+                    : 'SERVER_ERROR',
+                data: { error },
             });
         }
     }
@@ -1430,7 +1446,6 @@ const livenessMachine = xstate.createMachine({
             currentDetectedFace: undefined,
             startFace: undefined,
             endFace: undefined,
-            initialFaceMatchTime: undefined,
         },
         freshnessColorAssociatedParams: {
             freshnessColorEl: undefined,
@@ -1470,6 +1485,10 @@ const livenessMachine = xstate.createMachine({
             target: 'error',
             actions: 'updateErrorStateForServer',
         },
+        CONNECTION_TIMEOUT: {
+            target: 'error',
+            actions: 'updateErrorStateForConnectionTimeout',
+        },
         RUNTIME_ERROR: {
             target: 'error',
         },
@@ -1615,6 +1634,8 @@ const livenessMachine = xstate.createMachine({
                         100: { target: 'checkRecordingStarted' },
                     },
                 },
+                // Evaluates face match and moves to checkMatch
+                // which continually checks for match until either timeout or face match
                 ovalMatching: {
                     entry: 'cancelOvalDrawingTimeout',
                     invoke: {
@@ -1625,29 +1646,32 @@ const livenessMachine = xstate.createMachine({
                         },
                     },
                 },
+                // If `hasFaceMatchedInOval` is true, then move to `delayBeforeFlash`, which pauses
+                // for one second to show "Hold still" text before moving to `flashFreshnessColors`.
+                // If not, move back to ovalMatching and re-evaluate match state
                 checkMatch: {
                     after: {
                         0: {
-                            target: 'flashFreshnessColors',
-                            cond: 'hasFaceMatchedInOvalWithMinTime',
+                            target: 'delayBeforeFlash',
+                            cond: 'hasFaceMatchedInOval',
                             actions: [
+                                'setFaceMatchTimeAndStartFace',
                                 'updateEndFaceMatch',
                                 'setupFlashFreshnessColors',
                                 'cancelOvalMatchTimeout',
                                 'cancelOvalDrawingTimeout',
                             ],
                         },
-                        0.1: {
-                            target: 'ovalMatching',
-                            cond: 'hasFaceMatchedInOval',
-                            actions: 'setFaceMatchTimeAndStartFace',
-                        },
                         1: {
                             target: 'ovalMatching',
-                            cond: 'hasNotFaceMatchedInOval',
                         },
                     },
                 },
+                delayBeforeFlash: {
+                    after: {
+                        1000: 'flashFreshnessColors',
+                    },
+                },
                 flashFreshnessColors: {
                     invoke: {
                         src: 'flashColors',
@@ -1912,14 +1936,13 @@ const livenessMachine = xstate.createMachine({
                     startFace: context.faceMatchAssociatedParams.startFace === undefined
                         ? context.faceMatchAssociatedParams.currentDetectedFace
                         : context.faceMatchAssociatedParams.startFace,
-                    initialFaceMatchTime: context.faceMatchAssociatedParams.initialFaceMatchTime ===
-                        undefined
-                        ? Date.now()
-                        : context.faceMatchAssociatedParams.initialFaceMatchTime,
                 };
             },
         }),
         resetErrorState: xstate.assign({ errorState: (_) => undefined }),
+        updateErrorStateForConnectionTimeout: xstate.assign({
+            errorState: (_) => LivenessErrorState.CONNECTION_TIMEOUT,
+        }),
         updateErrorStateForTimeout: xstate.assign({
             errorState: (_, event) => event.data?.errorState || LivenessErrorState.TIMEOUT,
         }),
@@ -2087,21 +2110,10 @@ const livenessMachine = xstate.createMachine({
     },
     guards: {
         shouldTimeoutOnFailedAttempts: (context) => context.failedAttempts >= context.maxFailedAttempts,
-        hasFaceMatchedInOvalWithMinTime: (context) => {
-            const { faceMatchState, initialFaceMatchTime } = context.faceMatchAssociatedParams;
-            const timeSinceInitialFaceMatch = Date.now() - initialFaceMatchTime;
-            const hasMatched = faceMatchState === FaceMatchState.MATCHED &&
-                timeSinceInitialFaceMatch >= MIN_FACE_MATCH_TIME;
-            return hasMatched;
-        },
         hasFaceMatchedInOval: (context) => {
             return (context.faceMatchAssociatedParams.faceMatchState ===
                 FaceMatchState.MATCHED);
         },
-        hasNotFaceMatchedInOval: (context) => {
-            return (context.faceMatchAssociatedParams.faceMatchState !==
-                FaceMatchState.MATCHED);
-        },
         hasSingleFace: (context) => {
             return (context.faceMatchAssociatedParams.faceMatchState ===
                 FaceMatchState.FACE_IDENTIFIED);
@@ -2318,7 +2330,7 @@ const livenessMachine = xstate.createMachine({
                 videoWidth: videoEl.width,
             });
             // renormalize initial face
-            const renormalizedFace = generateBboxFromLandmarks(initialFace, ovalDetails);
+            const renormalizedFace = generateBboxFromLandmarks(initialFace, ovalDetails, videoEl.videoHeight);
             initialFace.top = renormalizedFace.top;
             initialFace.left = renormalizedFace.left;
             initialFace.height = renormalizedFace.bottom - renormalizedFace.top;
@@ -2347,7 +2359,7 @@ const livenessMachine = xstate.createMachine({
             let faceMatchPercentage = 0;
             let detectedFace;
             let illuminationState;
-            const initialFaceBoundingBox = generateBboxFromLandmarks(initialFace, ovalDetails);
+            const initialFaceBoundingBox = generateBboxFromLandmarks(initialFace, ovalDetails, videoEl.videoHeight);
             const { ovalBoundingBox } = getOvalBoundingBox(ovalDetails);
             const initialFaceIntersection = getIntersectionOverUnion(initialFaceBoundingBox, ovalBoundingBox);
             switch (detectedFaces.length) {
@@ -2360,7 +2372,13 @@ const livenessMachine = xstate.createMachine({
                 case 1: {
                     //exactly one face detected, match face with oval;
                     detectedFace = detectedFaces[0];
-                    const { faceMatchState: faceMatchStateInLivenessOval, faceMatchPercentage: faceMatchPercentageInLivenessOval, } = getFaceMatchStateInLivenessOval(detectedFace, ovalDetails, initialFaceIntersection, serverSessionInformation);
+                    const { faceMatchState: faceMatchStateInLivenessOval, faceMatchPercentage: faceMatchPercentageInLivenessOval, } = getFaceMatchStateInLivenessOval({
+                        face: detectedFace,
+                        ovalDetails: ovalDetails,
+                        initialFaceIntersection,
+                        sessionInformation: serverSessionInformation,
+                        frameHeight: videoEl.videoHeight,
+                    });
                     faceMatchState = faceMatchStateInLivenessOval;
                     faceMatchPercentage = faceMatchPercentageInLivenessOval;
                     break;
@@ -2615,7 +2633,6 @@ const Hint = ({ hintDisplayText }) => {
         [FaceMatchState.CANT_IDENTIFY]: hintDisplayText.hintCanNotIdentifyText,
         [FaceMatchState.FACE_IDENTIFIED]: hintDisplayText.hintTooFarText,
         [FaceMatchState.TOO_MANY]: hintDisplayText.hintTooManyFacesText,
-        [FaceMatchState.TOO_CLOSE]: hintDisplayText.hintTooCloseText,
         [FaceMatchState.TOO_FAR]: hintDisplayText.hintTooFarText,
         [FaceMatchState.MATCHED]: hintDisplayText.hintHoldFaceForFreshnessText,
         [FaceMatchState.OFF_CENTER]: hintDisplayText.hintFaceOffCenterText,
@@ -2661,13 +2678,11 @@ const Hint = ({ hintDisplayText }) => {
         return React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintHoldFaceForFreshnessText });
     }
     if (isRecording && !isFlashingFreshness) {
-        // During face matching, we want to only show the TOO_CLOSE or
-        // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
-        // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
+        // During face matching, we want to only show the
+        // TOO_FAR texts. For FACE_IDENTIFIED, CANT_IDENTIFY, TOO_MANY
         // we are defaulting to the TOO_FAR text (for now).
         let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
-        if (faceMatchState === FaceMatchState.TOO_CLOSE ||
-            faceMatchState === FaceMatchState.MATCHED) {
+        if (faceMatchState === FaceMatchState.MATCHED) {
             resultHintString = FaceMatchStateStringMap[faceMatchState];
         }
         // If the face is outside the oval set the aria-label to a string about centering face in oval
@@ -2681,7 +2696,7 @@ const Hint = ({ hintDisplayText }) => {
             faceMatchPercentage > 50) {
             a11yHintString = hintDisplayText.hintMatchIndicatorText;
         }
-        return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+        return (React__namespace.createElement(Toast, { size: "large", variation: 'primary' },
             React__namespace.createElement(uiReact.VisuallyHidden, { "aria-live": "assertive" }, a11yHintString),
             React__namespace.createElement(uiReact.View, { "aria-label": a11yHintString }, resultHintString)));
     }
@@ -2722,6 +2737,8 @@ const RecordingIcon = ({ children }) => {
 
 const defaultErrorDisplayText = {
     errorLabelText: 'Error',
+    connectionTimeoutHeaderText: 'Connection time out',
+    connectionTimeoutMessageText: 'Connection has timed out.',
     timeoutHeaderText: 'Time out',
     timeoutMessageText: "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
     faceDistanceHeaderText: 'Forward movement detected',
@@ -2782,10 +2799,14 @@ const defaultLivenessDisplayText = {
 
 const renderToastErrorModal = (props) => {
     const { error: errorState, displayText } = props;
-    const { errorLabelText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
+    const { connectionTimeoutHeaderText, connectionTimeoutMessageText, errorLabelText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
     let heading;
     let message;
     switch (errorState) {
+        case LivenessErrorState.CONNECTION_TIMEOUT:
+            heading = connectionTimeoutHeaderText;
+            message = connectionTimeoutMessageText;
+            break;
         case LivenessErrorState.TIMEOUT:
             heading = timeoutHeaderText;
             message = timeoutMessageText;
@@ -3191,7 +3212,7 @@ function getDisplayText(overrideDisplayText) {
         ...defaultLivenessDisplayText,
         ...overrideDisplayText,
     };
-    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, errorLabelText, hintCanNotIdentifyText, hintCenterFaceText, hintCenterFaceInstructionText, hintFaceOffCenterText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, hintCheckCompleteText, hintMatchIndicatorText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
+    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, connectionTimeoutHeaderText, connectionTimeoutMessageText, clientHeaderText, clientMessageText, errorLabelText, hintCanNotIdentifyText, hintCenterFaceText, hintCenterFaceInstructionText, hintFaceOffCenterText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, hintCheckCompleteText, hintMatchIndicatorText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
     const hintDisplayText = {
         hintMoveFaceFrontOfCameraText,
         hintTooManyFacesText,
@@ -3240,6 +3261,8 @@ function getDisplayText(overrideDisplayText) {
         recordingIndicatorText,
     };
     const errorDisplayText = {
+        connectionTimeoutHeaderText,
+        connectionTimeoutMessageText,
         errorLabelText,
         timeoutHeaderText,
         timeoutMessageText,

package/dist/styles.css

@@ -718,7 +718,7 @@
   --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
   --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
-  --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
+  --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);

package/dist/types/components/FaceLivenessDetector/displayText.d.ts

@@ -60,6 +60,8 @@ export type StreamDisplayText = {
 };
 export declare const defaultErrorDisplayText: {
     errorLabelText: string;
+    connectionTimeoutHeaderText: string;
+    connectionTimeoutMessageText: string;
     timeoutHeaderText: string;
     timeoutMessageText: string;
     faceDistanceHeaderText: string;

package/dist/types/components/FaceLivenessDetector/service/machine/index.d.ts

@@ -1,5 +1 @@
-import { LivenessContext, LivenessEvent } from '../types';
-export declare const livenessMachine: import("xstate").StateMachine<LivenessContext, any, LivenessEvent, {
-    value: any;
-    context: LivenessContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, LivenessEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
+export { livenessMachine } from './machine';

package/dist/types/components/FaceLivenessDetector/service/machine/machine.d.ts

@@ -0,0 +1,5 @@
+import { LivenessContext, LivenessEvent } from '../types';
+export declare const livenessMachine: import("xstate").StateMachine<LivenessContext, any, LivenessEvent, {
+    value: any;
+    context: LivenessContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, LivenessEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/components/FaceLivenessDetector/service/types/error.d.ts

@@ -2,6 +2,7 @@
  * The liveness error states
  */
 export declare const LivenessErrorState: {
+    readonly CONNECTION_TIMEOUT: "CONNECTION_TIMEOUT";
     readonly TIMEOUT: "TIMEOUT";
     readonly RUNTIME_ERROR: "RUNTIME_ERROR";
     readonly FRESHNESS_TIMEOUT: "FRESHNESS_TIMEOUT";

package/dist/types/components/FaceLivenessDetector/service/types/liveness.d.ts

@@ -98,7 +98,6 @@ export declare enum IlluminationState {
 export declare enum FaceMatchState {
     MATCHED = "MATCHED",
     TOO_FAR = "TOO FAR",
-    TOO_CLOSE = "TOO CLOSE",
     CANT_IDENTIFY = "CANNOT IDENTIFY",
     FACE_IDENTIFIED = "ONE FACE IDENTIFIED",
     TOO_MANY = "TOO MANY FACES",

package/dist/types/components/FaceLivenessDetector/service/types/machine.d.ts

@@ -11,7 +11,6 @@ export interface FaceMatchAssociatedParams {
     currentDetectedFace?: Face;
     startFace?: Face;
     endFace?: Face;
-    initialFaceMatchTime?: number;
 }
 export interface FreshnessColorAssociatedParams {
     freshnessColorEl?: HTMLCanvasElement;
@@ -54,7 +53,7 @@ export interface LivenessContext {
     shouldDisconnect?: boolean;
     videoAssociatedParams?: VideoAssociatedParams;
 }
-export type LivenessEventTypes = 'BEGIN' | 'START_RECORDING' | 'TIMEOUT' | 'ERROR' | 'CANCEL' | 'SET_SESSION_INFO' | 'DISCONNECT_EVENT' | 'SET_DOM_AND_CAMERA_DETAILS' | 'UPDATE_DEVICE_AND_STREAM' | 'SERVER_ERROR' | 'RUNTIME_ERROR' | 'RETRY_CAMERA_CHECK' | 'MOBILE_LANDSCAPE_WARNING';
+export type LivenessEventTypes = 'BEGIN' | 'CONNECTION_TIMEOUT' | 'START_RECORDING' | 'TIMEOUT' | 'ERROR' | 'CANCEL' | 'SET_SESSION_INFO' | 'DISCONNECT_EVENT' | 'SET_DOM_AND_CAMERA_DETAILS' | 'UPDATE_DEVICE_AND_STREAM' | 'SERVER_ERROR' | 'RUNTIME_ERROR' | 'RETRY_CAMERA_CHECK' | 'MOBILE_LANDSCAPE_WARNING';
 export type LivenessEventData = Record<PropertyKey, any>;
 export interface LivenessEvent {
     type: LivenessEventTypes;
@@ -67,7 +66,7 @@ export interface StreamActorCallback {
         type: 'DISCONNECT_EVENT';
     }): void;
     (params: {
-        type: 'SERVER_ERROR';
+        type: 'SERVER_ERROR' | 'CONNECTION_TIMEOUT';
         data: {
             error: Error;
         };

package/dist/types/components/FaceLivenessDetector/service/utils/constants.d.ts

@@ -1,6 +1,12 @@
 export declare const FACE_DISTANCE_THRESHOLD = 0.32;
 export declare const REDUCED_THRESHOLD = 0.4;
 export declare const REDUCED_THRESHOLD_MOBILE = 0.37;
+export declare const PUPIL_DISTANCE_WEIGHT = 2;
+export declare const FACE_HEIGHT_WEIGHT = 1.8;
+export declare const FACE_MATCH_RANGE_MIN = 0;
+export declare const FACE_MATCH_RANGE_MAX = 1;
+export declare const FACE_MATCH_WEIGHT_MIN = 0.25;
+export declare const FACE_MATCH_WEIGHT_MAX = 0.75;
 export declare const WS_CLOSURE_CODE: {
     SUCCESS_CODE: number;
     DEFAULT_ERROR_CODE: number;

package/dist/types/components/FaceLivenessDetector/service/utils/createStreamingClient/CustomWebSocketFetchHandler.d.ts

@@ -1,5 +1,6 @@
 import { HttpRequest, HttpResponse } from '@smithy/protocol-http';
 import { Provider, RequestHandler, RequestHandlerMetadata } from '@smithy/types';
+export declare const WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE = "Websocket connection timeout";
 export interface WebSocketFetchHandlerOptions {
     /**
      * The maximum time in milliseconds that the connection phase of a request

package/dist/types/components/FaceLivenessDetector/service/utils/eventUtils.d.ts

@@ -1,5 +1,6 @@
 import { LivenessResponseStream } from '@aws-sdk/client-rekognitionstreaming';
 export declare const isServerSesssionInformationEvent: (value: unknown) => value is LivenessResponseStream.ServerSessionInformationEventMember;
+export declare const isConnectionTimeoutError: (error: unknown) => error is Error;
 export declare const isDisconnectionEvent: (value: unknown) => value is LivenessResponseStream.DisconnectionEventMember;
 export declare const isValidationExceptionEvent: (value: unknown) => value is LivenessResponseStream.ValidationExceptionMember;
 export declare const isInternalServerExceptionEvent: (value: unknown) => value is LivenessResponseStream.InternalServerExceptionMember;

package/dist/types/components/FaceLivenessDetector/service/utils/getFaceMatchStateInLivenessOval.d.ts

@@ -0,0 +1,17 @@
+import { LivenessOvalDetails, Face, FaceMatchState } from '../types';
+import { SessionInformation } from '@aws-sdk/client-rekognitionstreaming';
+interface MatchStateInOvalParams {
+    face: Face;
+    ovalDetails: LivenessOvalDetails;
+    initialFaceIntersection: number;
+    sessionInformation: SessionInformation;
+    frameHeight: number;
+}
+/**
+ * Returns the state of the provided face with respect to the provided liveness oval.
+ */
+export declare function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceIntersection, sessionInformation, frameHeight, }: MatchStateInOvalParams): {
+    faceMatchState: FaceMatchState;
+    faceMatchPercentage: number;
+};
+export {};

package/dist/types/components/FaceLivenessDetector/service/utils/index.d.ts

@@ -2,5 +2,6 @@ export * from './blazefaceFaceDetection';
 export * from './videoRecorder';
 export * from './support';
 export * from './liveness';
+export * from './getFaceMatchStateInLivenessOval';
 export * from './streamProvider';
 export * from './freshnessColorDisplay';