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

package/dist/index.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var auth = require('aws-amplify/auth');
 var react = require('@xstate/react');
-var nanoid = require('nanoid');
+var uuid = require('uuid');
 var xstate = require('xstate');
 var tfjsCore = require('@tensorflow/tfjs-core');
 var faceDetection = require('@tensorflow-models/face-detection');
 var tfjsBackendWasm = require('@tensorflow/tfjs-backend-wasm');
 require('@tensorflow/tfjs-backend-cpu');
 var utils = require('@aws-amplify/core/internals/utils');
+var tslib = require('tslib');
+var ui = require('@aws-amplify/ui');
 var clientRekognitionstreaming = require('@aws-sdk/client-rekognitionstreaming');
 var utilFormatUrl = require('@aws-sdk/util-format-url');
 var eventstreamSerdeBrowser = require('@smithy/eventstream-serde-browser');
@@ -19,7 +21,6 @@ var fetchHttpHandler = require('@smithy/fetch-http-handler');
 var protocolHttp = require('@smithy/protocol-http');
 var signatureV4 = require('@smithy/signature-v4');
 var uiReact = require('@aws-amplify/ui-react');
-var ui = require('@aws-amplify/ui');
 var internal = require('@aws-amplify/ui-react/internal');
 
 function _interopNamespace(e) {
@@ -95,12 +96,6 @@ const LivenessErrorState = {
 
 // Face distance is calculated as pupilDistance / ovalWidth.
 // The further away you are from the camera the distance between your pupils will decrease, thus lowering the threshold values.
-// These FACE_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;
@@ -109,6 +104,7 @@ 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 OVAL_HEIGHT_WIDTH_RATIO = 1.618;
 const WS_CLOSURE_CODE = {
     SUCCESS_CODE: 1000,
     DEFAULT_ERROR_CODE: 4000,
@@ -117,6 +113,34 @@ const WS_CLOSURE_CODE = {
     RUNTIME_ERROR: 4005,
     USER_ERROR_DURING_CONNECTION: 4007,
 };
+// number in milliseconds to record into each video chunk.
+// see https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#timeslice
+const TIME_SLICE = 1000;
+// in MS, the rate at which colors are rendered/checked
+const TICK_RATE = 10;
+/**
+ * The number of seconds before the presigned URL expires.
+ * Used to override aws sdk default value of 60
+ */
+const REQUEST_EXPIRY = 299;
+/**
+ * The maximum time in milliseconds that the connection phase of a request
+ * may take before the connection attempt is abandoned.
+ */
+const CONNECTION_TIMEOUT = 10000;
+const FACE_MOVEMENT_AND_LIGHT_CHALLENGE = {
+    type: 'FaceMovementAndLightChallenge',
+    version: '1.0.0',
+};
+const FACE_MOVEMENT_CHALLENGE = {
+    type: 'FaceMovementChallenge',
+    version: '1.0.0',
+};
+const SUPPORTED_CHALLENGES = [
+    FACE_MOVEMENT_AND_LIGHT_CHALLENGE,
+    FACE_MOVEMENT_CHALLENGE,
+];
+const queryParameterString = SUPPORTED_CHALLENGES.map((challenge) => `${challenge.type}_${challenge.version}`).join(',');
 
 /**
  * Returns the random number between min and max
@@ -161,9 +185,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 ||
@@ -185,7 +208,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;
@@ -199,7 +222,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),
@@ -262,7 +285,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
@@ -296,7 +319,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;
@@ -316,7 +339,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]);
@@ -435,11 +458,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' &&
@@ -452,13 +475,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);
@@ -482,7 +499,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;
@@ -506,10 +525,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;
                 }
@@ -524,14 +541,6 @@ 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,
-    };
-}
 
 /**
  * Checks whether WebAssembly is supported in the current environment.
@@ -638,152 +647,12 @@ 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);
-}
-
-// Equivalent to 2 Kbps - needed for maintaining video quality at 60 FPS
-const BITS_PER_SECOND = 2000000;
-// 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.
- */
-class VideoRecorder {
-    constructor(stream) {
-        if (typeof MediaRecorder === 'undefined') {
-            throw Error('MediaRecorder is not supported by this browser');
-        }
-        this._stream = stream;
-        this._chunks = [];
-        this._recorder = new MediaRecorder(stream, {
-            bitsPerSecond: BITS_PER_SECOND,
-            mimeType: isAndroidChromeWithBrokenH264()
-                ? ALTERNATE_CHROME_MIME_TYPE
-                : undefined,
-        });
-        this._setupCallbacks();
-    }
-    getState() {
-        return this._recorder.state;
-    }
-    start(timeSlice) {
-        this.clearRecordedData();
-        this.recordingStartApiTimestamp = Date.now();
-        this._recorder.start(timeSlice);
-    }
-    async stop() {
-        if (this.getState() === 'recording') {
-            this._recorder.stop();
-        }
-        return this._recorderStopped;
-    }
-    pause() {
-        this._recorder.pause();
-    }
-    clearRecordedData() {
-        this._chunks = [];
-    }
-    dispatch(event) {
-        this._recorder.dispatchEvent(event);
-    }
-    getVideoChunkSize() {
-        return this._chunks.length;
-    }
-    _setupCallbacks() {
-        // Creates a Readablestream of video chunks. Waits to receive a clientSessionInfo event before pushing
-        //  a livenessActionDocument to the ReadableStream and finally closing the ReadableStream
-        this.videoStream = new ReadableStream({
-            start: (controller) => {
-                if (!this._recorder) {
-                    return;
-                }
-                this._recorder.ondataavailable = (e) => {
-                    if (e.data && e.data.size > 0) {
-                        if (this._chunks.length === 0) {
-                            this.firstChunkTimestamp = Date.now();
-                        }
-                        this._chunks.push(e.data);
-                        controller.enqueue(e.data);
-                    }
-                };
-                this._recorder.addEventListener('clientSesssionInfo', (e) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-                    controller.enqueue(e.data.clientInfo);
-                });
-                this._recorder.addEventListener('stopVideo', () => {
-                    controller.enqueue('stopVideo');
-                });
-                this._recorder.addEventListener('endStream', () => {
-                    controller.close();
-                });
-                this._recorder.addEventListener('endStreamWithCode', (e) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-                    controller.enqueue({
-                        type: 'endStreamWithCode',
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                        code: e.data.code,
-                    });
-                });
-            },
-        });
-        this.recorderStarted = new Promise((resolve) => {
-            this._recorder.onstart = () => {
-                this.recorderStartTimestamp = Date.now();
-                resolve();
-            };
-        });
-        this._recorderStopped = new Promise((resolve) => {
-            this._recorder.onstop = () => {
-                this.recorderEndTimestamp = Date.now();
-                resolve();
-            };
-        });
-        this._recorder.onerror = () => {
-            if (this.getState() !== 'stopped') {
-                this.stop();
-            }
-        };
-    }
-}
-
 /**
  * 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 ||
@@ -792,8 +661,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;
@@ -831,7 +705,357 @@ function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceInterse
     return { faceMatchState, faceMatchPercentage };
 }
 
-const VERSION = '3.3.9';
+var _ColorSequenceDisplay_instances, _ColorSequenceDisplay_sequence, _ColorSequenceDisplay_previousSequence, _ColorSequenceDisplay_colorStage, _ColorSequenceDisplay_sequenceIndex, _ColorSequenceDisplay_colorSequences, _ColorSequenceDisplay_isFirstTick, _ColorSequenceDisplay_lastColorStageChangeTimestamp, _ColorSequenceDisplay_isFlatStage, _ColorSequenceDisplay_isScrollingStage, _ColorSequenceDisplay_startColorSequence, _ColorSequenceDisplay_handleSequenceChange;
+var ColorStageType;
+(function (ColorStageType) {
+    ColorStageType[ColorStageType["Scrolling"] = 0] = "Scrolling";
+    ColorStageType[ColorStageType["Flat"] = 1] = "Flat";
+})(ColorStageType || (ColorStageType = {}));
+class ColorSequenceDisplay {
+    /**
+     * Iterates over provided color sequences and executes sequence event callbacks
+     *
+     * @param {ColorSequences} colorSequences array of color sequences to iterate over
+     */
+    constructor(colorSequences) {
+        _ColorSequenceDisplay_instances.add(this);
+        /**
+         * the current color sequence used for flat display and the prev color when scrolling
+         */
+        _ColorSequenceDisplay_sequence.set(this, void 0);
+        /**
+         * previous color sequence, during flat display curr === prev and during scroll it is the prev indexed color
+         */
+        _ColorSequenceDisplay_previousSequence.set(this, void 0);
+        /**
+         * current ColorStage, initialize to 'FLAT'
+         */
+        _ColorSequenceDisplay_colorStage.set(this, ColorStageType.Flat);
+        /**
+         * current color sequence index (black flat, red scrolling, etc)
+         */
+        _ColorSequenceDisplay_sequenceIndex.set(this, 0);
+        _ColorSequenceDisplay_colorSequences.set(this, void 0);
+        _ColorSequenceDisplay_isFirstTick.set(this, true);
+        _ColorSequenceDisplay_lastColorStageChangeTimestamp.set(this, 0);
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_colorSequences, colorSequences, "f");
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_sequence, colorSequences[0], "f");
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_previousSequence, colorSequences[0], "f");
+    }
+    /**
+     * Start sequence iteration and execute event callbacks
+     *
+     * @async
+     * @param {StartSequencesParams} params Sequence event handlers
+     * @returns {Promise<boolean>} Resolves to true when complete
+     */
+    async startSequences(params) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_startColorSequence).call(this, { ...params, resolve });
+            }, Math.min(TICK_RATE));
+        });
+    }
+}
+_ColorSequenceDisplay_sequence = new WeakMap(), _ColorSequenceDisplay_previousSequence = new WeakMap(), _ColorSequenceDisplay_colorStage = new WeakMap(), _ColorSequenceDisplay_sequenceIndex = new WeakMap(), _ColorSequenceDisplay_colorSequences = new WeakMap(), _ColorSequenceDisplay_isFirstTick = new WeakMap(), _ColorSequenceDisplay_lastColorStageChangeTimestamp = new WeakMap(), _ColorSequenceDisplay_instances = new WeakSet(), _ColorSequenceDisplay_isFlatStage = function _ColorSequenceDisplay_isFlatStage() {
+    return tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_colorStage, "f") === ColorStageType.Flat;
+}, _ColorSequenceDisplay_isScrollingStage = function _ColorSequenceDisplay_isScrollingStage() {
+    return tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_colorStage, "f") === ColorStageType.Scrolling;
+}, _ColorSequenceDisplay_startColorSequence = function _ColorSequenceDisplay_startColorSequence({ onSequenceChange, onSequenceColorChange, onSequenceStart, onSequencesComplete, resolve, }) {
+    if (ui.isFunction(onSequenceStart)) {
+        onSequenceStart();
+    }
+    const sequenceStartTime = Date.now();
+    let timeSinceLastColorStageChange = sequenceStartTime - tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_lastColorStageChangeTimestamp, "f");
+    // Send a colorStart time only for the first tick of the first color
+    if (tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_isFirstTick, "f")) {
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_lastColorStageChangeTimestamp, Date.now(), "f");
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_isFirstTick, false, "f");
+        // initial sequence change
+        if (ui.isFunction(onSequenceChange)) {
+            onSequenceChange({
+                prevSequenceColor: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_previousSequence, "f").color,
+                sequenceColor: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").color,
+                sequenceIndex: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f"),
+                sequenceStartTime,
+            });
+        }
+    }
+    // Every 10 ms tick we will check if the threshold for flat or scrolling, if so we will try to go to the next stage
+    if ((tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_isFlatStage).call(this) &&
+        timeSinceLastColorStageChange >= tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").flatDisplayDuration) ||
+        (tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_isScrollingStage).call(this) &&
+            timeSinceLastColorStageChange >= tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").downscrollDuration)) {
+        tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_handleSequenceChange).call(this, { sequenceStartTime, onSequenceChange });
+        timeSinceLastColorStageChange = 0;
+    }
+    const hasRemainingSequences = tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f") < tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_colorSequences, "f").length;
+    // Every 10 ms tick we will update the colors displayed
+    if (hasRemainingSequences) {
+        const heightFraction = timeSinceLastColorStageChange /
+            (tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_isScrollingStage).call(this)
+                ? tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").downscrollDuration
+                : tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").flatDisplayDuration);
+        if (ui.isFunction(onSequenceColorChange)) {
+            onSequenceColorChange({
+                sequenceColor: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").color,
+                heightFraction,
+                prevSequenceColor: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_previousSequence, "f").color,
+            });
+        }
+        resolve(false);
+    }
+    else {
+        if (ui.isFunction(onSequencesComplete)) {
+            onSequencesComplete();
+        }
+        resolve(true);
+    }
+}, _ColorSequenceDisplay_handleSequenceChange = function _ColorSequenceDisplay_handleSequenceChange({ sequenceStartTime, onSequenceChange, }) {
+    tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_previousSequence, tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f"), "f");
+    if (tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_isFlatStage).call(this)) {
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_sequenceIndex, tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f") + 1, "f");
+        tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_colorStage, ColorStageType.Scrolling, "f");
+    }
+    else if (tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_instances, "m", _ColorSequenceDisplay_isScrollingStage).call(this)) {
+        const nextColorSequence = tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_colorSequences, "f")[tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f")];
+        if (nextColorSequence.flatDisplayDuration > 0) {
+            tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_colorStage, ColorStageType.Flat, "f");
+        }
+        else {
+            tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_sequenceIndex, tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f") + 1, "f");
+        }
+    }
+    tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_sequence, tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_colorSequences, "f")[tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f")], "f");
+    tslib.__classPrivateFieldSet(this, _ColorSequenceDisplay_lastColorStageChangeTimestamp, Date.now(), "f");
+    if (tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f")) {
+        if (ui.isFunction(onSequenceChange)) {
+            onSequenceChange({
+                prevSequenceColor: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_previousSequence, "f").color,
+                sequenceColor: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequence, "f").color,
+                sequenceIndex: tslib.__classPrivateFieldGet(this, _ColorSequenceDisplay_sequenceIndex, "f"),
+                sequenceStartTime: sequenceStartTime,
+            });
+        }
+    }
+};
+
+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 };
+};
+
+const createVideoEvent = async (result) => {
+    const { data, type } = result;
+    return {
+        VideoChunk: new Uint8Array(
+        // server expects an empty chunk on 'stopStream' event
+        type === 'streamVideo' ? await data.arrayBuffer() : []),
+        // @ts-expect-error for 'closeCode' event, `data` is an object which is
+        // unexpected by `VideoEvent` but is expected by the streaming service
+        TimestampMillis: type === 'closeCode' ? data : Date.now(),
+    };
+};
+const getTrackDimensions = (stream) => {
+    const { height: trackHeight, width: trackWidth } = stream
+        .getVideoTracks()[0]
+        .getSettings();
+    if (ui.isUndefined(trackHeight) || ui.isUndefined(trackWidth)) {
+        throw new Error(`Invalid Track Dimensions. height: ${trackHeight}, width: ${trackWidth} `);
+    }
+    return { trackHeight, trackWidth };
+};
+function getBoundingBox({ trackHeight, trackWidth, height, width, top, left, }) {
+    return {
+        Height: height / trackHeight,
+        Width: width / trackWidth,
+        Top: top / trackHeight,
+        Left: left / trackWidth,
+    };
+}
+const getFlippedInitialFaceLeft = (trackWidth, faceLeft, faceWidth) => trackWidth - faceLeft - faceWidth;
+const getInitialFaceBoundingBox = (params) => {
+    const { trackWidth, left, width } = params;
+    return getBoundingBox({
+        ...params,
+        left: getFlippedInitialFaceLeft(trackWidth, left, width),
+    });
+};
+const getTargetFaceBoundingBox = (params) => {
+    const { height, width, centerX, centerY } = params;
+    return getBoundingBox({
+        ...params,
+        top: centerY - height / 2,
+        left: centerX - width / 2,
+    });
+};
+function createClientSessionInformationEvent({ parsedSessionInformation, clientChallenge, }) {
+    if (isFaceMovementChallenge(parsedSessionInformation)) {
+        return {
+            Challenge: {
+                FaceMovementChallenge: clientChallenge,
+            },
+        };
+    }
+    if (isFaceMovementAndLightChallenge(parsedSessionInformation)) {
+        return {
+            Challenge: {
+                FaceMovementAndLightChallenge: clientChallenge,
+            },
+        };
+    }
+    throw new Error('Unable to create ClientSessionInformationEvent');
+}
+function createSessionEndEvent({ parsedSessionInformation, challengeId, faceMatchAssociatedParams, ovalAssociatedParams, recordingEndedTimestamp, trackHeight, trackWidth, }) {
+    const { initialFace, ovalDetails } = ovalAssociatedParams;
+    const { startFace, endFace } = faceMatchAssociatedParams;
+    const initialFaceBoundingBox = getInitialFaceBoundingBox({
+        trackHeight,
+        trackWidth,
+        ...initialFace,
+    });
+    const targetFaceBoundingBox = getTargetFaceBoundingBox({
+        trackHeight,
+        trackWidth,
+        ...ovalDetails,
+    });
+    const clientChallenge = {
+        ChallengeId: challengeId,
+        InitialFace: {
+            InitialFaceDetectedTimestamp: initialFace.timestampMs,
+            BoundingBox: initialFaceBoundingBox,
+        },
+        TargetFace: {
+            FaceDetectedInTargetPositionStartTimestamp: startFace.timestampMs,
+            FaceDetectedInTargetPositionEndTimestamp: endFace.timestampMs,
+            BoundingBox: targetFaceBoundingBox,
+        },
+        VideoEndTimestamp: recordingEndedTimestamp,
+    };
+    return createClientSessionInformationEvent({
+        parsedSessionInformation,
+        clientChallenge,
+    });
+}
+function createSessionStartEvent({ parsedSessionInformation, challengeId, ovalAssociatedParams, recordingStartedTimestamp, trackHeight, trackWidth, }) {
+    const { initialFace } = ovalAssociatedParams;
+    const initialFaceBoundingBox = getInitialFaceBoundingBox({
+        trackHeight,
+        trackWidth,
+        ...initialFace,
+    });
+    const clientChallenge = {
+        ChallengeId: challengeId,
+        VideoStartTimestamp: recordingStartedTimestamp,
+        InitialFace: {
+            InitialFaceDetectedTimestamp: initialFace.timestampMs,
+            BoundingBox: initialFaceBoundingBox,
+        },
+    };
+    return createClientSessionInformationEvent({
+        parsedSessionInformation,
+        clientChallenge,
+    });
+}
+/**
+ * Translates provided sequence color string to an RGB array
+ *
+ * @param {SequenceColorValue} color
+ * @returns {number[]}
+ */
+const colorToRgb = (color) => {
+    return color
+        .slice(color.indexOf('(') + 1, color.indexOf(')'))
+        .split(',')
+        .map((str) => parseInt(str));
+};
+function createColorDisplayEvent({ challengeId, sequenceStartTime, sequenceIndex, sequenceColor, prevSequenceColor, }) {
+    const CurrentColor = { RGB: colorToRgb(sequenceColor) };
+    const PreviousColor = {
+        RGB: colorToRgb(prevSequenceColor),
+    };
+    return {
+        Challenge: {
+            FaceMovementAndLightChallenge: {
+                ChallengeId: challengeId,
+                ColorDisplayed: {
+                    CurrentColor,
+                    PreviousColor,
+                    SequenceNumber: sequenceIndex,
+                    CurrentColorStartTimestamp: sequenceStartTime,
+                },
+            },
+        },
+    };
+}
+
+/**
+ * Creates an async generator that reads over the provided stream and yielding stream results
+ *
+ * @param {VideoStream} stream target video stream
+ * @returns {GetRequestStream} async request stream generator
+ */
+function createRequestStreamGenerator(stream) {
+    const reader = stream.getReader();
+    return {
+        getRequestStream: async function* () {
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) {
+                    return;
+                }
+                if (value.type === 'sessionInfo') {
+                    yield { ClientSessionInformationEvent: value.data };
+                }
+                else {
+                    // Unless value.type is closeCode we never want to send a 0 size video event as it signals end of stream
+                    if (value.type === 'streamVideo' && value.data.size < 1)
+                        continue;
+                    yield { VideoEvent: await createVideoEvent(value) };
+                }
+            }
+        },
+    };
+}
+
+const VERSION = '3.4.0';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -1049,7 +1273,7 @@ class CustomWebSocketFetchHandler {
     }
 }
 
-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`
@@ -1064,13 +1288,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 auth.fetchAuthSession()).credentials;
         if (isCredentials(result)) {
@@ -1084,8 +1309,6 @@ async function resolveCredentials(credentialsProvider) {
     }
 }
 
-// override aws sdk default value of 60
-const REQUEST_EXPIRY = 299;
 class Signer extends signatureV4.SignatureV4 {
     presign(request, options) {
         return super.presign(request, {
@@ -1099,12 +1322,36 @@ class Signer extends signatureV4.SignatureV4 {
     }
 }
 
-const CONNECTION_TIMEOUT = 10000;
+const DEFAULT_ATTEMPT_COUNT_TIMEOUT = 300000; // 5 minutes / 300000 ms
+// Telemetry data is for internal use only and should not be depended upon or used by the customer
+class TelemetryReporter {
+    static getAttemptCountAndUpdateTimestamp() {
+        const timeSinceLastAttempt = Date.now() - TelemetryReporter.timestamp;
+        if (timeSinceLastAttempt > DEFAULT_ATTEMPT_COUNT_TIMEOUT) {
+            TelemetryReporter.attemptCount = 1;
+        }
+        else {
+            TelemetryReporter.attemptCount += 1;
+        }
+        TelemetryReporter.timestamp = Date.now();
+        return TelemetryReporter.attemptCount;
+    }
+}
+TelemetryReporter.attemptCount = 0;
+TelemetryReporter.timestamp = Date.now();
+const createTelemetryReporterMiddleware = (attemptCount, preCheckViewEnabled) => (next) => async (args) => {
+    args.request.query['attempt-count'] =
+        attemptCount.toString();
+    args.request.query['precheck-view-enabled'] =
+        preCheckViewEnabled ? '1' : '0';
+    const result = await next(args);
+    return result;
+};
+
 const CUSTOM_USER_AGENT = `${utils.getAmplifyUserAgent()} ${getLivenessUserAgent()}`;
-async function createStreamingClient({ credentialsProvider, endpointOverride, region, systemClockOffset, }) {
-    const credentials = await resolveCredentials(credentialsProvider);
+async function getStreamingClient({ credentialsProvider, endpointOverride, region, systemClockOffset, }) {
     const clientconfig = {
-        credentials,
+        credentials: await resolveCredentials(credentialsProvider),
         customUserAgent: CUSTOM_USER_AGENT,
         region,
         requestHandler: new CustomWebSocketFetchHandler({
@@ -1113,262 +1360,208 @@ async function createStreamingClient({ credentialsProvider, endpointOverride, re
         signerConstructor: Signer,
         systemClockOffset,
     };
-    if (endpointOverride) {
+    if (ui.isString(endpointOverride)) {
         clientconfig.endpointProvider = () => ({ url: new URL(endpointOverride) });
     }
     return new clientRekognitionstreaming.RekognitionStreamingClient(clientconfig);
 }
-
-const TIME_SLICE = 1000;
-function isBlob(obj) {
-    return obj.arrayBuffer !== undefined;
-}
-function isClientSessionInformationEvent(obj) {
-    return obj.Challenge !== undefined;
+const createCommandInput = ({ requestStream, sessionId, videoWidth, videoHeight, }) => ({
+    ChallengeVersions: queryParameterString,
+    SessionId: sessionId,
+    LivenessRequestStream: requestStream,
+    VideoWidth: videoWidth,
+    VideoHeight: videoHeight,
+});
+/**
+ * Initializes an instance of the Rekognition streaming client, returns `getResponseStream`
+ *
+ * @async
+ * @param clientConfig configuration fpr the client
+ * @returns {Promise<{ getResponseStream: GetReponseStream }>}
+ */
+async function createStreamingClient(clientConfig) {
+    const client = await getStreamingClient(clientConfig);
+    client.middlewareStack.add(createTelemetryReporterMiddleware(clientConfig.attemptCount, clientConfig.preCheckViewEnabled), {
+        step: 'build',
+        name: 'telemetryMiddleware',
+        tags: ['liveness', 'amplify-ui'],
+    });
+    return {
+        async getResponseStream(input) {
+            const command = new clientRekognitionstreaming.StartFaceLivenessSessionCommand(createCommandInput(input));
+            const { LivenessResponseStream } = await client.send(command);
+            return LivenessResponseStream;
+        },
+    };
 }
-function isEndStreamWithCodeEvent(obj) {
-    return obj.code !== undefined;
+
+var _StreamRecorder_instances, _StreamRecorder_chunks, _StreamRecorder_recorder, _StreamRecorder_initialRecorder, _StreamRecorder_recordingStarted, _StreamRecorder_firstChunkTimestamp, _StreamRecorder_recorderEndTimestamp, _StreamRecorder_recorderStartTimestamp, _StreamRecorder_recordingStartTimestamp, _StreamRecorder_recorderStopped, _StreamRecorder_videoStream, _StreamRecorder_eventListeners, _StreamRecorder_clearRecordedChunks, _StreamRecorder_createReadableStream, _StreamRecorder_attachHandlers, _StreamRecorder_setupCallbacks, _StreamRecorder_cleanUpEventListeners;
+class StreamRecorder {
+    constructor(stream) {
+        _StreamRecorder_instances.add(this);
+        _StreamRecorder_chunks.set(this, void 0);
+        _StreamRecorder_recorder.set(this, void 0);
+        _StreamRecorder_initialRecorder.set(this, void 0);
+        _StreamRecorder_recordingStarted.set(this, false);
+        _StreamRecorder_firstChunkTimestamp.set(this, void 0);
+        _StreamRecorder_recorderEndTimestamp.set(this, void 0);
+        _StreamRecorder_recorderStartTimestamp.set(this, void 0);
+        _StreamRecorder_recordingStartTimestamp.set(this, void 0);
+        _StreamRecorder_recorderStopped.set(this, void 0);
+        _StreamRecorder_videoStream.set(this, void 0);
+        _StreamRecorder_eventListeners.set(this, void 0);
+        if (typeof MediaRecorder === 'undefined') {
+            throw Error('MediaRecorder is not supported by this browser');
+        }
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_chunks, [], "f");
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_recorder, new MediaRecorder(stream, { bitsPerSecond: 1000000 }), "f");
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_initialRecorder, tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f"), "f");
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_videoStream, tslib.__classPrivateFieldGet(this, _StreamRecorder_instances, "m", _StreamRecorder_createReadableStream).call(this), "f");
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_eventListeners, {}, "f");
+    }
+    getVideoStream() {
+        return tslib.__classPrivateFieldGet(this, _StreamRecorder_videoStream, "f");
+    }
+    setNewVideoStream(stream) {
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_instances, "m", _StreamRecorder_cleanUpEventListeners).call(this);
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_recorder, new MediaRecorder(stream, { bitsPerSecond: 1000000 }), "f");
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_instances, "m", _StreamRecorder_attachHandlers).call(this, tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f"));
+    }
+    dispatchStreamEvent(event) {
+        const { type } = event;
+        const data = type === 'streamStop' ? undefined : event.data;
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").dispatchEvent(new MessageEvent(type, { data }));
+    }
+    getRecordingStartTimestamp() {
+        if (ui.isUndefined(tslib.__classPrivateFieldGet(this, _StreamRecorder_recorderStartTimestamp, "f")) ||
+            ui.isUndefined(tslib.__classPrivateFieldGet(this, _StreamRecorder_recordingStartTimestamp, "f"))) {
+            throw new Error('Recording has not started');
+        }
+        /**
+         * This calculation is provided by Science team after doing analysis
+         * of unreliable .onstart() (this.#recorderStartTimestamp) timestamp that is
+         * returned from mediaRecorder.
+         */
+        return Math.round(0.73 * (tslib.__classPrivateFieldGet(this, _StreamRecorder_recorderStartTimestamp, "f") - tslib.__classPrivateFieldGet(this, _StreamRecorder_recordingStartTimestamp, "f")) +
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_recordingStartTimestamp, "f"));
+    }
+    getRecordingEndedTimestamp() {
+        if (ui.isUndefined(tslib.__classPrivateFieldGet(this, _StreamRecorder_recorderEndTimestamp, "f"))) {
+            throw new Error('Recording has not ended');
+        }
+        return tslib.__classPrivateFieldGet(this, _StreamRecorder_recorderEndTimestamp, "f");
+    }
+    startRecording() {
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_instances, "m", _StreamRecorder_clearRecordedChunks).call(this);
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_recordingStartTimestamp, Date.now(), "f");
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").start(TIME_SLICE);
+    }
+    isRecording() {
+        return tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").state === 'recording';
+    }
+    getChunksLength() {
+        return tslib.__classPrivateFieldGet(this, _StreamRecorder_chunks, "f").length;
+    }
+    hasRecordingStarted() {
+        return tslib.__classPrivateFieldGet(this, _StreamRecorder_recordingStarted, "f") && tslib.__classPrivateFieldGet(this, _StreamRecorder_firstChunkTimestamp, "f") !== undefined;
+    }
+    async stopRecording() {
+        if (this.isRecording()) {
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").stop();
+        }
+        return tslib.__classPrivateFieldGet(this, _StreamRecorder_recorderStopped, "f");
+    }
 }
-class LivenessStreamProvider {
-    constructor({ sessionId, region, stream, videoEl, credentialProvider, endpointOverride, systemClockOffset, }) {
-        this.sessionId = sessionId;
-        this.region = region;
-        this.stream = stream;
-        this.videoEl = videoEl;
-        this.videoRecorder = new VideoRecorder(stream);
-        this.credentialProvider = credentialProvider;
-        this.endpointOverride = endpointOverride;
-        this.systemClockOffset = systemClockOffset;
-        this.initPromise = this.init();
-    }
-    async getResponseStream() {
-        await this.initPromise;
-        return this.responseStream;
-    }
-    startRecordingLivenessVideo() {
-        this.videoRecorder.start(TIME_SLICE);
-    }
-    sendClientInfo(clientInfo) {
-        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', { data: { clientInfo } }));
-    }
-    async stopVideo() {
-        await this.videoRecorder.stop();
-    }
-    dispatchStopVideoEvent() {
-        this.videoRecorder.dispatch(new Event('stopVideo'));
-    }
-    async endStreamWithCode(code) {
-        if (this.videoRecorder.getState() === 'recording') {
-            await this.stopVideo();
-        }
-        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', { data: { code } }));
-        return;
-    }
-    async init() {
-        this._client = await createStreamingClient({
-            credentialsProvider: this.credentialProvider,
-            endpointOverride: this.endpointOverride,
-            region: this.region,
-            systemClockOffset: this.systemClockOffset,
-        });
-        this.responseStream = await this.startLivenessVideoConnection();
-    }
-    // Creates a generator from a stream of video chunks and livenessActionDocuments and yields VideoEvent and ClientEvents
-    getAsyncGeneratorFromReadableStream(stream) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const current = this;
-        this._reader = stream.getReader();
-        return async function* () {
-            while (true) {
-                const { done, value } = (await current._reader.read());
-                if (done) {
-                    return;
-                }
-                // Video chunks blobs should be sent as video events
-                if (value === 'stopVideo') {
-                    // sending an empty video chunk signals that we have ended sending video
-                    yield {
-                        VideoEvent: {
-                            VideoChunk: new Uint8Array([]),
-                            TimestampMillis: Date.now(),
-                        },
-                    };
-                }
-                else if (isBlob(value)) {
-                    const buffer = await value.arrayBuffer();
-                    const chunk = new Uint8Array(buffer);
-                    if (chunk.length > 0) {
-                        yield {
-                            VideoEvent: {
-                                VideoChunk: chunk,
-                                TimestampMillis: Date.now(),
-                            },
-                        };
-                    }
-                }
-                else if (isClientSessionInformationEvent(value)) {
-                    yield {
-                        ClientSessionInformationEvent: {
-                            Challenge: value.Challenge,
-                        },
-                    };
-                }
-                else if (isEndStreamWithCodeEvent(value)) {
-                    yield {
-                        VideoEvent: {
-                            VideoChunk: new Uint8Array([]),
-                            // this is a custom type that does not match LivenessRequestStream.
-                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                            TimestampMillis: { closeCode: value.code },
-                        },
-                    };
+_StreamRecorder_chunks = new WeakMap(), _StreamRecorder_recorder = new WeakMap(), _StreamRecorder_initialRecorder = new WeakMap(), _StreamRecorder_recordingStarted = new WeakMap(), _StreamRecorder_firstChunkTimestamp = new WeakMap(), _StreamRecorder_recorderEndTimestamp = new WeakMap(), _StreamRecorder_recorderStartTimestamp = new WeakMap(), _StreamRecorder_recordingStartTimestamp = new WeakMap(), _StreamRecorder_recorderStopped = new WeakMap(), _StreamRecorder_videoStream = new WeakMap(), _StreamRecorder_eventListeners = new WeakMap(), _StreamRecorder_instances = new WeakSet(), _StreamRecorder_clearRecordedChunks = function _StreamRecorder_clearRecordedChunks() {
+    tslib.__classPrivateFieldSet(this, _StreamRecorder_chunks, [], "f");
+}, _StreamRecorder_createReadableStream = function _StreamRecorder_createReadableStream() {
+    return new ReadableStream({
+        start: (controller) => {
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_instances, "m", _StreamRecorder_attachHandlers).call(this, tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f"), controller);
+        },
+    });
+}, _StreamRecorder_attachHandlers = function _StreamRecorder_attachHandlers(recorder, controller) {
+    const onDataAvailableHandler = controller
+        ? ({ data }) => {
+            if (data && data.size > 0) {
+                if (tslib.__classPrivateFieldGet(this, _StreamRecorder_chunks, "f").length === 0) {
+                    tslib.__classPrivateFieldSet(this, _StreamRecorder_firstChunkTimestamp, Date.now(), "f");
                 }
+                tslib.__classPrivateFieldGet(this, _StreamRecorder_chunks, "f").push(data);
+                controller.enqueue({ type: 'streamVideo', data });
             }
+        }
+        : ({ data }) => {
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_initialRecorder, "f").dispatchEvent(new MessageEvent('dataavailable', { data }));
         };
-    }
-    async startLivenessVideoConnection() {
-        const livenessRequestGenerator = this.getAsyncGeneratorFromReadableStream(this.videoRecorder.videoStream)();
-        const mediaSettings = this.stream.getTracks()[0].getSettings();
-        const response = await this._client.send(new clientRekognitionstreaming.StartFaceLivenessSessionCommand({
-            ChallengeVersions: 'FaceMovementAndLightChallenge_1.0.0',
-            SessionId: this.sessionId,
-            LivenessRequestStream: livenessRequestGenerator,
-            VideoWidth: (mediaSettings.width ?? this.videoEl.width).toString(),
-            VideoHeight: (mediaSettings.height ?? this.videoEl.height).toString(),
-        }));
-        return response.LivenessResponseStream;
-    }
-}
-
-const TICK_RATE = 10; // ms -- the rate at which we will render/check colors
-var COLOR_STAGE;
-(function (COLOR_STAGE) {
-    COLOR_STAGE["SCROLLING"] = "SCROLLING";
-    COLOR_STAGE["FLAT"] = "FLAT";
-})(COLOR_STAGE || (COLOR_STAGE = {}));
-class FreshnessColorDisplay {
-    constructor(context, freshnessColorsSequence) {
-        this.context = context;
-        this.freshnessColorsSequence = freshnessColorsSequence;
-        this.isFirstTick = true;
-    }
-    async displayColorTick() {
-        return new Promise((resolve, reject) => {
-            setTimeout(() => {
-                this.displayNextColorTick(resolve, reject);
-            }, Math.min(TICK_RATE));
-        });
-    }
-    init() {
-        this.stageIndex = 0;
-        this.currColorIndex = 0;
-        this.currColorSequence = this.freshnessColorsSequence[0];
-        this.prevColorSequence = this.freshnessColorsSequence[0];
-        this.stage = COLOR_STAGE.FLAT;
-        this.timeLastFlatOrScrollChange = Date.now();
-        this.timeLastFaceMatchChecked = Date.now();
-    }
-    displayNextColorTick(resolve, _) {
-        const { freshnessColorEl } = this.context.freshnessColorAssociatedParams;
-        const { ovalDetails, scaleFactor } = this.context.ovalAssociatedParams;
-        const { videoEl } = this.context.videoAssociatedParams;
-        const tickStartTime = Date.now();
-        // Send a colorStart time only for the first tick of the first color
-        if (this.isFirstTick) {
-            this.init();
-            this.isFirstTick = false;
-            this.sendColorStartTime({
-                tickStartTime: tickStartTime,
-                currColor: this.currColorSequence.color,
-                prevColor: this.currColorSequence.color,
-                currColorIndex: this.stageIndex,
-            });
+    recorder.ondataavailable = onDataAvailableHandler;
+    const onSessionInfoHandler = controller
+        ? (e) => {
+            const { data } = e;
+            controller.enqueue({ type: 'sessionInfo', data });
         }
-        let timeSinceLastColorChange = tickStartTime - this.timeLastFlatOrScrollChange;
-        freshnessColorEl.style.display = 'block';
-        // Every 10 ms tick we will check if the threshold for flat or scrolling, if so we will try to go to the next stage
-        if ((this.stage === COLOR_STAGE.FLAT &&
-            timeSinceLastColorChange >=
-                this.currColorSequence.flatDisplayDuration) ||
-            (this.stage === COLOR_STAGE.SCROLLING &&
-                timeSinceLastColorChange >= this.currColorSequence.downscrollDuration)) {
-            this.incrementStageIndex(tickStartTime);
-            timeSinceLastColorChange = 0;
-        }
-        // Every 10 ms tick we will update the colors displayed
-        if (this.currColorIndex < this.freshnessColorsSequence.length) {
-            const heightFraction = timeSinceLastColorChange /
-                (this.stage === COLOR_STAGE.SCROLLING
-                    ? this.currColorSequence.downscrollDuration
-                    : this.currColorSequence.flatDisplayDuration);
-            fillOverlayCanvasFractional({
-                overlayCanvas: freshnessColorEl,
-                prevColor: this.prevColorSequence.color,
-                nextColor: this.currColorSequence.color,
-                videoEl: videoEl,
-                ovalDetails: ovalDetails,
-                heightFraction,
-                scaleFactor: scaleFactor,
-            });
-            resolve(false);
+        : (e) => {
+            const { data } = e;
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_initialRecorder, "f").dispatchEvent(new MessageEvent('sessionInfo', { data }));
+        };
+    recorder.addEventListener('sessionInfo', onSessionInfoHandler);
+    const onStreamStopHandler = controller
+        ? () => {
+            controller.enqueue({ type: 'streamStop' });
         }
-        else {
-            freshnessColorEl.style.display = 'none';
-            resolve(true);
-        }
-    }
-    // FLAT - prev = 0, curr = 0
-    // SCROLL - prev = 0, curr = 1
-    // FLAT - prev = 1, curr = 1
-    // SCROLL - prev = 1, curr = 2
-    // SCROLL - prev = 2, curr = 3
-    incrementStageIndex(tickStartTime) {
-        this.stageIndex += 1;
-        this.prevColorSequence = this.freshnessColorsSequence[this.currColorIndex];
-        if (this.stage === COLOR_STAGE.FLAT) {
-            this.currColorIndex += 1;
-            this.stage = COLOR_STAGE.SCROLLING;
-        }
-        else if (this.stage === COLOR_STAGE.SCROLLING) {
-            const nextFlatColor = this.freshnessColorsSequence[this.currColorIndex];
-            if (nextFlatColor.flatDisplayDuration > 0) {
-                this.stage = COLOR_STAGE.FLAT;
-            }
-            else {
-                this.stage = COLOR_STAGE.SCROLLING;
-                this.currColorIndex += 1;
-            }
+        : () => {
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_initialRecorder, "f").dispatchEvent(new MessageEvent('streamStop'));
+        };
+    recorder.addEventListener('streamStop', onStreamStopHandler);
+    const onCloseCodeHandler = controller
+        ? (e) => {
+            const { data } = e;
+            controller.enqueue({ type: 'closeCode', data });
         }
-        this.currColorSequence = this.freshnessColorsSequence[this.currColorIndex];
-        this.timeLastFlatOrScrollChange = Date.now();
-        if (this.currColorSequence) {
-            this.sendColorStartTime({
-                tickStartTime: tickStartTime,
-                currColor: this.currColorSequence.color,
-                prevColor: this.prevColorSequence.color,
-                currColorIndex: this.stageIndex,
-            });
+        : (e) => {
+            const { data } = e;
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_initialRecorder, "f").dispatchEvent(new MessageEvent('closeCode', { data }));
+        };
+    recorder.addEventListener('closeCode', onCloseCodeHandler);
+    const onEndStreamHandler = controller
+        ? () => {
+            controller.close();
         }
-    }
-    sendColorStartTime({ tickStartTime, currColor, prevColor, currColorIndex, }) {
-        const { livenessStreamProvider, challengeId } = this.context;
-        livenessStreamProvider.sendClientInfo({
-            Challenge: {
-                FaceMovementAndLightChallenge: {
-                    ChallengeId: challengeId,
-                    ColorDisplayed: {
-                        CurrentColor: { RGB: getRGBArrayFromColorString(currColor) },
-                        PreviousColor: { RGB: getRGBArrayFromColorString(prevColor) },
-                        SequenceNumber: currColorIndex,
-                        CurrentColorStartTimestamp: tickStartTime,
-                    },
-                },
-            },
-        });
-    }
-}
+        : () => {
+            tslib.__classPrivateFieldGet(this, _StreamRecorder_initialRecorder, "f").dispatchEvent(new MessageEvent('endStream'));
+        };
+    recorder.addEventListener('endStream', onEndStreamHandler);
+    tslib.__classPrivateFieldGet(this, _StreamRecorder_instances, "m", _StreamRecorder_setupCallbacks).call(this);
+    tslib.__classPrivateFieldSet(this, _StreamRecorder_eventListeners, {
+        endStream: onEndStreamHandler,
+        closeCode: onCloseCodeHandler,
+        streamStop: onStreamStopHandler,
+        sessionInfo: onSessionInfoHandler,
+        dataavailable: onDataAvailableHandler,
+    }, "f");
+}, _StreamRecorder_setupCallbacks = function _StreamRecorder_setupCallbacks() {
+    tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").onstart = () => {
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_recordingStarted, true, "f");
+        tslib.__classPrivateFieldSet(this, _StreamRecorder_recorderStartTimestamp, Date.now(), "f");
+    };
+    tslib.__classPrivateFieldSet(this, _StreamRecorder_recorderStopped, new Promise((resolve) => {
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").onstop = () => {
+            tslib.__classPrivateFieldSet(this, _StreamRecorder_recorderEndTimestamp, Date.now(), "f");
+            resolve();
+        };
+    }), "f");
+    tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").onerror = () => {
+        this.stopRecording();
+    };
+}, _StreamRecorder_cleanUpEventListeners = function _StreamRecorder_cleanUpEventListeners() {
+    const eventNames = Object.keys(tslib.__classPrivateFieldGet(this, _StreamRecorder_eventListeners, "f"));
+    eventNames.forEach((name) => {
+        tslib.__classPrivateFieldGet(this, _StreamRecorder_recorder, "f").removeEventListener(name, tslib.__classPrivateFieldGet(this, _StreamRecorder_eventListeners, "f")[name]);
+    });
+    tslib.__classPrivateFieldSet(this, _StreamRecorder_eventListeners, {}, "f");
+};
 
-const isServerSesssionInformationEvent = (value) => {
+const isServerSessionInformationEvent = (value) => {
     return !!value
         ?.ServerSessionInformationEvent;
 };
@@ -1421,11 +1614,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,
                     },
                 });
             }
@@ -1477,21 +1670,20 @@ const responseStreamActor = async (callback) => {
         }
     }
 };
-function getLastSelectedCameraId() {
-    return localStorage.getItem(CAMERA_ID_KEY);
-}
 function setLastSelectedCameraId(deviceId) {
     localStorage.setItem(CAMERA_ID_KEY, deviceId);
 }
 const livenessMachine = xstate.createMachine({
     id: 'livenessMachine',
-    initial: 'cameraCheck',
+    initial: 'initCamera',
     predictableActionArguments: true,
     context: {
-        challengeId: nanoid.nanoid(),
+        challengeId: uuid.v4(),
+        errorMessage: undefined,
         maxFailedAttempts: 0,
         failedAttempts: 0,
         componentProps: undefined,
+        parsedSessionInformation: undefined,
         serverSessionInformation: undefined,
         videoAssociatedParams: {
             videoConstraints: STATIC_VIDEO_CONSTRAINTS,
@@ -1516,8 +1708,8 @@ const livenessMachine = xstate.createMachine({
             freshnessColorEl: undefined,
             freshnessColors: [],
             freshnessColorsComplete: false,
-            freshnessColorDisplay: undefined,
         },
+        colorSequenceDisplay: undefined,
         errorState: undefined,
         livenessStreamProvider: undefined,
         responseStreamActorRef: undefined,
@@ -1532,71 +1724,82 @@ const livenessMachine = xstate.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: {
@@ -1628,38 +1831,12 @@ const livenessMachine = xstate.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',
@@ -1686,10 +1863,7 @@ const livenessMachine = xstate.createMachine({
                 },
                 checkFaceDetected: {
                     after: {
-                        0: {
-                            target: 'cancelOvalDrawingTimeout',
-                            cond: 'hasSingleFace',
-                        },
+                        0: { target: 'cancelOvalDrawingTimeout', cond: 'hasSingleFace' },
                         100: { target: 'ovalDrawing' },
                     },
                 },
@@ -1698,18 +1872,15 @@ const livenessMachine = xstate.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' },
                     },
@@ -1730,36 +1901,41 @@ const livenessMachine = xstate.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',
@@ -1767,10 +1943,7 @@ const livenessMachine = xstate.createMachine({
                         ],
                     },
                 },
-                success: {
-                    entry: 'stopRecording',
-                    type: 'final',
-                },
+                success: { entry: 'stopRecording', type: 'final' },
             },
             onDone: 'uploading',
         },
@@ -1789,11 +1962,9 @@ const livenessMachine = xstate.createMachine({
                     },
                 },
                 waitForDisconnectEvent: {
+                    entry: () => { },
                     after: {
-                        0: {
-                            target: 'getLivenessResult',
-                            cond: 'getShouldDisconnect',
-                        },
+                        0: { cond: 'getShouldDisconnect', target: 'getLivenessResult' },
                         100: { target: 'waitForDisconnectEvent' },
                     },
                 },
@@ -1812,16 +1983,13 @@ const livenessMachine = xstate.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',
@@ -1842,7 +2010,7 @@ const livenessMachine = xstate.createMachine({
         },
         userCancel: {
             entry: ['cleanUpResources', 'callUserCancelCallback', 'resetContext'],
-            always: { target: 'cameraCheck' },
+            always: { target: 'initCamera' },
         },
     },
 }, {
@@ -1892,6 +2060,7 @@ const livenessMachine = xstate.createMachine({
         updateDeviceAndStream: xstate.assign({
             videoAssociatedParams: (context, event) => {
                 setLastSelectedCameraId(event.data?.newDeviceId);
+                context.livenessStreamProvider?.setNewVideoStream(event.data?.newStream);
                 return {
                     ...context.videoAssociatedParams,
                     selectedDeviceId: event.data
@@ -1901,62 +2070,32 @@ const livenessMachine = xstate.createMachine({
                 };
             },
         }),
-        drawStaticOval: (context) => {
-            const { canvasEl, videoEl, videoMediaStream } = context.videoAssociatedParams;
-            drawStaticOval(canvasEl, videoEl, videoMediaStream);
-        },
-        updateRecordingStartTimestampMs: xstate.assign({
+        updateRecordingStartTimestamp: xstate.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: xstate.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 };
             },
@@ -2036,8 +2175,9 @@ const livenessMachine = xstate.createMachine({
         }),
         clearErrorState: xstate.assign({ errorState: (_) => undefined }),
         updateSessionInfo: xstate.assign({
-            serverSessionInformation: (_, event) => {
-                return event.data.sessionInfo;
+            parsedSessionInformation: (_, event) => {
+                const { serverSessionInformation } = event.data;
+                return createSessionInfoFromServerSessionInformation(serverSessionInformation);
             },
         }),
         updateShouldDisconnect: xstate.assign({ shouldDisconnect: () => true }),
@@ -2050,47 +2190,26 @@ const livenessMachine = xstate.createMachine({
                 };
             },
         }),
-        setupFlashFreshnessColors: xstate.assign({
-            freshnessColorAssociatedParams: (context) => {
-                const { serverSessionInformation } = context;
-                const freshnessColors = getColorsSequencesFromSessionInformation(serverSessionInformation);
-                const freshnessColorDisplay = new FreshnessColorDisplay(context, freshnessColors);
-                return {
-                    ...context.freshnessColorAssociatedParams,
-                    freshnessColorDisplay,
-                };
-            },
+        setColorDisplay: xstate.assign({
+            colorSequenceDisplay: ({ parsedSessionInformation }) => new ColorSequenceDisplay(getColorsSequencesFromSessionInformation(parsedSessionInformation)),
         }),
         // timeouts
         sendTimeoutAfterOvalDrawingDelay: xstate.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: xstate.actions.cancel('ovalDrawingTimeout'),
         sendTimeoutAfterRecordingDelay: xstate.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: xstate.actions.cancel('recordingTimeout'),
         sendTimeoutAfterOvalMatchDelay: xstate.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',
@@ -2143,21 +2262,26 @@ const livenessMachine = xstate.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;
@@ -2173,15 +2297,13 @@ const livenessMachine = xstate.createMachine({
             videoEl.pause();
         },
         resetContext: xstate.assign({
-            challengeId: nanoid.nanoid(),
+            challengeId: uuid.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,
@@ -2212,21 +2334,30 @@ const livenessMachine = xstate.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;
@@ -2236,12 +2367,8 @@ const livenessMachine = xstate.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();
@@ -2270,10 +2397,7 @@ const livenessMachine = xstate.createMachine({
             let realVideoDeviceStream = initialStream;
             if (!isInitialStreamFromRealDevice) {
                 realVideoDeviceStream = await navigator.mediaDevices.getUserMedia({
-                    video: {
-                        ...videoConstraints,
-                        deviceId: { exact: deviceId },
-                    },
+                    video: { ...videoConstraints, deviceId: { exact: deviceId } },
                     audio: false,
                 });
             }
@@ -2286,18 +2410,25 @@ const livenessMachine = xstate.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) {
@@ -2316,54 +2447,34 @@ const livenessMachine = xstate.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
@@ -2412,11 +2523,17 @@ const livenessMachine = xstate.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;
@@ -2428,15 +2545,10 @@ const livenessMachine = xstate.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
@@ -2445,7 +2557,13 @@ const livenessMachine = xstate.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) {
@@ -2462,7 +2580,7 @@ const livenessMachine = xstate.createMachine({
                         face: detectedFace,
                         ovalDetails: ovalDetails,
                         initialFaceIntersection,
-                        sessionInformation: serverSessionInformation,
+                        parsedSessionInformation: parsedSessionInformation,
                         frameHeight: videoEl.videoHeight,
                     });
                     faceMatchState = faceMatchStateInLivenessOval;
@@ -2482,60 +2600,63 @@ const livenessMachine = xstate.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;
@@ -2612,6 +2733,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";
@@ -2651,6 +2774,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 = {}));
@@ -2708,7 +2832,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');
@@ -2748,9 +2871,6 @@ const Hint = ({ hintDisplayText }) => {
             isFaceFarEnoughBeforeRecordingState === false) {
             return React__namespace.createElement(DefaultToast, { text: hintDisplayText.hintTooCloseText });
         }
-        if (isNotRecording) {
-            return (React__namespace.createElement(ToastWithLoader, { displayText: hintDisplayText.hintConnectingText }));
-        }
         if (isUploading) {
             return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(uiReact.VisuallyHidden, { "aria-live": "assertive" }, hintDisplayText.hintCheckCompleteText),
@@ -2821,6 +2941,40 @@ const RecordingIcon = ({ children }) => {
         React__namespace["default"].createElement(uiReact.Text, { as: "span", fontWeight: "bold" }, children)));
 };
 
+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;
+}
+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
+ * media query detection to listen for changes instead.
+ * @returns MediaQueryList object
+ */
+function getLandscapeMediaQuery() {
+    return window.matchMedia('(orientation: landscape)');
+}
+
 const defaultErrorDisplayText = {
     errorLabelText: 'Error',
     connectionTimeoutHeaderText: 'Connection time out',
@@ -2999,13 +3153,21 @@ const DefaultCancelButton = ({ cancelLivenessCheckText, }) => {
         React__namespace["default"].createElement(CancelButton, { ariaLabel: cancelLivenessCheckText })));
 };
 
+const CameraSelector = (props) => {
+    const { onSelect: onCameraChange, devices: selectableDevices, deviceId: selectedDeviceId, } = props;
+    return (React__namespace["default"].createElement(uiReact.Flex, { className: LivenessClassNames.StartScreenCameraSelect },
+        React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
+            React__namespace["default"].createElement(uiReact.Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
+            React__namespace["default"].createElement(uiReact.SelectField, { id: "amplify-liveness-camera-select", testId: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices.map((device) => (React__namespace["default"].createElement("option", { value: device.deviceId, key: device.deviceId }, device.label)))))));
+};
+
+const selectChallengeType = createLivenessSelector((state) => state.context.parsedSessionInformation?.Challenge?.Name);
 const selectVideoConstraints = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoConstraints);
 const selectVideoStream = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoMediaStream);
 const selectFaceMatchPercentage = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchPercentage);
 const selectFaceMatchState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchState);
 const selectSelectedDeviceId = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectedDeviceId);
 const selectSelectableDevices = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectableDevices);
-const centeredLoader = (React__namespace["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }));
 const showMatchIndicatorStates = [
     FaceMatchState.TOO_FAR,
     FaceMatchState.CANT_IDENTIFY,
@@ -3023,6 +3185,7 @@ const LivenessCameraModule = (props) => {
     const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
     const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, } = customComponents ?? {};
     const [state, send] = useLivenessActor();
+    const isFaceMovementChallenge = useLivenessSelector(selectChallengeType) === FACE_MOVEMENT_CHALLENGE.type;
     const videoStream = useLivenessSelector(selectVideoStream);
     const videoConstraints = useLivenessSelector(selectVideoConstraints);
     const selectedDeviceId = useLivenessSelector(selectSelectedDeviceId);
@@ -3035,8 +3198,14 @@ const LivenessCameraModule = (props) => {
     const canvasRef = React.useRef(null);
     const freshnessColorRef = React.useRef(null);
     const [isCameraReady, setIsCameraReady] = React.useState(false);
-    const isCheckingCamera = state.matches('cameraCheck');
-    const isWaitingForCamera = state.matches('waitForDOMAndCameraDetails');
+    const [isMetadataLoaded, setIsMetadataLoaded] = React.useState(false);
+    const [isCameraUserFacing, setIsCameraUserFacing] = React.useState(true);
+    const isInitCamera = state.matches('initCamera');
+    const isInitWebsocket = state.matches('initWebsocket');
+    const isCheckingCamera = state.matches({ initCamera: 'cameraCheck' });
+    const isWaitingForCamera = state.matches({
+        initCamera: 'waitForDOMAndCameraDetails',
+    });
     const isStartView = state.matches('start') || state.matches('userCancel');
     const isDetectFaceBeforeStart = state.matches('detectFaceBeforeStart');
     const isRecording = state.matches('recording');
@@ -3050,18 +3219,29 @@ const LivenessCameraModule = (props) => {
     const [mediaWidth, setMediaWidth] = React.useState(videoWidth);
     const [mediaHeight, setMediaHeight] = React.useState(videoHeight);
     const [aspectRatio, setAspectRatio] = React.useState(() => videoWidth && videoHeight ? videoWidth / videoHeight : 0);
+    // Only mobile device camera selection for no light challenge
+    const hasMultipleDevices = !!selectableDevices?.length && selectableDevices.length > 1;
+    const allowDeviceSelection = isStartView &&
+        hasMultipleDevices &&
+        (!isMobileScreen || isFaceMovementChallenge);
     React__namespace["default"].useEffect(() => {
-        if (canvasRef?.current && videoRef?.current && videoStream && isStartView) {
-            drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+        async function checkCameraFacing() {
+            const isUserFacing = await isDeviceUserFacing(selectedDeviceId);
+            setIsCameraUserFacing(isUserFacing);
         }
-    }, [canvasRef, videoRef, videoStream, colorMode, isStartView]);
+        checkCameraFacing();
+    }, [selectedDeviceId]);
     React__namespace["default"].useEffect(() => {
+        const shouldDrawOval = canvasRef?.current &&
+            videoRef?.current &&
+            videoStream &&
+            isStartView &&
+            isMetadataLoaded;
+        if (shouldDrawOval) {
+            drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+        }
         const updateColorModeHandler = (e) => {
-            if (e.matches &&
-                canvasRef?.current &&
-                videoRef?.current &&
-                videoStream &&
-                isStartView) {
+            if (e.matches && shouldDrawOval) {
                 drawStaticOval(canvasRef.current, videoRef.current, videoStream);
             }
         };
@@ -3073,7 +3253,7 @@ const LivenessCameraModule = (props) => {
             darkModePreference.removeEventListener('change', updateColorModeHandler);
             lightModePreference.addEventListener('change', updateColorModeHandler);
         };
-    }, [canvasRef, videoRef, videoStream, isStartView]);
+    }, [videoRef, videoStream, colorMode, isStartView, isMetadataLoaded]);
     React__namespace["default"].useLayoutEffect(() => {
         if (isCameraReady) {
             send({
@@ -3104,6 +3284,9 @@ const LivenessCameraModule = (props) => {
     const handleMediaPlay = () => {
         setIsCameraReady(true);
     };
+    const handleLoadedMetadata = () => {
+        setIsMetadataLoaded(true);
+    };
     const beginLivenessCheck = React__namespace["default"].useCallback(() => {
         send({
             type: 'BEGIN',
@@ -3112,6 +3295,7 @@ const LivenessCameraModule = (props) => {
     const onCameraChange = React__namespace["default"].useCallback((e) => {
         const newDeviceId = e.target.value;
         const changeCamera = async () => {
+            setIsMetadataLoaded(false);
             const newStream = await navigator.mediaDevices.getUserMedia({
                 video: {
                     ...videoConstraints,
@@ -3128,16 +3312,19 @@ const LivenessCameraModule = (props) => {
     }, [videoConstraints, send]);
     if (isCheckingCamera) {
         return (React__namespace["default"].createElement(uiReact.Flex, { justifyContent: 'center', className: LivenessClassNames.StartScreenCameraWaiting },
-            React__namespace["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
+            React__namespace["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.CenteredLoader, "data-testid": "centered-loader", position: "unset" }),
             React__namespace["default"].createElement(uiReact.Text, { fontSize: "large", fontWeight: "bold", "data-testid": "waiting-camera-permission", className: `${LivenessClassNames.StartScreenCameraWaiting}__text` }, cameraDisplayText.waitingCameraPermissionText)));
     }
+    const shouldShowCenteredLoader = isInitCamera || isInitWebsocket;
     // We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera)
-    const shouldShowFullScreenCamera = isMobileScreen && !isStartView && !isWaitingForCamera;
+    const shouldShowFullScreenCamera = isMobileScreen && !isStartView && !shouldShowCenteredLoader;
     return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
-        photoSensitivityWarning,
+        !isFaceMovementChallenge && photoSensitivityWarning,
+        shouldShowCenteredLoader && (React__namespace["default"].createElement(uiReact.Flex, { className: LivenessClassNames.ConnectingLoader },
+            React__namespace["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }),
+            React__namespace["default"].createElement(uiReact.Text, { className: LivenessClassNames.LandscapeErrorModalHeader }, hintDisplayText.hintConnectingText))),
         React__namespace["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.CameraModule, shouldShowFullScreenCamera &&
                 `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
-            !isCameraReady && centeredLoader,
             React__namespace["default"].createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
                 isRecording && (React__namespace["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
                 !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__namespace["default"].createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
@@ -3156,17 +3343,11 @@ const LivenessCameraModule = (props) => {
             React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
                     aspectRatio: `${aspectRatio}`,
                 } },
-                React__namespace["default"].createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: ui.classNames(LivenessClassNames.Video, isRecordingStopped && LivenessClassNames.FadeOut), "aria-label": cameraDisplayText.a11yVideoLabelText }),
+                React__namespace["default"].createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, onLoadedMetadata: handleLoadedMetadata, "data-testid": "video", className: ui.classNames(LivenessClassNames.Video, isCameraUserFacing && LivenessClassNames.UserFacingVideo, isRecordingStopped && LivenessClassNames.FadeOut), "aria-label": cameraDisplayText.a11yVideoLabelText }),
                 React__namespace["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, shouldShowFullScreenCamera &&
                         `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
                     React__namespace["default"].createElement(uiReact.View, { as: "canvas", ref: canvasRef })),
-                isStartView &&
-                    !isMobileScreen &&
-                    selectableDevices &&
-                    selectableDevices.length > 1 && (React__namespace["default"].createElement(uiReact.Flex, { className: LivenessClassNames.StartScreenCameraSelect },
-                    React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
-                        React__namespace["default"].createElement(uiReact.Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
-                        React__namespace["default"].createElement(uiReact.SelectField, { id: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices?.map((device) => (React__namespace["default"].createElement("option", { value: device.deviceId, key: device.deviceId }, device.label))))))))),
+                allowDeviceSelection ? (React__namespace["default"].createElement(CameraSelector, { onSelect: onCameraChange, devices: selectableDevices, deviceId: selectedDeviceId })) : null)),
         isStartView && (React__namespace["default"].createElement(uiReact.Flex, { justifyContent: "center" },
             React__namespace["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
 };