@aws-amplify/ui-react-liveness 3.0.14 → 3.0.16

package/dist/esm/components/FaceLivenessDetector/FaceLivenessDetectorCore.mjs

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import { useInterpret } from '@xstate/react';
-import { livenessMachine } from './service/machine/index.mjs';
+import { livenessMachine } from './service/machine/machine.mjs';
 import './service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import './service/utils/createStreamingClient/createStreamingClient.mjs';
 import './service/utils/freshnessColorDisplay.mjs';
 import { View, Flex } from '@aws-amplify/ui-react';
 import { FaceLivenessDetectorProvider } from './providers/FaceLivenessDetectorProvider.mjs';

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs

@@ -2,7 +2,7 @@ import React__default, { useRef, useState } from 'react';
 import { classNames } from '@aws-amplify/ui';
 import { Loader, View, Flex, Text, Label, SelectField, Button } from '@aws-amplify/ui-react';
 import { useColorMode } from '@aws-amplify/ui-react/internal';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import { FaceMatchState } from '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';
@@ -10,12 +10,8 @@ import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
 import { drawStaticOval, clearOvalCanvas } from '../service/utils/liveness.mjs';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
 import { useLivenessSelector, createLivenessSelector } from '../hooks/useLivenessSelector.mjs';

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCheck.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex, Text, Button, View } from '@aws-amplify/ui-react';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import '../service/types/liveness.mjs';
 import { LivenessErrorState } from '../service/types/error.mjs';
 import '@tensorflow/tfjs-core';
@@ -8,12 +8,8 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import { LivenessCameraModule } from './LivenessCameraModule.mjs';
 import { useLivenessActor } from '../hooks/useLivenessActor.mjs';

package/dist/esm/components/FaceLivenessDetector/service/machine/{index.mjs → machine.mjs}

@@ -1,9 +1,10 @@
 import { nanoid } from 'nanoid';
 import { createMachine, assign, spawn, actions } from 'xstate';
-import { drawStaticOval, getBoundingBox, getColorsSequencesFromSessionInformation, isCameraDeviceVirtual, getFaceMatchState, isFaceDistanceBelowThreshold, estimateIllumination, getOvalDetailsFromSessionInformation, generateBboxFromLandmarks, drawLivenessOvalInCanvas, getOvalBoundingBox, getIntersectionOverUnion, getFaceMatchStateInLivenessOval, getStaticLivenessOvalDetails } from '../utils/liveness.mjs';
+import { drawStaticOval, getBoundingBox, getColorsSequencesFromSessionInformation, isCameraDeviceVirtual, getFaceMatchState, isFaceDistanceBelowThreshold, estimateIllumination, getOvalDetailsFromSessionInformation, generateBboxFromLandmarks, drawLivenessOvalInCanvas, getOvalBoundingBox, getIntersectionOverUnion, getStaticLivenessOvalDetails } from '../utils/liveness.mjs';
 import { FaceMatchState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
 import { BlazeFaceFaceDetection } from '../utils/blazefaceFaceDetection.mjs';
+import { getFaceMatchStateInLivenessOval } from '../utils/getFaceMatchStateInLivenessOval.mjs';
 import { LivenessStreamProvider } from '../utils/streamProvider.mjs';
 import { FreshnessColorDisplay } from '../utils/freshnessColorDisplay.mjs';
 import { isServerSesssionInformationEvent, isDisconnectionEvent, isValidationExceptionEvent, isInternalServerExceptionEvent, isThrottlingExceptionEvent, isServiceQuotaExceededExceptionEvent, isInvalidSignatureRegionException } from '../utils/eventUtils.mjs';
@@ -12,7 +13,6 @@ import { WS_CLOSURE_CODE } from '../utils/constants.mjs';
 
 const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
 const DEFAULT_FACE_FIT_TIMEOUT = 7000;
-const MIN_FACE_MATCH_TIME = 1000;
 let responseStream;
 const responseStreamActor = async (callback) => {
     try {
@@ -102,7 +102,6 @@ const livenessMachine = createMachine({
             currentDetectedFace: undefined,
             startFace: undefined,
             endFace: undefined,
-            initialFaceMatchTime: undefined,
         },
         freshnessColorAssociatedParams: {
             freshnessColorEl: undefined,
@@ -287,6 +286,8 @@ const livenessMachine = 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: {
@@ -297,29 +298,32 @@ const livenessMachine = 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',
@@ -584,10 +588,6 @@ const livenessMachine = createMachine({
                     startFace: context.faceMatchAssociatedParams.startFace === undefined
                         ? context.faceMatchAssociatedParams.currentDetectedFace
                         : context.faceMatchAssociatedParams.startFace,
-                    initialFaceMatchTime: context.faceMatchAssociatedParams.initialFaceMatchTime ===
-                        undefined
-                        ? Date.now()
-                        : context.faceMatchAssociatedParams.initialFaceMatchTime,
                 };
             },
         }),
@@ -759,21 +759,10 @@ const livenessMachine = 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);
@@ -990,7 +979,7 @@ const livenessMachine = 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;
@@ -1019,7 +1008,7 @@ const livenessMachine = 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) {
@@ -1032,7 +1021,13 @@ const livenessMachine = 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;

package/dist/esm/components/FaceLivenessDetector/service/types/liveness.mjs

@@ -14,7 +14,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";

package/dist/esm/components/FaceLivenessDetector/service/utils/constants.mjs

@@ -1,11 +1,19 @@
 // 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,
@@ -15,4 +23,4 @@ const WS_CLOSURE_CODE = {
     USER_ERROR_DURING_CONNECTION: 4007,
 };
 
-export { FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD, REDUCED_THRESHOLD_MOBILE, WS_CLOSURE_CODE };
+export { FACE_DISTANCE_THRESHOLD, FACE_HEIGHT_WEIGHT, FACE_MATCH_RANGE_MAX, FACE_MATCH_RANGE_MIN, FACE_MATCH_WEIGHT_MAX, FACE_MATCH_WEIGHT_MIN, PUPIL_DISTANCE_WEIGHT, REDUCED_THRESHOLD, REDUCED_THRESHOLD_MOBILE, WS_CLOSURE_CODE };

package/dist/esm/components/FaceLivenessDetector/service/utils/{CustomWebSocketFetchHandler.mjs → createStreamingClient/CustomWebSocketFetchHandler.mjs}

@@ -2,7 +2,7 @@ import { formatUrl } from '@aws-sdk/util-format-url';
 import { readableStreamtoIterable, iterableToReadableStream } from '@smithy/eventstream-serde-browser';
 import { FetchHttpHandler } from '@smithy/fetch-http-handler';
 import { HttpResponse } from '@smithy/protocol-http';
-import { WS_CLOSURE_CODE } from './constants.mjs';
+import { WS_CLOSURE_CODE } from '../constants.mjs';
 
 /**
  * Note: This file was copied from https://github.com/aws/aws-sdk-js-v3/blob/main/packages/middleware-websocket/src/websocket-fetch-handler.ts#L176

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/Signer.mjs

@@ -0,0 +1,18 @@
+import { SignatureV4 } from '@smithy/signature-v4';
+
+// override aws sdk default value of 60
+const REQUEST_EXPIRY = 299;
+class Signer extends SignatureV4 {
+    presign(request, options) {
+        return super.presign(request, {
+            ...options,
+            expiresIn: REQUEST_EXPIRY,
+            // `headers` that should not be signed. Liveness WebSocket
+            // request omits `headers` except for required `host` header. Signature
+            // could be a mismatch if other `headers` are signed
+            unsignableHeaders: new Set(Object.keys(request.headers).filter((header) => header !== 'host')),
+        });
+    }
+}
+
+export { REQUEST_EXPIRY, Signer };

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/createStreamingClient.mjs

@@ -0,0 +1,27 @@
+import { RekognitionStreamingClient } from '@aws-sdk/client-rekognitionstreaming';
+import { getAmplifyUserAgent } from '@aws-amplify/core/internals/utils';
+import { getLivenessUserAgent } from '../../../utils/platform.mjs';
+import { CustomWebSocketFetchHandler } from './CustomWebSocketFetchHandler.mjs';
+import { resolveCredentials } from './resolveCredentials.mjs';
+import { Signer } from './Signer.mjs';
+
+const CONNECTION_TIMEOUT = 10000;
+const CUSTOM_USER_AGENT = `${getAmplifyUserAgent()} ${getLivenessUserAgent()}`;
+async function createStreamingClient({ credentialsProvider, endpointOverride, region, }) {
+    const credentials = await resolveCredentials(credentialsProvider);
+    const clientconfig = {
+        credentials,
+        customUserAgent: CUSTOM_USER_AGENT,
+        region,
+        requestHandler: new CustomWebSocketFetchHandler({
+            connectionTimeout: CONNECTION_TIMEOUT,
+        }),
+        signerConstructor: Signer,
+    };
+    if (endpointOverride) {
+        clientconfig.endpointProvider = () => ({ url: new URL(endpointOverride) });
+    }
+    return new RekognitionStreamingClient(clientconfig);
+}
+
+export { createStreamingClient };

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/resolveCredentials.mjs

@@ -0,0 +1,38 @@
+import { fetchAuthSession } from 'aws-amplify/auth';
+
+const isCredentialsProvider = (credentialsProvider) => typeof credentialsProvider === 'function';
+// the return interface of `fetchAuthSession` includes `credentials` as
+// optional, but `credentials` is always returned. If `fetchAuthSession`
+// is called for an unauthenticated end user, values of `accessKeyId`
+// and `secretAccessKey` are `undefined`
+const isCredentials = (credentials) => !!(credentials?.accessKeyId && credentials?.secretAccessKey);
+/**
+ * Resolves the `credentials` param to be passed to `RekognitionStreamingClient` which accepts either:
+ * - a `credentials` object
+ * - a `credentialsProvider` callback
+ *
+ * @param credentialsProvider optional `credentialsProvider` callback
+ * @returns {Promise<AwsCredentials | AwsCredentialProvider>} `credentials` object or valid `credentialsProvider` callback
+ */
+async function resolveCredentials(credentialsProvider) {
+    const hasCredentialsProvider = isCredentialsProvider(credentialsProvider);
+    if (hasCredentialsProvider) {
+        return credentialsProvider;
+    }
+    if (credentialsProvider && !hasCredentialsProvider) {
+        throw new Error('Invalid credentialsProvider');
+    }
+    try {
+        const result = (await fetchAuthSession()).credentials;
+        if (isCredentials(result)) {
+            return result;
+        }
+        throw new Error('Missing credentials');
+    }
+    catch (e) {
+        const { message } = e;
+        throw new Error(`Invalid credentials: ${message}`);
+    }
+}
+
+export { resolveCredentials };

package/dist/esm/components/FaceLivenessDetector/service/utils/getFaceMatchStateInLivenessOval.mjs

@@ -0,0 +1,59 @@
+import { FaceMatchState } from '../types/liveness.mjs';
+import { generateBboxFromLandmarks, getOvalBoundingBox, getIntersectionOverUnion } from './liveness.mjs';
+import { FACE_MATCH_RANGE_MAX, FACE_MATCH_WEIGHT_MAX, FACE_MATCH_WEIGHT_MIN, FACE_MATCH_RANGE_MIN } from './constants.mjs';
+
+/**
+ * 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 };
+}
+
+export { getFaceMatchStateInLivenessOval };

package/dist/esm/components/FaceLivenessDetector/service/utils/liveness.mjs

@@ -1,6 +1,6 @@
-import { FaceMatchState, IlluminationState } from '../types/liveness.mjs';
+import { IlluminationState, FaceMatchState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
-import { FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD_MOBILE, REDUCED_THRESHOLD } from './constants.mjs';
+import { PUPIL_DISTANCE_WEIGHT, FACE_HEIGHT_WEIGHT, FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD_MOBILE, REDUCED_THRESHOLD } from './constants.mjs';
 
 /**
  * Returns the random number between min and max
@@ -180,87 +180,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];
+        // when face tilts down
+        centerFaceX = eyeCenter[0];
+        centerFaceY = eyeCenter[1];
     }
-    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]);
+    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.
  */
@@ -436,8 +382,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 <
@@ -469,4 +417,4 @@ function getBoundingBox({ deviceHeight, deviceWidth, height, width, top, left, }
     };
 }
 
-export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getFaceMatchStateInLivenessOval, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };
+export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };

package/dist/esm/components/FaceLivenessDetector/service/utils/streamProvider.mjs

@@ -1,9 +1,6 @@
-import { getAmplifyUserAgent } from '@aws-amplify/core/internals/utils';
-import { fetchAuthSession } from 'aws-amplify/auth';
-import { RekognitionStreamingClient, StartFaceLivenessSessionCommand } from '@aws-sdk/client-rekognitionstreaming';
+import { StartFaceLivenessSessionCommand } from '@aws-sdk/client-rekognitionstreaming';
 import { VideoRecorder } from './videoRecorder.mjs';
-import { getLivenessUserAgent } from '../../utils/platform.mjs';
-import { CustomWebSocketFetchHandler } from './CustomWebSocketFetchHandler.mjs';
+import { createStreamingClient } from './createStreamingClient/createStreamingClient.mjs';
 
 const TIME_SLICE = 1000;
 function isBlob(obj) {
@@ -34,9 +31,7 @@ class LivenessStreamProvider {
         this.videoRecorder.start(TIME_SLICE);
     }
     sendClientInfo(clientInfo) {
-        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', {
-            data: { clientInfo },
-        }));
+        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', { data: { clientInfo } }));
     }
     async stopVideo() {
         await this.videoRecorder.stop();
@@ -48,32 +43,15 @@ class LivenessStreamProvider {
         if (this.videoRecorder.getState() === 'recording') {
             await this.stopVideo();
         }
-        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', {
-            data: { code: code },
-        }));
+        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', { data: { code } }));
         return;
     }
     async init() {
-        const credentials = this.credentialProvider ?? (await fetchAuthSession()).credentials;
-        if (!credentials) {
-            throw new Error('No credentials');
-        }
-        const clientconfig = {
-            credentials,
+        this._client = await createStreamingClient({
+            credentialsProvider: this.credentialProvider,
+            endpointOverride: this.endpointOverride,
             region: this.region,
-            customUserAgent: `${getAmplifyUserAgent()} ${getLivenessUserAgent()}`,
-            requestHandler: new CustomWebSocketFetchHandler({
-                connectionTimeout: 10000,
-            }),
-        };
-        if (this.endpointOverride) {
-            const override = this.endpointOverride;
-            clientconfig.endpointProvider = () => {
-                const url = new URL(override);
-                return { url };
-            };
-        }
-        this._client = new RekognitionStreamingClient(clientconfig);
+        });
         this.responseStream = await this.startLivenessVideoConnection();
     }
     // Creates a generator from a stream of video chunks and livenessActionDocuments and yields VideoEvent and ClientEvents

package/dist/esm/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.mjs

@@ -2,19 +2,15 @@ import React__default from 'react';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { View, Flex } from '@aws-amplify/ui-react';
 import { CancelButton } from './CancelButton.mjs';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import '@xstate/react';
 import '../providers/FaceLivenessDetectorProvider.mjs';

package/dist/esm/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.mjs

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { Flex, Text, Button } from '@aws-amplify/ui-react';
 import { AlertIcon } from '@aws-amplify/ui-react/internal';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import '../service/types/liveness.mjs';
 import { LivenessErrorState } from '../service/types/error.mjs';
 import '@tensorflow/tfjs-core';
@@ -9,12 +9,8 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import { Toast } from './Toast.mjs';
 import { Overlay } from './Overlay.mjs';