@aws-amplify/ui-react-liveness 3.3.9 → 3.4.0

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

@@ -1,6 +1,6 @@
 import { fetchAuthSession } from 'aws-amplify/auth';
 
-const isCredentialsProvider = (credentialsProvider) => typeof credentialsProvider === 'function';
+const isValidCredentialsProvider = (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`
@@ -15,13 +15,14 @@ const isCredentials = (credentials) => !!(credentials?.accessKeyId && credential
  * @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) {
+    const hasValidCredentialsProvider = isValidCredentialsProvider(credentialsProvider);
+    // provided `credentialsProvider` is not valid
+    if (credentialsProvider && !hasValidCredentialsProvider) {
         throw new Error('Invalid credentialsProvider');
     }
+    if (hasValidCredentialsProvider) {
+        return credentialsProvider;
+    }
     try {
         const result = (await fetchAuthSession()).credentials;
         if (isCredentials(result)) {

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

@@ -5,10 +5,9 @@ import { FACE_MATCH_RANGE_MAX, FACE_MATCH_WEIGHT_MAX, FACE_MATCH_WEIGHT_MIN, FAC
 /**
  * Returns the state of the provided face with respect to the provided liveness oval.
  */
-function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceIntersection, sessionInformation, frameHeight, }) {
+function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceIntersection, parsedSessionInformation, frameHeight, }) {
     let faceMatchState;
-    const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
-        ?.ChallengeConfig;
+    const challengeConfig = parsedSessionInformation.Challenge.ChallengeConfig;
     if (!challengeConfig ||
         !challengeConfig.OvalIouThreshold ||
         !challengeConfig.OvalIouHeightThreshold ||
@@ -17,8 +16,13 @@ function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceInterse
         !challengeConfig.FaceIouWidthThreshold) {
         throw new Error('Challenge information not returned from session information.');
     }
-    const { OvalIouThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold } = challengeConfig;
-    const faceBoundingBox = generateBboxFromLandmarks(face, ovalDetails, frameHeight);
+    const { OvalIouThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold, OvalHeightWidthRatio, } = challengeConfig;
+    const faceBoundingBox = generateBboxFromLandmarks({
+        ovalHeightWidthRatio: OvalHeightWidthRatio,
+        face,
+        oval: ovalDetails,
+        frameHeight,
+    });
     const minFaceX = faceBoundingBox.left;
     const maxFaceX = faceBoundingBox.right;
     const minFaceY = faceBoundingBox.top;

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

@@ -1,6 +1,6 @@
 import { IlluminationState, FaceMatchState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
-import { PUPIL_DISTANCE_WEIGHT, FACE_HEIGHT_WEIGHT, FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD_MOBILE, REDUCED_THRESHOLD } from './constants.mjs';
+import { OVAL_HEIGHT_WIDTH_RATIO, PUPIL_DISTANCE_WEIGHT, FACE_HEIGHT_WEIGHT } from './constants.mjs';
 
 /**
  * Returns the random number between min and max
@@ -45,9 +45,8 @@ function getIntersectionOverUnion(box1, box2) {
  * Returns the details of a randomly generated liveness oval
  * from SDK
  */
-function getOvalDetailsFromSessionInformation({ sessionInformation, videoWidth, }) {
-    const ovalParameters = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
-        ?.OvalParameters;
+function getOvalDetailsFromSessionInformation({ parsedSessionInformation, videoWidth, }) {
+    const ovalParameters = parsedSessionInformation.Challenge.OvalParameters;
     if (!ovalParameters ||
         !ovalParameters.CenterX ||
         !ovalParameters.CenterY ||
@@ -69,7 +68,7 @@ function getOvalDetailsFromSessionInformation({ sessionInformation, videoWidth,
 /**
  * Returns the details of a statically generated liveness oval based on the video dimensions
  */
-function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXSeed = 0.5, centerYSeed = 0.5, ratioMultiplier = 0.8, }) {
+function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXSeed = 0.5, centerYSeed = 0.5, ratioMultiplier = 0.8, ovalHeightWidthRatio = OVAL_HEIGHT_WIDTH_RATIO, }) {
     const videoHeight = height;
     let videoWidth = width;
     const ovalRatio = widthSeed * ratioMultiplier;
@@ -83,7 +82,7 @@ function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXS
         videoWidth = (3 / 4) * videoHeight;
     }
     const ovalWidth = ovalRatio * videoWidth;
-    const ovalHeight = 1.618 * ovalWidth;
+    const ovalHeight = ovalHeightWidthRatio * ovalWidth;
     return {
         flippedCenterX: Math.floor(videoWidth - centerX),
         centerX: Math.floor(centerX),
@@ -146,7 +145,7 @@ function drawStaticOval(canvasEl, videoEl, videoMediaStream) {
     const ovalDetails = getStaticLivenessOvalDetails({
         width: width,
         height: height,
-        ratioMultiplier: 0.5,
+        ratioMultiplier: 0.3,
     });
     ovalDetails.flippedCenterX = width - ovalDetails.centerX;
     // Compute scaleFactor which is how much our video element is scaled
@@ -180,7 +179,7 @@ function getPupilDistanceAndFaceHeight(face) {
     const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
     return { pupilDistance, faceHeight };
 }
-function generateBboxFromLandmarks(face, oval, frameHeight) {
+function generateBboxFromLandmarks({ ovalHeightWidthRatio = OVAL_HEIGHT_WIDTH_RATIO, face, oval, frameHeight, }) {
     const { leftEye, rightEye, nose, leftEar, rightEar } = face;
     const { height: ovalHeight, centerY } = oval;
     const ovalTop = centerY - ovalHeight / 2;
@@ -200,7 +199,7 @@ function generateBboxFromLandmarks(face, oval, frameHeight) {
         centerFaceY = eyeCenter[1];
     }
     const faceWidth = ocularWidth;
-    const faceHeight = 1.68 * faceWidth;
+    const faceHeight = ovalHeightWidthRatio * 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]);
@@ -319,11 +318,11 @@ function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, vide
         throw new Error('Cannot find Overlay Canvas.');
     }
 }
-const isClientFreshnessColorSequence = (obj) => !!obj;
-function getColorsSequencesFromSessionInformation(sessionInformation) {
-    const colorSequenceFromSessionInfo = sessionInformation.Challenge.FaceMovementAndLightChallenge
+const isColorSequence = (obj) => !!obj;
+function getColorsSequencesFromSessionInformation(parsedSessionInformation) {
+    const colorSequenceFromServerChallenge = parsedSessionInformation.Challenge
         .ColorSequences ?? [];
-    const colorSequences = colorSequenceFromSessionInfo.map(({ FreshnessColor, DownscrollDuration: downscrollDuration, FlatDisplayDuration: flatDisplayDuration, }) => {
+    const colorSequences = colorSequenceFromServerChallenge.map(({ FreshnessColor, DownscrollDuration: downscrollDuration, FlatDisplayDuration: flatDisplayDuration, }) => {
         const colorArray = FreshnessColor.RGB;
         const color = `rgb(${colorArray[0]},${colorArray[1]},${colorArray[2]})`;
         return typeof color !== 'undefined' &&
@@ -336,13 +335,7 @@ function getColorsSequencesFromSessionInformation(sessionInformation) {
             }
             : undefined;
     });
-    return colorSequences.filter(isClientFreshnessColorSequence);
-}
-function getRGBArrayFromColorString(colorStr) {
-    return colorStr
-        .slice(colorStr.indexOf('(') + 1, colorStr.indexOf(')'))
-        .split(',')
-        .map((str) => parseInt(str));
+    return colorSequences.filter(isColorSequence);
 }
 async function getFaceMatchState(faceDetector, videoEl) {
     const detectedFaces = await faceDetector.detectFaces(videoEl);
@@ -366,7 +359,9 @@ async function getFaceMatchState(faceDetector, videoEl) {
     }
     return faceMatchState;
 }
-async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails, reduceThreshold = false, isMobile = false, }) {
+async function isFaceDistanceBelowThreshold({ parsedSessionInformation, faceDetector, videoEl, ovalDetails, reduceThreshold = false, }) {
+    const challengeConfig = parsedSessionInformation.Challenge.ChallengeConfig;
+    const { FaceDistanceThresholdMin, FaceDistanceThreshold } = challengeConfig;
     const detectedFaces = await faceDetector.detectFaces(videoEl);
     let detectedFace;
     let isDistanceBelowThreshold = false;
@@ -390,10 +385,8 @@ async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails
                 isDistanceBelowThreshold =
                     calibratedPupilDistance / width <
                         (!reduceThreshold
-                            ? FACE_DISTANCE_THRESHOLD
-                            : isMobile
-                                ? REDUCED_THRESHOLD_MOBILE
-                                : REDUCED_THRESHOLD);
+                            ? FaceDistanceThresholdMin
+                            : FaceDistanceThreshold);
                 if (!isDistanceBelowThreshold) {
                     error = LivenessErrorState.FACE_DISTANCE_ERROR;
                 }
@@ -408,13 +401,5 @@ async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails
     }
     return { isDistanceBelowThreshold, error };
 }
-function getBoundingBox({ deviceHeight, deviceWidth, height, width, top, left, }) {
-    return {
-        Height: height / deviceHeight,
-        Width: width / deviceWidth,
-        Top: top / deviceHeight,
-        Left: left / deviceWidth,
-    };
-}
 
-export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };
+export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getColorsSequencesFromSessionInformation, getFaceMatchState, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isFaceDistanceBelowThreshold };

package/dist/esm/components/FaceLivenessDetector/service/utils/{eventUtils.mjs → responseStreamEvent.mjs}

@@ -1,6 +1,6 @@
 import { WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE } from './createStreamingClient/CustomWebSocketFetchHandler.mjs';
 
-const isServerSesssionInformationEvent = (value) => {
+const isServerSessionInformationEvent = (value) => {
     return !!value
         ?.ServerSessionInformationEvent;
 };
@@ -33,4 +33,4 @@ const isInvalidSignatureRegionException = (error) => {
     return (name === 'InvalidSignatureException' && message.includes('valid region'));
 };
 
-export { isConnectionTimeoutError, isDisconnectionEvent, isInternalServerExceptionEvent, isInvalidSignatureRegionException, isServerSesssionInformationEvent, isServiceQuotaExceededExceptionEvent, isThrottlingExceptionEvent, isValidationExceptionEvent };
+export { isConnectionTimeoutError, isDisconnectionEvent, isInternalServerExceptionEvent, isInvalidSignatureRegionException, isServerSessionInformationEvent, isServiceQuotaExceededExceptionEvent, isThrottlingExceptionEvent, isValidationExceptionEvent };

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

@@ -0,0 +1,45 @@
+import { FACE_MOVEMENT_AND_LIGHT_CHALLENGE, FACE_MOVEMENT_CHALLENGE } from './constants.mjs';
+
+const isFaceMovementAndLightChallenge = (value) => {
+    return (value?.Challenge?.Name ===
+        'FaceMovementAndLightChallenge');
+};
+const isFaceMovementChallenge = (value) => {
+    return (value?.Challenge?.Name ===
+        'FaceMovementChallenge');
+};
+const isFaceMovementAndLightServerChallenge = (value) => {
+    return !!value
+        ?.FaceMovementAndLightChallenge;
+};
+const isFaceMovementServerChallenge = (value) => {
+    return !!value
+        ?.FaceMovementChallenge;
+};
+const createSessionInfoFromServerSessionInformation = (serverSessionInformation) => {
+    let challenge;
+    if (isFaceMovementAndLightServerChallenge(serverSessionInformation.Challenge)) {
+        challenge = {
+            ...serverSessionInformation.Challenge.FaceMovementAndLightChallenge,
+            Name: FACE_MOVEMENT_AND_LIGHT_CHALLENGE.type,
+        };
+    }
+    else if (isFaceMovementServerChallenge(serverSessionInformation.Challenge)) {
+        challenge = {
+            ...serverSessionInformation.Challenge.FaceMovementChallenge,
+            Name: FACE_MOVEMENT_CHALLENGE.type,
+        };
+    }
+    else {
+        throw new Error('Unsupported challenge type returned from session information.');
+    }
+    if (!challenge.ChallengeConfig ||
+        !challenge.ChallengeConfig.FaceDistanceThreshold ||
+        !challenge.ChallengeConfig.FaceDistanceThresholdMin ||
+        !challenge.ChallengeConfig.OvalHeightWidthRatio) {
+        throw new Error('Challenge config not returned from session information.');
+    }
+    return { ...serverSessionInformation, Challenge: challenge };
+};
+
+export { createSessionInfoFromServerSessionInformation, isFaceMovementAndLightChallenge, isFaceMovementAndLightServerChallenge, isFaceMovementChallenge, isFaceMovementServerChallenge };

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

@@ -9,9 +9,10 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import '@aws-sdk/client-rekognitionstreaming';
+import '../service/utils/constants.mjs';
+import '../service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
 import '../service/utils/createStreamingClient/createStreamingClient.mjs';
-import '../service/utils/freshnessColorDisplay.mjs';
+import '../service/utils/StreamRecorder/StreamRecorder.mjs';
 import '@xstate/react';
 import '../providers/FaceLivenessDetectorProvider.mjs';
 import { LivenessClassNames } from '../types/classNames.mjs';

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

@@ -9,9 +9,11 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import '@aws-sdk/client-rekognitionstreaming';
+import '../service/utils/constants.mjs';
+import '../service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
+import '@aws-amplify/ui';
 import '../service/utils/createStreamingClient/createStreamingClient.mjs';
-import '../service/utils/freshnessColorDisplay.mjs';
+import '../service/utils/StreamRecorder/StreamRecorder.mjs';
 import { Toast } from './Toast.mjs';
 import { Overlay } from './Overlay.mjs';
 import { defaultErrorDisplayText } from '../displayText.mjs';

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

@@ -7,12 +7,13 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import '@aws-sdk/client-rekognitionstreaming';
+import '../service/utils/constants.mjs';
+import '../service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
+import '@aws-amplify/ui';
 import '../service/utils/createStreamingClient/createStreamingClient.mjs';
-import '../service/utils/freshnessColorDisplay.mjs';
+import '../service/utils/StreamRecorder/StreamRecorder.mjs';
 import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
 import { createLivenessSelector, useLivenessSelector } from '../hooks/useLivenessSelector.mjs';
-import '@aws-amplify/ui';
 import { Toast } from './Toast.mjs';
 import { ToastWithLoader } from './ToastWithLoader.mjs';
 
@@ -41,7 +42,6 @@ const Hint = ({ hintDisplayText }) => {
         state.matches('detectFaceDistanceBeforeRecording');
     const isStartView = state.matches('start') || state.matches('userCancel');
     const isRecording = state.matches('recording');
-    const isNotRecording = state.matches('notRecording');
     const isUploading = state.matches('uploading');
     const isCheckSuccessful = state.matches('checkSucceeded');
     const isCheckFailed = state.matches('checkFailed');
@@ -81,9 +81,6 @@ const Hint = ({ hintDisplayText }) => {
             isFaceFarEnoughBeforeRecordingState === false) {
             return React.createElement(DefaultToast, { text: hintDisplayText.hintTooCloseText });
         }
-        if (isNotRecording) {
-            return (React.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
-        }
         if (isUploading) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(VisuallyHidden, { "aria-live": "assertive" }, hintDisplayText.hintCheckCompleteText),

package/dist/esm/components/FaceLivenessDetector/types/classNames.mjs

@@ -3,6 +3,8 @@ var LivenessClassNames;
     LivenessClassNames["CameraModule"] = "amplify-liveness-camera-module";
     LivenessClassNames["CancelContainer"] = "amplify-liveness-cancel-container";
     LivenessClassNames["CancelButton"] = "amplify-liveness-cancel-button";
+    LivenessClassNames["CenteredLoader"] = "amplify-liveness-centered-loader";
+    LivenessClassNames["ConnectingLoader"] = "amplify-liveness-connecting-loader";
     LivenessClassNames["CountdownContainer"] = "amplify-liveness-countdown-container";
     LivenessClassNames["DescriptionBullet"] = "amplify-liveness-description-bullet";
     LivenessClassNames["DescriptionBulletIndex"] = "amplify-liveness-description-bullet__index";
@@ -42,6 +44,7 @@ var LivenessClassNames;
     LivenessClassNames["Toast"] = "amplify-liveness-toast";
     LivenessClassNames["ToastContainer"] = "amplify-liveness-toast__container";
     LivenessClassNames["ToastMessage"] = "amplify-liveness-toast__message";
+    LivenessClassNames["UserFacingVideo"] = "amplify-liveness-video--user-facing";
     LivenessClassNames["Video"] = "amplify-liveness-video";
     LivenessClassNames["VideoAnchor"] = "amplify-liveness-video-anchor";
 })(LivenessClassNames || (LivenessClassNames = {}));

package/dist/esm/components/FaceLivenessDetector/utils/device.mjs

@@ -11,6 +11,17 @@ function isMobileScreen() {
     /Android|iPhone|iPad/i.test(navigator.userAgent) || isNewerIpad();
     return isMobileDevice;
 }
+async function isDeviceUserFacing(deviceId) {
+    const devices = await navigator.mediaDevices?.enumerateDevices();
+    // Find the video input device with the matching deviceId
+    const videoDevice = devices?.find((device) => device.deviceId === deviceId && device.kind === 'videoinput');
+    if (videoDevice) {
+        // Check if the device label contains the word "back"
+        return !videoDevice.label.toLowerCase().includes('back');
+    }
+    // If the device is not found or not a video input device, return false
+    return true;
+}
 /**
  * Use window.matchMedia to direct landscape orientation
  * screen.orientation is not supported in Safari so we will use
@@ -20,16 +31,5 @@ function isMobileScreen() {
 function getLandscapeMediaQuery() {
     return window.matchMedia('(orientation: landscape)');
 }
-// minor version 146+ is confirmed to have the fix https://issues.chromium.org/issues/343199623#comment34
-function isAndroidChromeWithBrokenH264() {
-    const groups = /Chrome\/125\.[0-9]+\.[0-9]+\.([0-9]+)/i.exec(navigator.userAgent);
-    if (!groups) {
-        return false;
-    }
-    const minorVersion = groups[1];
-    return (/Android/i.test(navigator.userAgent) &&
-        /Chrome\/125/i.test(navigator.userAgent) &&
-        parseInt(minorVersion) < 146);
-}
 
-export { getLandscapeMediaQuery, isAndroidChromeWithBrokenH264, isMobileScreen };
+export { getLandscapeMediaQuery, isDeviceUserFacing, isMobileScreen };

package/dist/esm/index.mjs

@@ -1,2 +1,14 @@
 export { default as FaceLivenessDetector } from './components/FaceLivenessDetector/FaceLivenessDetector.mjs';
 export { default as FaceLivenessDetectorCore } from './components/FaceLivenessDetector/FaceLivenessDetectorCore.mjs';
+import './components/FaceLivenessDetector/service/machine/machine.mjs';
+import './components/FaceLivenessDetector/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 './components/FaceLivenessDetector/service/utils/constants.mjs';
+import './components/FaceLivenessDetector/service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
+import '@aws-amplify/ui';
+import './components/FaceLivenessDetector/service/utils/createStreamingClient/createStreamingClient.mjs';
+import './components/FaceLivenessDetector/service/utils/StreamRecorder/StreamRecorder.mjs';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.3.9';
+const VERSION = '3.4.0';
 
 export { VERSION };