@aws-amplify/ui-react-liveness 3.0.21 → 3.0.23

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

@@ -8,6 +8,7 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
+import { isMobileScreen, getLandscapeMediaQuery } from '../utils/device.mjs';
 import '@aws-sdk/client-rekognitionstreaming';
 import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
@@ -15,7 +16,6 @@ import { LivenessCameraModule } from './LivenessCameraModule.mjs';
 import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
 import { useLivenessSelector, createLivenessSelector } from '../hooks/useLivenessSelector.mjs';
 import '@aws-amplify/ui';
-import { isMobileScreen, getLandscapeMediaQuery } from '../utils/device.mjs';
 import { CancelButton } from '../shared/CancelButton.mjs';
 import { defaultErrorDisplayText } from '../displayText.mjs';
 import { LandscapeErrorModal } from '../shared/LandscapeErrorModal.mjs';

package/dist/esm/components/FaceLivenessDetector/service/machine/machine.mjs

@@ -153,6 +153,7 @@ const livenessMachine = createMachine({
         },
         RUNTIME_ERROR: {
             target: 'error',
+            actions: 'updateErrorStateForRuntime',
         },
         MOBILE_LANDSCAPE_WARNING: {
             target: 'mobileLandscapeWarning',
@@ -257,11 +258,14 @@ const livenessMachine = createMachine({
             },
         },
         recording: {
-            entry: ['clearErrorState', 'startRecording'],
+            entry: [
+                'clearErrorState',
+                'startRecording',
+                'sendTimeoutAfterOvalDrawingDelay',
+            ],
             initial: 'ovalDrawing',
             states: {
                 ovalDrawing: {
-                    entry: 'sendTimeoutAfterOvalDrawingDelay',
                     invoke: {
                         src: 'detectInitialFaceAndDrawOval',
                         onDone: {
@@ -280,12 +284,23 @@ const livenessMachine = createMachine({
                 checkFaceDetected: {
                     after: {
                         0: {
-                            target: 'checkRecordingStarted',
+                            target: 'cancelOvalDrawingTimeout',
                             cond: 'hasSingleFace',
                         },
                         100: { target: 'ovalDrawing' },
                     },
                 },
+                cancelOvalDrawingTimeout: {
+                    entry: [
+                        'cancelOvalDrawingTimeout',
+                        'sendTimeoutAfterRecordingDelay',
+                    ],
+                    after: {
+                        0: {
+                            target: 'checkRecordingStarted',
+                        },
+                    },
+                },
                 checkRecordingStarted: {
                     after: {
                         0: {
@@ -299,7 +314,7 @@ const livenessMachine = createMachine({
                 // Evaluates face match and moves to checkMatch
                 // which continually checks for match until either timeout or face match
                 ovalMatching: {
-                    entry: 'cancelOvalDrawingTimeout',
+                    entry: 'cancelRecordingTimeout',
                     invoke: {
                         src: 'detectFaceAndMatchOval',
                         onDone: {
@@ -360,7 +375,7 @@ const livenessMachine = createMachine({
             initial: 'pending',
             states: {
                 pending: {
-                    entry: ['sendTimeoutAfterWaitingForDisconnect', 'pauseVideoStream'],
+                    entry: ['pauseVideoStream'],
                     invoke: {
                         src: 'stopVideo',
                         onDone: 'waitForDisconnectEvent',
@@ -380,7 +395,7 @@ const livenessMachine = createMachine({
                     },
                 },
                 getLivenessResult: {
-                    entry: ['cancelWaitForDisconnectTimeout', 'freezeStream'],
+                    entry: ['freezeStream'],
                     invoke: {
                         src: 'getLiveness',
                         onError: {
@@ -417,8 +432,8 @@ const livenessMachine = createMachine({
                 'cleanUpResources',
                 'callErrorCallback',
                 'cancelOvalDrawingTimeout',
-                'cancelWaitForDisconnectTimeout',
                 'cancelOvalMatchTimeout',
+                'cancelRecordingTimeout',
                 'freezeStream',
             ],
         },
@@ -607,6 +622,7 @@ const livenessMachine = createMachine({
         }),
         updateErrorStateForTimeout: assign({
             errorState: (_, event) => event.data?.errorState || LivenessErrorState.TIMEOUT,
+            errorMessage: (_, event) => event.data?.message,
         }),
         updateErrorStateForRuntime: assign({
             errorState: (_, event) => event.data?.errorState ||
@@ -643,12 +659,32 @@ const livenessMachine = createMachine({
             },
         }),
         // timeouts
-        sendTimeoutAfterOvalDrawingDelay: actions.send({ type: 'TIMEOUT' }, {
+        sendTimeoutAfterOvalDrawingDelay: actions.send({
+            type: 'RUNTIME_ERROR',
+            data: {
+                message: 'Client failed to draw oval.',
+            },
+        }, {
             delay: 5000,
             id: 'ovalDrawingTimeout',
         }),
         cancelOvalDrawingTimeout: actions.cancel('ovalDrawingTimeout'),
-        sendTimeoutAfterOvalMatchDelay: actions.send({ type: 'TIMEOUT' }, {
+        sendTimeoutAfterRecordingDelay: actions.send({
+            type: 'RUNTIME_ERROR',
+            data: {
+                message: 'Client failed to start recording.',
+            },
+        }, {
+            delay: 5000,
+            id: 'recordingTimeout',
+        }),
+        cancelRecordingTimeout: actions.cancel('recordingTimeout'),
+        sendTimeoutAfterOvalMatchDelay: actions.send({
+            type: 'TIMEOUT',
+            data: {
+                message: 'Client timed out waiting for face to match oval.',
+            },
+        }, {
             delay: (context) => {
                 return (context.serverSessionInformation?.Challenge
                     ?.FaceMovementAndLightChallenge?.ChallengeConfig
@@ -657,22 +693,6 @@ const livenessMachine = createMachine({
             id: 'ovalMatchTimeout',
         }),
         cancelOvalMatchTimeout: actions.cancel('ovalMatchTimeout'),
-        sendTimeoutAfterWaitingForDisconnect: actions.send({
-            type: 'TIMEOUT',
-            data: { errorState: LivenessErrorState.SERVER_ERROR },
-        }, {
-            delay: 20000,
-            id: 'waitForDisconnectTimeout',
-        }),
-        cancelWaitForDisconnectTimeout: actions.cancel('waitForDisconnectTimeout'),
-        sendTimeoutAfterFaceDistanceDelay: actions.send({
-            type: 'RUNTIME_ERROR',
-            data: new Error('Avoid moving closer during countdown and ensure only one face is in front of camera.'),
-        }, {
-            delay: 0,
-            id: 'faceDistanceTimeout',
-        }),
-        cancelFaceDistanceTimeout: actions.cancel('faceDistanceTimeout'),
         // callbacks
         callUserPermissionDeniedCallback: assign({
             errorState: (context, event) => {
@@ -700,7 +720,7 @@ const livenessMachine = createMachine({
             context.componentProps.onUserCancel?.();
         },
         callUserTimeoutCallback: (context) => {
-            const error = new Error('Client Timeout');
+            const error = new Error(context.errorMessage ?? 'Client Timeout');
             error.name = context.errorState;
             const livenessError = {
                 state: context.errorState,

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

@@ -1,3 +1,7 @@
+import { isAndroidChromeWithBrokenH264 } from '../../utils/device.mjs';
+
+// Only to be used with Chrome for the Android Chrome H264 Bug - https://issues.chromium.org/issues/343199623
+const ALTERNATE_CHROME_MIME_TYPE = 'video/x-matroska;codecs=vp8';
 /**
  * Helper wrapper class over the native MediaRecorder.
  */
@@ -8,7 +12,12 @@ class VideoRecorder {
         }
         this._stream = stream;
         this._chunks = [];
-        this._recorder = new MediaRecorder(stream, { bitsPerSecond: 1000000 });
+        this._recorder = new MediaRecorder(stream, {
+            bitsPerSecond: 1000000,
+            mimeType: isAndroidChromeWithBrokenH264()
+                ? ALTERNATE_CHROME_MIME_TYPE
+                : undefined,
+        });
         this._setupCallbacks();
     }
     getState() {

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

@@ -20,5 +20,16 @@ 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, isMobileScreen };
+export { getLandscapeMediaQuery, isAndroidChromeWithBrokenH264, isMobileScreen };

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.0.21';
+const VERSION = '3.0.23';
 
 export { VERSION };

package/dist/index.js

@@ -642,6 +642,42 @@ class BlazeFaceFaceDetection extends FaceDetection {
     }
 }
 
+function isNewerIpad() {
+    // iPads on iOS13+ return as if a desktop Mac
+    // so check for maxTouchPoints also.
+    return (/Macintosh/i.test(navigator.userAgent) &&
+        !!navigator.maxTouchPoints &&
+        navigator.maxTouchPoints > 1);
+}
+function isMobileScreen() {
+    const isMobileDevice = 
+    // Test Android/iPhone/iPad
+    /Android|iPhone|iPad/i.test(navigator.userAgent) || isNewerIpad();
+    return isMobileDevice;
+}
+/**
+ * Use window.matchMedia to direct landscape orientation
+ * screen.orientation is not supported in Safari so we will use
+ * media query detection to listen for changes instead.
+ * @returns MediaQueryList object
+ */
+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);
+}
+
+// Only to be used with Chrome for the Android Chrome H264 Bug - https://issues.chromium.org/issues/343199623
+const ALTERNATE_CHROME_MIME_TYPE = 'video/x-matroska;codecs=vp8';
 /**
  * Helper wrapper class over the native MediaRecorder.
  */
@@ -652,7 +688,12 @@ class VideoRecorder {
         }
         this._stream = stream;
         this._chunks = [];
-        this._recorder = new MediaRecorder(stream, { bitsPerSecond: 1000000 });
+        this._recorder = new MediaRecorder(stream, {
+            bitsPerSecond: 1000000,
+            mimeType: isAndroidChromeWithBrokenH264()
+                ? ALTERNATE_CHROME_MIME_TYPE
+                : undefined,
+        });
         this._setupCallbacks();
     }
     getState() {
@@ -792,7 +833,7 @@ function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceInterse
     return { faceMatchState, faceMatchPercentage };
 }
 
-const VERSION = '3.0.21';
+const VERSION = '3.0.23';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -1491,6 +1532,7 @@ const livenessMachine = xstate.createMachine({
         },
         RUNTIME_ERROR: {
             target: 'error',
+            actions: 'updateErrorStateForRuntime',
         },
         MOBILE_LANDSCAPE_WARNING: {
             target: 'mobileLandscapeWarning',
@@ -1595,11 +1637,14 @@ const livenessMachine = xstate.createMachine({
             },
         },
         recording: {
-            entry: ['clearErrorState', 'startRecording'],
+            entry: [
+                'clearErrorState',
+                'startRecording',
+                'sendTimeoutAfterOvalDrawingDelay',
+            ],
             initial: 'ovalDrawing',
             states: {
                 ovalDrawing: {
-                    entry: 'sendTimeoutAfterOvalDrawingDelay',
                     invoke: {
                         src: 'detectInitialFaceAndDrawOval',
                         onDone: {
@@ -1618,12 +1663,23 @@ const livenessMachine = xstate.createMachine({
                 checkFaceDetected: {
                     after: {
                         0: {
-                            target: 'checkRecordingStarted',
+                            target: 'cancelOvalDrawingTimeout',
                             cond: 'hasSingleFace',
                         },
                         100: { target: 'ovalDrawing' },
                     },
                 },
+                cancelOvalDrawingTimeout: {
+                    entry: [
+                        'cancelOvalDrawingTimeout',
+                        'sendTimeoutAfterRecordingDelay',
+                    ],
+                    after: {
+                        0: {
+                            target: 'checkRecordingStarted',
+                        },
+                    },
+                },
                 checkRecordingStarted: {
                     after: {
                         0: {
@@ -1637,7 +1693,7 @@ const livenessMachine = xstate.createMachine({
                 // Evaluates face match and moves to checkMatch
                 // which continually checks for match until either timeout or face match
                 ovalMatching: {
-                    entry: 'cancelOvalDrawingTimeout',
+                    entry: 'cancelRecordingTimeout',
                     invoke: {
                         src: 'detectFaceAndMatchOval',
                         onDone: {
@@ -1698,7 +1754,7 @@ const livenessMachine = xstate.createMachine({
             initial: 'pending',
             states: {
                 pending: {
-                    entry: ['sendTimeoutAfterWaitingForDisconnect', 'pauseVideoStream'],
+                    entry: ['pauseVideoStream'],
                     invoke: {
                         src: 'stopVideo',
                         onDone: 'waitForDisconnectEvent',
@@ -1718,7 +1774,7 @@ const livenessMachine = xstate.createMachine({
                     },
                 },
                 getLivenessResult: {
-                    entry: ['cancelWaitForDisconnectTimeout', 'freezeStream'],
+                    entry: ['freezeStream'],
                     invoke: {
                         src: 'getLiveness',
                         onError: {
@@ -1755,8 +1811,8 @@ const livenessMachine = xstate.createMachine({
                 'cleanUpResources',
                 'callErrorCallback',
                 'cancelOvalDrawingTimeout',
-                'cancelWaitForDisconnectTimeout',
                 'cancelOvalMatchTimeout',
+                'cancelRecordingTimeout',
                 'freezeStream',
             ],
         },
@@ -1945,6 +2001,7 @@ const livenessMachine = xstate.createMachine({
         }),
         updateErrorStateForTimeout: xstate.assign({
             errorState: (_, event) => event.data?.errorState || LivenessErrorState.TIMEOUT,
+            errorMessage: (_, event) => event.data?.message,
         }),
         updateErrorStateForRuntime: xstate.assign({
             errorState: (_, event) => event.data?.errorState ||
@@ -1981,12 +2038,32 @@ const livenessMachine = xstate.createMachine({
             },
         }),
         // timeouts
-        sendTimeoutAfterOvalDrawingDelay: xstate.actions.send({ type: 'TIMEOUT' }, {
+        sendTimeoutAfterOvalDrawingDelay: xstate.actions.send({
+            type: 'RUNTIME_ERROR',
+            data: {
+                message: 'Client failed to draw oval.',
+            },
+        }, {
             delay: 5000,
             id: 'ovalDrawingTimeout',
         }),
         cancelOvalDrawingTimeout: xstate.actions.cancel('ovalDrawingTimeout'),
-        sendTimeoutAfterOvalMatchDelay: xstate.actions.send({ type: 'TIMEOUT' }, {
+        sendTimeoutAfterRecordingDelay: xstate.actions.send({
+            type: 'RUNTIME_ERROR',
+            data: {
+                message: 'Client failed to start recording.',
+            },
+        }, {
+            delay: 5000,
+            id: 'recordingTimeout',
+        }),
+        cancelRecordingTimeout: xstate.actions.cancel('recordingTimeout'),
+        sendTimeoutAfterOvalMatchDelay: xstate.actions.send({
+            type: 'TIMEOUT',
+            data: {
+                message: 'Client timed out waiting for face to match oval.',
+            },
+        }, {
             delay: (context) => {
                 return (context.serverSessionInformation?.Challenge
                     ?.FaceMovementAndLightChallenge?.ChallengeConfig
@@ -1995,22 +2072,6 @@ const livenessMachine = xstate.createMachine({
             id: 'ovalMatchTimeout',
         }),
         cancelOvalMatchTimeout: xstate.actions.cancel('ovalMatchTimeout'),
-        sendTimeoutAfterWaitingForDisconnect: xstate.actions.send({
-            type: 'TIMEOUT',
-            data: { errorState: LivenessErrorState.SERVER_ERROR },
-        }, {
-            delay: 20000,
-            id: 'waitForDisconnectTimeout',
-        }),
-        cancelWaitForDisconnectTimeout: xstate.actions.cancel('waitForDisconnectTimeout'),
-        sendTimeoutAfterFaceDistanceDelay: xstate.actions.send({
-            type: 'RUNTIME_ERROR',
-            data: new Error('Avoid moving closer during countdown and ensure only one face is in front of camera.'),
-        }, {
-            delay: 0,
-            id: 'faceDistanceTimeout',
-        }),
-        cancelFaceDistanceTimeout: xstate.actions.cancel('faceDistanceTimeout'),
         // callbacks
         callUserPermissionDeniedCallback: xstate.assign({
             errorState: (context, event) => {
@@ -2038,7 +2099,7 @@ const livenessMachine = xstate.createMachine({
             context.componentProps.onUserCancel?.();
         },
         callUserTimeoutCallback: (context) => {
-            const error = new Error('Client Timeout');
+            const error = new Error(context.errorMessage ?? 'Client Timeout');
             error.name = context.errorState;
             const livenessError = {
                 state: context.errorState,
@@ -3085,29 +3146,6 @@ const LivenessCameraModule = (props) => {
             React__default["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
 };
 
-function isNewerIpad() {
-    // iPads on iOS13+ return as if a desktop Mac
-    // so check for maxTouchPoints also.
-    return (/Macintosh/i.test(navigator.userAgent) &&
-        !!navigator.maxTouchPoints &&
-        navigator.maxTouchPoints > 1);
-}
-function isMobileScreen() {
-    const isMobileDevice = 
-    // Test Android/iPhone/iPad
-    /Android|iPhone|iPad/i.test(navigator.userAgent) || isNewerIpad();
-    return isMobileDevice;
-}
-/**
- * Use window.matchMedia to direct landscape orientation
- * screen.orientation is not supported in Safari so we will use
- * media query detection to listen for changes instead.
- * @returns MediaQueryList object
- */
-function getLandscapeMediaQuery() {
-    return window.matchMedia('(orientation: landscape)');
-}
-
 const LandscapeErrorModal = (props) => {
     const { onRetry, header, portraitMessage, landscapeMessage, tryAgainText } = props;
     const [isLandscape, setIsLandscape] = React__namespace.useState(true);

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

@@ -39,6 +39,7 @@ export interface LivenessContext {
     challengeId?: string;
     componentProps?: FaceLivenessDetectorCoreProps;
     errorState?: ErrorState;
+    errorMessage?: string;
     faceMatchAssociatedParams?: FaceMatchAssociatedParams;
     faceMatchStateBeforeStart?: FaceMatchState;
     failedAttempts?: number;

package/dist/types/components/FaceLivenessDetector/utils/device.d.ts

@@ -8,3 +8,4 @@ export declare function isPortrait(): boolean;
  * @returns MediaQueryList object
  */
 export declare function getLandscapeMediaQuery(): MediaQueryList;
+export declare function isAndroidChromeWithBrokenH264(): boolean;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.0.21";
+export declare const VERSION = "3.0.23";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "3.0.21",
+  "version": "3.0.23",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui": "6.0.16",
-    "@aws-amplify/ui-react": "6.1.11",
+    "@aws-amplify/ui-react": "6.1.12",
     "@aws-sdk/client-rekognitionstreaming": "3.398.0",
     "@aws-sdk/util-format-url": "^3.410.0",
     "@smithy/eventstream-serde-browser": "^2.0.4",