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

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

@@ -1,15 +1,20 @@
-import { nanoid } from 'nanoid';
+import { v4 } from 'uuid';
 import { createMachine, assign, actions, spawn } from 'xstate';
-import { getBoundingBox, generateBboxFromLandmarks, getOvalBoundingBox, getIntersectionOverUnion, estimateIllumination, getOvalDetailsFromSessionInformation, drawLivenessOvalInCanvas, isFaceDistanceBelowThreshold, getFaceMatchState, isCameraDeviceVirtual, getColorsSequencesFromSessionInformation, drawStaticOval, getStaticLivenessOvalDetails } from '../utils/liveness.mjs';
+import { fillOverlayCanvasFractional, generateBboxFromLandmarks, getOvalBoundingBox, getIntersectionOverUnion, estimateIllumination, getOvalDetailsFromSessionInformation, drawLivenessOvalInCanvas, getStaticLivenessOvalDetails, isFaceDistanceBelowThreshold, getFaceMatchState, isCameraDeviceVirtual, getColorsSequencesFromSessionInformation } 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, isConnectionTimeoutError } from '../utils/eventUtils.mjs';
+import { ColorSequenceDisplay } from '../utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
+import { FACE_MOVEMENT_AND_LIGHT_CHALLENGE, FACE_MOVEMENT_CHALLENGE, WS_CLOSURE_CODE } from '../utils/constants.mjs';
+import { createRequestStreamGenerator } from '../utils/createRequestStreamGenerator/createRequestStreamGenerator.mjs';
+import { createSessionEndEvent, getTrackDimensions, createColorDisplayEvent, createSessionStartEvent } from '../utils/createRequestStreamGenerator/utils.mjs';
+import { createStreamingClient } from '../utils/createStreamingClient/createStreamingClient.mjs';
+import { createSessionInfoFromServerSessionInformation } from '../utils/sessionInformation.mjs';
+import { StreamRecorder } from '../utils/StreamRecorder/StreamRecorder.mjs';
+import { isServerSessionInformationEvent, isDisconnectionEvent, isValidationExceptionEvent, isInternalServerExceptionEvent, isThrottlingExceptionEvent, isServiceQuotaExceededExceptionEvent, isInvalidSignatureRegionException, isConnectionTimeoutError } from '../utils/responseStreamEvent.mjs';
 import { STATIC_VIDEO_CONSTRAINTS } from '../../utils/helpers.mjs';
-import { WS_CLOSURE_CODE } from '../utils/constants.mjs';
+import { TelemetryReporter } from '../utils/TelemetryReporter/TelemetryReporter.mjs';
 
 const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
 const DEFAULT_FACE_FIT_TIMEOUT = 7000;
@@ -18,11 +23,11 @@ const responseStreamActor = async (callback) => {
     try {
         const stream = await responseStream;
         for await (const event of stream) {
-            if (isServerSesssionInformationEvent(event)) {
+            if (isServerSessionInformationEvent(event)) {
                 callback({
                     type: 'SET_SESSION_INFO',
                     data: {
-                        sessionInfo: event.ServerSessionInformationEvent.SessionInformation,
+                        serverSessionInformation: event.ServerSessionInformationEvent.SessionInformation,
                     },
                 });
             }
@@ -74,21 +79,20 @@ const responseStreamActor = async (callback) => {
         }
     }
 };
-function getLastSelectedCameraId() {
-    return localStorage.getItem(CAMERA_ID_KEY);
-}
 function setLastSelectedCameraId(deviceId) {
     localStorage.setItem(CAMERA_ID_KEY, deviceId);
 }
 const livenessMachine = createMachine({
     id: 'livenessMachine',
-    initial: 'cameraCheck',
+    initial: 'initCamera',
     predictableActionArguments: true,
     context: {
-        challengeId: nanoid(),
+        challengeId: v4(),
+        errorMessage: undefined,
         maxFailedAttempts: 0,
         failedAttempts: 0,
         componentProps: undefined,
+        parsedSessionInformation: undefined,
         serverSessionInformation: undefined,
         videoAssociatedParams: {
             videoConstraints: STATIC_VIDEO_CONSTRAINTS,
@@ -113,8 +117,8 @@ const livenessMachine = createMachine({
             freshnessColorEl: undefined,
             freshnessColors: [],
             freshnessColorsComplete: false,
-            freshnessColorDisplay: undefined,
         },
+        colorSequenceDisplay: undefined,
         errorState: undefined,
         livenessStreamProvider: undefined,
         responseStreamActorRef: undefined,
@@ -129,71 +133,82 @@ const livenessMachine = createMachine({
             target: 'retryableTimeout',
             actions: 'updateErrorStateForTimeout',
         },
-        SET_SESSION_INFO: {
-            internal: true,
-            actions: 'updateSessionInfo',
-        },
-        DISCONNECT_EVENT: {
-            internal: true,
-            actions: 'updateShouldDisconnect',
-        },
-        SET_DOM_AND_CAMERA_DETAILS: {
-            actions: 'setDOMAndCameraDetails',
-        },
+        SET_SESSION_INFO: { internal: true, actions: 'updateSessionInfo' },
+        DISCONNECT_EVENT: { internal: true, actions: 'updateShouldDisconnect' },
+        SET_DOM_AND_CAMERA_DETAILS: { actions: 'setDOMAndCameraDetails' },
         UPDATE_DEVICE_AND_STREAM: {
             actions: 'updateDeviceAndStream',
+            target: 'start',
         },
-        SERVER_ERROR: {
-            target: 'error',
-            actions: 'updateErrorStateForServer',
-        },
+        SERVER_ERROR: { target: 'error', actions: 'updateErrorStateForServer' },
         CONNECTION_TIMEOUT: {
             target: 'error',
             actions: 'updateErrorStateForConnectionTimeout',
         },
-        RUNTIME_ERROR: {
-            target: 'error',
-            actions: 'updateErrorStateForRuntime',
-        },
+        RUNTIME_ERROR: { target: 'error', actions: 'updateErrorStateForRuntime' },
         MOBILE_LANDSCAPE_WARNING: {
             target: 'mobileLandscapeWarning',
             actions: 'updateErrorStateForServer',
         },
     },
     states: {
-        cameraCheck: {
-            entry: 'resetErrorState',
-            invoke: {
-                src: 'checkVirtualCameraAndGetStream',
-                onDone: {
-                    target: 'waitForDOMAndCameraDetails',
-                    actions: 'updateVideoMediaStream',
+        initCamera: {
+            initial: 'cameraCheck',
+            on: {
+                SET_DOM_AND_CAMERA_DETAILS: {
+                    actions: 'setDOMAndCameraDetails',
+                    target: '#livenessMachine.initWebsocket',
                 },
-                onError: {
-                    target: 'permissionDenied',
+            },
+            states: {
+                cameraCheck: {
+                    entry: 'resetErrorState',
+                    invoke: {
+                        src: 'checkVirtualCameraAndGetStream',
+                        onDone: {
+                            target: 'waitForDOMAndCameraDetails',
+                            actions: 'updateVideoMediaStream',
+                        },
+                        onError: { target: '#livenessMachine.permissionDenied' },
+                    },
                 },
+                waitForDOMAndCameraDetails: {},
             },
         },
-        waitForDOMAndCameraDetails: {
-            after: {
-                0: {
-                    target: 'start',
-                    cond: 'hasDOMAndCameraDetails',
+        initWebsocket: {
+            entry: () => { },
+            initial: 'initializeLivenessStream',
+            states: {
+                initializeLivenessStream: {
+                    invoke: {
+                        src: 'openLivenessStreamConnection',
+                        onDone: {
+                            target: 'waitForSessionInfo',
+                            actions: [
+                                'updateLivenessStreamProvider',
+                                'spawnResponseStreamActor',
+                            ],
+                        },
+                    },
+                },
+                waitForSessionInfo: {
+                    entry: () => { },
+                    after: {
+                        0: {
+                            target: '#livenessMachine.start',
+                            cond: 'hasParsedSessionInfo',
+                        },
+                        100: { target: 'waitForSessionInfo' },
+                    },
                 },
-                10: { target: 'waitForDOMAndCameraDetails' },
             },
         },
         start: {
-            entry: ['drawStaticOval', 'initializeFaceDetector'],
+            entry: ['initializeFaceDetector', () => { }],
             always: [
-                {
-                    target: 'detectFaceBeforeStart',
-                    cond: 'shouldSkipStartScreen',
-                },
+                { target: 'detectFaceBeforeStart', cond: 'shouldSkipStartScreen' },
             ],
-            on: {
-                BEGIN: 'detectFaceBeforeStart',
-            },
+            on: { BEGIN: 'detectFaceBeforeStart' },
         },
         detectFaceBeforeStart: {
             invoke: {
@@ -225,38 +240,12 @@ const livenessMachine = createMachine({
         checkFaceDistanceBeforeRecording: {
             after: {
                 0: {
-                    target: 'initializeLivenessStream',
+                    target: 'recording',
                     cond: 'hasEnoughFaceDistanceBeforeRecording',
                 },
                 100: { target: 'detectFaceDistanceBeforeRecording' },
             },
         },
-        initializeLivenessStream: {
-            invoke: {
-                src: 'openLivenessStreamConnection',
-                onDone: {
-                    target: 'notRecording',
-                    actions: [
-                        'updateLivenessStreamProvider',
-                        'spawnResponseStreamActor',
-                    ],
-                },
-            },
-        },
-        notRecording: {
-            initial: 'waitForSessionInfo',
-            states: {
-                waitForSessionInfo: {
-                    after: {
-                        0: {
-                            target: '#livenessMachine.recording',
-                            cond: 'hasServerSessionInfo',
-                        },
-                        100: { target: 'waitForSessionInfo' },
-                    },
-                },
-            },
-        },
         recording: {
             entry: [
                 'clearErrorState',
@@ -283,10 +272,7 @@ const livenessMachine = createMachine({
                 },
                 checkFaceDetected: {
                     after: {
-                        0: {
-                            target: 'cancelOvalDrawingTimeout',
-                            cond: 'hasSingleFace',
-                        },
+                        0: { target: 'cancelOvalDrawingTimeout', cond: 'hasSingleFace' },
                         100: { target: 'ovalDrawing' },
                     },
                 },
@@ -295,18 +281,15 @@ const livenessMachine = createMachine({
                         'cancelOvalDrawingTimeout',
                         'sendTimeoutAfterRecordingDelay',
                     ],
-                    after: {
-                        0: {
-                            target: 'checkRecordingStarted',
-                        },
-                    },
+                    after: { 0: { target: 'checkRecordingStarted' } },
                 },
                 checkRecordingStarted: {
+                    entry: () => { },
                     after: {
                         0: {
                             target: 'ovalMatching',
                             cond: 'hasRecordingStarted',
-                            actions: 'updateRecordingStartTimestampMs',
+                            actions: 'updateRecordingStartTimestamp',
                         },
                         100: { target: 'checkRecordingStarted' },
                     },
@@ -327,36 +310,41 @@ const livenessMachine = createMachine({
                 // for one second to show "Hold still" text before moving to `flashFreshnessColors`.
                 // If not, move back to ovalMatching and re-evaluate match state
                 checkMatch: {
+                    entry: () => { },
                     after: {
                         0: {
-                            target: 'delayBeforeFlash',
+                            target: 'handleChallenge',
                             cond: 'hasFaceMatchedInOval',
                             actions: [
                                 'setFaceMatchTimeAndStartFace',
                                 'updateEndFaceMatch',
-                                'setupFlashFreshnessColors',
+                                'setColorDisplay',
                                 'cancelOvalMatchTimeout',
                                 'cancelOvalDrawingTimeout',
                             ],
                         },
-                        1: {
-                            target: 'ovalMatching',
-                        },
+                        1: { target: 'ovalMatching' },
                     },
                 },
+                handleChallenge: {
+                    entry: () => { },
+                    always: [
+                        {
+                            target: 'delayBeforeFlash',
+                            cond: 'isFaceMovementAndLightChallenge',
+                        },
+                        { target: 'success', cond: 'isFaceMovementChallenge' },
+                    ],
+                },
                 delayBeforeFlash: {
-                    after: {
-                        1000: 'flashFreshnessColors',
-                    },
+                    entry: () => { },
+                    after: { 1000: 'flashFreshnessColors' },
                 },
                 flashFreshnessColors: {
                     invoke: {
                         src: 'flashColors',
                         onDone: [
-                            {
-                                target: 'success',
-                                cond: 'hasFreshnessColorShown',
-                            },
+                            { target: 'success', cond: 'hasFreshnessColorShown' },
                             {
                                 target: 'flashFreshnessColors',
                                 actions: 'updateFreshnessDetails',
@@ -364,10 +352,7 @@ const livenessMachine = createMachine({
                         ],
                     },
                 },
-                success: {
-                    entry: 'stopRecording',
-                    type: 'final',
-                },
+                success: { entry: 'stopRecording', type: 'final' },
             },
             onDone: 'uploading',
         },
@@ -386,11 +371,9 @@ const livenessMachine = createMachine({
                     },
                 },
                 waitForDisconnectEvent: {
+                    entry: () => { },
                     after: {
-                        0: {
-                            target: 'getLivenessResult',
-                            cond: 'getShouldDisconnect',
-                        },
+                        0: { cond: 'getShouldDisconnect', target: 'getLivenessResult' },
                         100: { target: 'waitForDisconnectEvent' },
                     },
                 },
@@ -409,16 +392,13 @@ const livenessMachine = createMachine({
         retryableTimeout: {
             entry: 'updateFailedAttempts',
             always: [
-                {
-                    target: 'timeout',
-                    cond: 'shouldTimeoutOnFailedAttempts',
-                },
-                { target: 'notRecording' },
+                { target: 'timeout', cond: 'shouldTimeoutOnFailedAttempts' },
+                { target: 'start' },
             ],
         },
         permissionDenied: {
             entry: 'callUserPermissionDeniedCallback',
-            on: { RETRY_CAMERA_CHECK: 'cameraCheck' },
+            on: { RETRY_CAMERA_CHECK: 'initCamera' },
         },
         mobileLandscapeWarning: {
             entry: 'callMobileLandscapeWarningCallback',
@@ -439,7 +419,7 @@ const livenessMachine = createMachine({
         },
         userCancel: {
             entry: ['cleanUpResources', 'callUserCancelCallback', 'resetContext'],
-            always: { target: 'cameraCheck' },
+            always: { target: 'initCamera' },
         },
     },
 }, {
@@ -489,6 +469,7 @@ const livenessMachine = createMachine({
         updateDeviceAndStream: assign({
             videoAssociatedParams: (context, event) => {
                 setLastSelectedCameraId(event.data?.newDeviceId);
+                context.livenessStreamProvider?.setNewVideoStream(event.data?.newStream);
                 return {
                     ...context.videoAssociatedParams,
                     selectedDeviceId: event.data
@@ -498,62 +479,32 @@ const livenessMachine = createMachine({
                 };
             },
         }),
-        drawStaticOval: (context) => {
-            const { canvasEl, videoEl, videoMediaStream } = context.videoAssociatedParams;
-            drawStaticOval(canvasEl, videoEl, videoMediaStream);
-        },
-        updateRecordingStartTimestampMs: assign({
+        updateRecordingStartTimestamp: assign({
             videoAssociatedParams: (context) => {
-                const { challengeId, videoAssociatedParams, ovalAssociatedParams, livenessStreamProvider, } = context;
-                const { recordingStartApiTimestamp, recorderStartTimestamp } = livenessStreamProvider.videoRecorder;
+                const { challengeId, ovalAssociatedParams, videoAssociatedParams, livenessStreamProvider, parsedSessionInformation, } = context;
                 const { videoMediaStream } = videoAssociatedParams;
-                const { initialFace } = ovalAssociatedParams;
-                /**
-                 * This calculation is provided by Science team after doing analysis
-                 * of unreliable .onstart() (recorderStartTimestamp) timestamp that is
-                 * returned from mediaRecorder.
-                 */
-                const timestamp = Math.round(0.73 * (recorderStartTimestamp - recordingStartApiTimestamp) +
-                    recordingStartApiTimestamp);
-                // Send client info for initial face position
-                const { width, height } = videoMediaStream
-                    .getTracks()[0]
-                    .getSettings();
-                const flippedInitialFaceLeft = width - initialFace.left - initialFace.width;
-                context.livenessStreamProvider.sendClientInfo({
-                    Challenge: {
-                        FaceMovementAndLightChallenge: {
-                            ChallengeId: challengeId,
-                            VideoStartTimestamp: timestamp,
-                            InitialFace: {
-                                InitialFaceDetectedTimestamp: initialFace.timestampMs,
-                                BoundingBox: getBoundingBox({
-                                    deviceHeight: height,
-                                    deviceWidth: width,
-                                    height: initialFace.height,
-                                    width: initialFace.width,
-                                    top: initialFace.top,
-                                    left: flippedInitialFaceLeft,
-                                }),
-                            },
-                        },
-                    },
+                const recordingStartedTimestamp = livenessStreamProvider.getRecordingStartTimestamp();
+                context.livenessStreamProvider.dispatchStreamEvent({
+                    type: 'sessionInfo',
+                    data: createSessionStartEvent({
+                        parsedSessionInformation: parsedSessionInformation,
+                        ...getTrackDimensions(videoMediaStream),
+                        challengeId: challengeId,
+                        ovalAssociatedParams: ovalAssociatedParams,
+                        recordingStartedTimestamp,
+                    }),
                 });
                 return {
                     ...context.videoAssociatedParams,
-                    recordingStartTimestampMs: timestamp,
+                    recordingStartedTimestamp,
                 };
             },
         }),
         startRecording: assign({
             videoAssociatedParams: (context) => {
-                if (!context.serverSessionInformation) {
-                    throw new Error('Session information was not received from response stream');
-                }
-                if (context.livenessStreamProvider.videoRecorder &&
-                    context.livenessStreamProvider.videoRecorder.getState() !==
-                        'recording') {
-                    context.livenessStreamProvider.startRecordingLivenessVideo();
+                if (context.livenessStreamProvider &&
+                    !context.livenessStreamProvider.isRecording()) {
+                    context.livenessStreamProvider.startRecording();
                 }
                 return { ...context.videoAssociatedParams };
             },
@@ -633,8 +584,9 @@ const livenessMachine = createMachine({
         }),
         clearErrorState: assign({ errorState: (_) => undefined }),
         updateSessionInfo: assign({
-            serverSessionInformation: (_, event) => {
-                return event.data.sessionInfo;
+            parsedSessionInformation: (_, event) => {
+                const { serverSessionInformation } = event.data;
+                return createSessionInfoFromServerSessionInformation(serverSessionInformation);
             },
         }),
         updateShouldDisconnect: assign({ shouldDisconnect: () => true }),
@@ -647,47 +599,26 @@ const livenessMachine = createMachine({
                 };
             },
         }),
-        setupFlashFreshnessColors: assign({
-            freshnessColorAssociatedParams: (context) => {
-                const { serverSessionInformation } = context;
-                const freshnessColors = getColorsSequencesFromSessionInformation(serverSessionInformation);
-                const freshnessColorDisplay = new FreshnessColorDisplay(context, freshnessColors);
-                return {
-                    ...context.freshnessColorAssociatedParams,
-                    freshnessColorDisplay,
-                };
-            },
+        setColorDisplay: assign({
+            colorSequenceDisplay: ({ parsedSessionInformation }) => new ColorSequenceDisplay(getColorsSequencesFromSessionInformation(parsedSessionInformation)),
         }),
         // timeouts
         sendTimeoutAfterOvalDrawingDelay: actions.send({
             type: 'RUNTIME_ERROR',
-            data: {
-                message: 'Client failed to draw oval.',
-            },
-        }, {
-            delay: 5000,
-            id: 'ovalDrawingTimeout',
-        }),
+            data: { message: 'Client failed to draw oval.' },
+        }, { delay: 5000, id: 'ovalDrawingTimeout' }),
         cancelOvalDrawingTimeout: actions.cancel('ovalDrawingTimeout'),
         sendTimeoutAfterRecordingDelay: actions.send({
             type: 'RUNTIME_ERROR',
-            data: {
-                message: 'Client failed to start recording.',
-            },
-        }, {
-            delay: 5000,
-            id: 'recordingTimeout',
-        }),
+            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.',
-            },
+            data: { message: 'Client timed out waiting for face to match oval.' },
         }, {
             delay: (context) => {
-                return (context.serverSessionInformation?.Challenge
-                    ?.FaceMovementAndLightChallenge?.ChallengeConfig
+                return (context.parsedSessionInformation.Challenge.ChallengeConfig
                     ?.OvalFitTimeout ?? DEFAULT_FACE_FIT_TIMEOUT);
             },
             id: 'ovalMatchTimeout',
@@ -740,21 +671,26 @@ const livenessMachine = createMachine({
             if (freshnessColorEl) {
                 freshnessColorEl.style.display = 'none';
             }
-            let closureCode = WS_CLOSURE_CODE.DEFAULT_ERROR_CODE;
+            let closeCode = WS_CLOSURE_CODE.DEFAULT_ERROR_CODE;
             if (context.errorState === LivenessErrorState.TIMEOUT) {
-                closureCode = WS_CLOSURE_CODE.FACE_FIT_TIMEOUT;
+                closeCode = WS_CLOSURE_CODE.FACE_FIT_TIMEOUT;
             }
             else if (context.errorState === LivenessErrorState.RUNTIME_ERROR) {
-                closureCode = WS_CLOSURE_CODE.RUNTIME_ERROR;
+                closeCode = WS_CLOSURE_CODE.RUNTIME_ERROR;
             }
             else if (context.errorState === LivenessErrorState.FACE_DISTANCE_ERROR ||
                 context.errorState === LivenessErrorState.MULTIPLE_FACES_ERROR) {
-                closureCode = WS_CLOSURE_CODE.USER_ERROR_DURING_CONNECTION;
+                closeCode = WS_CLOSURE_CODE.USER_ERROR_DURING_CONNECTION;
             }
             else if (context.errorState === undefined) {
-                closureCode = WS_CLOSURE_CODE.USER_CANCEL;
+                closeCode = WS_CLOSURE_CODE.USER_CANCEL;
             }
-            context.livenessStreamProvider?.endStreamWithCode(closureCode);
+            context.livenessStreamProvider?.stopRecording().then(() => {
+                context.livenessStreamProvider?.dispatchStreamEvent({
+                    type: 'closeCode',
+                    data: { closeCode },
+                });
+            });
         },
         freezeStream: (context) => {
             const { videoMediaStream, videoEl } = context.videoAssociatedParams;
@@ -770,15 +706,13 @@ const livenessMachine = createMachine({
             videoEl.pause();
         },
         resetContext: assign({
-            challengeId: nanoid(),
+            challengeId: v4(),
             maxFailedAttempts: 0,
             failedAttempts: 0,
             componentProps: (context) => context.componentProps,
-            serverSessionInformation: (_) => undefined,
+            parsedSessionInformation: (_) => undefined,
             videoAssociatedParams: (_) => {
-                return {
-                    videoConstraints: STATIC_VIDEO_CONSTRAINTS,
-                };
+                return { videoConstraints: STATIC_VIDEO_CONSTRAINTS };
             },
             ovalAssociatedParams: (_) => undefined,
             errorState: (_) => undefined,
@@ -809,21 +743,30 @@ const livenessMachine = createMachine({
         hasNotEnoughFaceDistanceBeforeRecording: (context) => {
             return !context.isFaceFarEnoughBeforeRecording;
         },
-        hasFreshnessColorShown: (context) => context.freshnessColorAssociatedParams.freshnessColorsComplete,
-        hasServerSessionInfo: (context) => {
-            return context.serverSessionInformation !== undefined;
+        hasFreshnessColorShown: (context) => {
+            return context.freshnessColorAssociatedParams.freshnessColorsComplete;
+        },
+        hasParsedSessionInfo: (context) => {
+            return context.parsedSessionInformation !== undefined;
         },
         hasDOMAndCameraDetails: (context) => {
             return (context.videoAssociatedParams.videoEl !== undefined &&
                 context.videoAssociatedParams.canvasEl !== undefined &&
                 context.freshnessColorAssociatedParams.freshnessColorEl !== undefined);
         },
+        isFaceMovementChallenge: (context) => {
+            return (context.parsedSessionInformation?.Challenge?.Name ===
+                FACE_MOVEMENT_CHALLENGE.type);
+        },
+        isFaceMovementAndLightChallenge: (context) => {
+            return (context.parsedSessionInformation?.Challenge?.Name ===
+                FACE_MOVEMENT_AND_LIGHT_CHALLENGE.type);
+        },
         getShouldDisconnect: (context) => {
             return !!context.shouldDisconnect;
         },
         hasRecordingStarted: (context) => {
-            return (context.livenessStreamProvider.videoRecorder.firstChunkTimestamp !==
-                undefined);
+            return context.livenessStreamProvider.hasRecordingStarted();
         },
         shouldSkipStartScreen: (context) => {
             return !!context.componentProps?.disableStartScreen;
@@ -833,12 +776,8 @@ const livenessMachine = createMachine({
         async checkVirtualCameraAndGetStream(context) {
             const { videoConstraints } = context.videoAssociatedParams;
             // Get initial stream to enumerate devices with non-empty labels
-            const existingDeviceId = getLastSelectedCameraId();
             const initialStream = await navigator.mediaDevices.getUserMedia({
-                video: {
-                    ...videoConstraints,
-                    ...(existingDeviceId ? { deviceId: existingDeviceId } : {}),
-                },
+                video: { ...videoConstraints },
                 audio: false,
             });
             const devices = await navigator.mediaDevices.enumerateDevices();
@@ -867,10 +806,7 @@ const livenessMachine = createMachine({
             let realVideoDeviceStream = initialStream;
             if (!isInitialStreamFromRealDevice) {
                 realVideoDeviceStream = await navigator.mediaDevices.getUserMedia({
-                    video: {
-                        ...videoConstraints,
-                        deviceId: { exact: deviceId },
-                    },
+                    video: { ...videoConstraints, deviceId: { exact: deviceId } },
                     audio: false,
                 });
             }
@@ -883,18 +819,25 @@ const livenessMachine = createMachine({
         },
         // eslint-disable-next-line @typescript-eslint/require-await
         async openLivenessStreamConnection(context) {
-            const { config } = context.componentProps;
+            const { config, disableStartScreen } = context.componentProps;
             const { credentialProvider, endpointOverride, systemClockOffset } = config;
-            const livenessStreamProvider = new LivenessStreamProvider({
-                sessionId: context.componentProps.sessionId,
+            const { videoHeight, videoWidth } = context.videoAssociatedParams.videoEl;
+            const livenessStreamProvider = new StreamRecorder(context.videoAssociatedParams.videoMediaStream);
+            const requestStream = createRequestStreamGenerator(livenessStreamProvider.getVideoStream()).getRequestStream();
+            const { getResponseStream } = await createStreamingClient({
+                credentialsProvider: credentialProvider,
+                endpointOverride,
                 region: context.componentProps.region,
+                attemptCount: TelemetryReporter.getAttemptCountAndUpdateTimestamp(),
+                preCheckViewEnabled: !disableStartScreen,
                 systemClockOffset,
-                stream: context.videoAssociatedParams.videoMediaStream,
-                videoEl: context.videoAssociatedParams.videoEl,
-                credentialProvider,
-                endpointOverride,
             });
-            responseStream = livenessStreamProvider.getResponseStream();
+            responseStream = getResponseStream({
+                requestStream,
+                sessionId: context.componentProps.sessionId,
+                videoHeight: videoHeight.toString(),
+                videoWidth: videoWidth.toString(),
+            });
             return { livenessStreamProvider };
         },
         async detectFace(context) {
@@ -913,54 +856,34 @@ const livenessMachine = createMachine({
             return { faceMatchState };
         },
         async detectFaceDistance(context) {
-            const { isFaceFarEnoughBeforeRecording: faceDistanceCheckBeforeRecording, } = context;
-            const { videoEl, videoMediaStream, isMobile } = context.videoAssociatedParams;
+            const { parsedSessionInformation, isFaceFarEnoughBeforeRecording: faceDistanceCheckBeforeRecording, } = context;
+            const { videoEl, videoMediaStream } = context.videoAssociatedParams;
             const { faceDetector } = context.ovalAssociatedParams;
             const { width, height } = videoMediaStream
                 .getTracks()[0]
                 .getSettings();
+            const challengeConfig = parsedSessionInformation.Challenge.ChallengeConfig;
             const ovalDetails = getStaticLivenessOvalDetails({
                 width: width,
                 height: height,
+                ovalHeightWidthRatio: challengeConfig.OvalHeightWidthRatio,
             });
             const { isDistanceBelowThreshold: isFaceFarEnoughBeforeRecording } = await isFaceDistanceBelowThreshold({
+                parsedSessionInformation: parsedSessionInformation,
                 faceDetector: faceDetector,
                 videoEl: videoEl,
                 ovalDetails,
-                reduceThreshold: faceDistanceCheckBeforeRecording,
-                isMobile,
+                reduceThreshold: faceDistanceCheckBeforeRecording, // if this is the second face distance check reduce the threshold
             });
             return { isFaceFarEnoughBeforeRecording };
         },
-        async detectFaceDistanceWhileLoading(context) {
-            const { isFaceFarEnoughBeforeRecording: faceDistanceCheckBeforeRecording, } = context;
-            const { videoEl, videoMediaStream, isMobile } = context.videoAssociatedParams;
-            const { faceDetector } = context.ovalAssociatedParams;
-            const { width, height } = videoMediaStream
-                .getTracks()[0]
-                .getSettings();
-            const ovalDetails = getStaticLivenessOvalDetails({
-                width: width,
-                height: height,
-            });
-            const { isDistanceBelowThreshold: isFaceFarEnoughBeforeRecording, error, } = await isFaceDistanceBelowThreshold({
-                faceDetector: faceDetector,
-                isMobile,
-                ovalDetails,
-                videoEl: videoEl,
-                // if this is the second face distance check reduce the threshold
-                reduceThreshold: faceDistanceCheckBeforeRecording,
-            });
-            return { isFaceFarEnoughBeforeRecording, error };
-        },
         async detectInitialFaceAndDrawOval(context) {
-            const { serverSessionInformation, livenessStreamProvider } = context;
+            const { parsedSessionInformation } = context;
             const { videoEl, canvasEl, isMobile } = context.videoAssociatedParams;
             const { faceDetector } = context.ovalAssociatedParams;
             // initialize models
             try {
                 await faceDetector.modelLoadingPromise;
-                await livenessStreamProvider.videoRecorder.recorderStarted;
             }
             catch (err) {
                 // eslint-disable-next-line no-console
@@ -1009,11 +932,17 @@ const livenessMachine = createMachine({
             const scaleFactor = videoScaledWidth / videoEl.videoWidth;
             // generate oval details from initialFace and video dimensions
             const ovalDetails = getOvalDetailsFromSessionInformation({
-                sessionInformation: serverSessionInformation,
+                parsedSessionInformation: parsedSessionInformation,
                 videoWidth: videoEl.width,
             });
+            const challengeConfig = parsedSessionInformation.Challenge.ChallengeConfig;
             // renormalize initial face
-            const renormalizedFace = generateBboxFromLandmarks(initialFace, ovalDetails, videoEl.videoHeight);
+            const renormalizedFace = generateBboxFromLandmarks({
+                ovalHeightWidthRatio: challengeConfig.OvalHeightWidthRatio,
+                face: initialFace,
+                oval: ovalDetails,
+                frameHeight: videoEl.videoHeight,
+            });
             initialFace.top = renormalizedFace.top;
             initialFace.left = renormalizedFace.left;
             initialFace.height = renormalizedFace.bottom - renormalizedFace.top;
@@ -1025,15 +954,10 @@ const livenessMachine = createMachine({
                 scaleFactor,
                 videoEl: videoEl,
             });
-            return {
-                faceMatchState,
-                ovalDetails,
-                scaleFactor,
-                initialFace,
-            };
+            return { faceMatchState, ovalDetails, scaleFactor, initialFace };
         },
         async detectFaceAndMatchOval(context) {
-            const { serverSessionInformation } = context;
+            const { parsedSessionInformation } = context;
             const { videoEl } = context.videoAssociatedParams;
             const { faceDetector, ovalDetails, initialFace } = context.ovalAssociatedParams;
             // detect face
@@ -1042,7 +966,13 @@ const livenessMachine = createMachine({
             let faceMatchPercentage = 0;
             let detectedFace;
             let illuminationState;
-            const initialFaceBoundingBox = generateBboxFromLandmarks(initialFace, ovalDetails, videoEl.videoHeight);
+            const challengeConfig = parsedSessionInformation.Challenge.ChallengeConfig;
+            const initialFaceBoundingBox = generateBboxFromLandmarks({
+                ovalHeightWidthRatio: challengeConfig.OvalHeightWidthRatio,
+                face: initialFace,
+                oval: ovalDetails,
+                frameHeight: videoEl.videoHeight,
+            });
             const { ovalBoundingBox } = getOvalBoundingBox(ovalDetails);
             const initialFaceIntersection = getIntersectionOverUnion(initialFaceBoundingBox, ovalBoundingBox);
             switch (detectedFaces.length) {
@@ -1059,7 +989,7 @@ const livenessMachine = createMachine({
                         face: detectedFace,
                         ovalDetails: ovalDetails,
                         initialFaceIntersection,
-                        sessionInformation: serverSessionInformation,
+                        parsedSessionInformation: parsedSessionInformation,
                         frameHeight: videoEl.videoHeight,
                     });
                     faceMatchState = faceMatchStateInLivenessOval;
@@ -1079,60 +1009,63 @@ const livenessMachine = createMachine({
                 detectedFace,
             };
         },
-        async flashColors(context) {
-            const { freshnessColorsComplete, freshnessColorDisplay } = context.freshnessColorAssociatedParams;
+        async flashColors({ challengeId, colorSequenceDisplay, freshnessColorAssociatedParams, livenessStreamProvider, ovalAssociatedParams, videoAssociatedParams, }) {
+            const { freshnessColorsComplete, freshnessColorEl } = freshnessColorAssociatedParams;
             if (freshnessColorsComplete) {
                 return;
             }
-            const completed = await freshnessColorDisplay.displayColorTick();
+            const { ovalDetails, scaleFactor } = ovalAssociatedParams;
+            const { videoEl } = videoAssociatedParams;
+            const completed = await colorSequenceDisplay.startSequences({
+                onSequenceColorChange: ({ sequenceColor, prevSequenceColor, heightFraction, }) => {
+                    fillOverlayCanvasFractional({
+                        heightFraction,
+                        overlayCanvas: freshnessColorEl,
+                        ovalDetails: ovalDetails,
+                        nextColor: sequenceColor,
+                        prevColor: prevSequenceColor,
+                        scaleFactor: scaleFactor,
+                        videoEl: videoEl,
+                    });
+                },
+                onSequenceStart: () => {
+                    freshnessColorEl.style.display = 'block';
+                },
+                onSequencesComplete: () => {
+                    freshnessColorEl.style.display = 'none';
+                },
+                onSequenceChange: (params) => {
+                    livenessStreamProvider.dispatchStreamEvent({
+                        type: 'sessionInfo',
+                        data: createColorDisplayEvent({
+                            ...params,
+                            challengeId: challengeId,
+                        }),
+                    });
+                },
+            });
             return { freshnessColorsComplete: completed };
         },
         async stopVideo(context) {
-            const { challengeId, livenessStreamProvider } = context;
-            const { videoMediaStream } = context.videoAssociatedParams;
-            const { initialFace, ovalDetails } = context.ovalAssociatedParams;
-            const { startFace, endFace } = context.faceMatchAssociatedParams;
-            const { width, height } = videoMediaStream
-                .getTracks()[0]
-                .getSettings();
-            const flippedInitialFaceLeft = width - initialFace.left - initialFace.width;
-            await livenessStreamProvider.stopVideo();
-            const livenessActionDocument = {
-                Challenge: {
-                    FaceMovementAndLightChallenge: {
-                        ChallengeId: challengeId,
-                        InitialFace: {
-                            InitialFaceDetectedTimestamp: initialFace.timestampMs,
-                            BoundingBox: getBoundingBox({
-                                deviceHeight: height,
-                                deviceWidth: width,
-                                height: initialFace.height,
-                                width: initialFace.width,
-                                top: initialFace.top,
-                                left: flippedInitialFaceLeft,
-                            }),
-                        },
-                        TargetFace: {
-                            FaceDetectedInTargetPositionStartTimestamp: startFace.timestampMs,
-                            FaceDetectedInTargetPositionEndTimestamp: endFace.timestampMs,
-                            BoundingBox: getBoundingBox({
-                                deviceHeight: height,
-                                deviceWidth: width,
-                                height: ovalDetails.height,
-                                width: ovalDetails.width,
-                                top: ovalDetails.centerY - ovalDetails.height / 2,
-                                left: ovalDetails.centerX - ovalDetails.width / 2,
-                            }),
-                        },
-                        VideoEndTimestamp: livenessStreamProvider.videoRecorder.recorderEndTimestamp,
-                    },
-                },
-            };
-            if (livenessStreamProvider.videoRecorder.getVideoChunkSize() === 0) {
+            const { challengeId, parsedSessionInformation, faceMatchAssociatedParams, ovalAssociatedParams, livenessStreamProvider, videoAssociatedParams, } = context;
+            const { videoMediaStream } = videoAssociatedParams;
+            // if not awaited, `getRecordingEndTimestamp` will throw
+            await livenessStreamProvider.stopRecording();
+            if (livenessStreamProvider.getChunksLength() === 0) {
                 throw new Error('Video chunks not recorded successfully.');
             }
-            livenessStreamProvider.sendClientInfo(livenessActionDocument);
-            livenessStreamProvider.dispatchStopVideoEvent();
+            livenessStreamProvider.dispatchStreamEvent({
+                type: 'sessionInfo',
+                data: createSessionEndEvent({
+                    ...getTrackDimensions(videoMediaStream),
+                    parsedSessionInformation: parsedSessionInformation,
+                    challengeId: challengeId,
+                    faceMatchAssociatedParams: faceMatchAssociatedParams,
+                    ovalAssociatedParams: ovalAssociatedParams,
+                    recordingEndedTimestamp: livenessStreamProvider.getRecordingEndedTimestamp(),
+                }),
+            });
+            livenessStreamProvider.dispatchStreamEvent({ type: 'streamStop' });
         },
         async getLiveness(context) {
             const { onAnalysisComplete } = context.componentProps;