@aws-amplify/ui-react-liveness 3.6.9 → 3.7.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useInterpret } from '@xstate/react';
 import { livenessMachine } from './service/machine/machine.mjs';
-import './service/utils/constants.mjs';
+import { WS_CLOSURE_CODE } from './service/utils/constants.mjs';
 import './service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '../../packages/react-liveness/node_modules/@tensorflow-models/face-detection/dist/face-detection.esm.mjs';
@@ -12,6 +12,7 @@ import './service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
 import '@aws-amplify/ui';
 import './service/utils/createStreamingClient/createStreamingClient.mjs';
 import './service/utils/StreamRecorder/StreamRecorder.mjs';
+import { closeLivenessStream } from './service/utils/closeLivenessStream.mjs';
 import { View, Flex } from '@aws-amplify/ui-react';
 import { FaceLivenessDetectorProvider } from './providers/FaceLivenessDetectorProvider.mjs';
 import { LivenessCheck } from './LivenessCheck/LivenessCheck.mjs';
@@ -31,6 +32,22 @@ function FaceLivenessDetectorCore(props) {
             },
         },
     });
+    React.useEffect(() => {
+        // Track the stream provider as the state changes: by the time this
+        // effect is cleaned up, the service has been stopped and reset.
+        let livenessStreamProvider;
+        const { unsubscribe } = service.subscribe(({ context }) => {
+            ({ livenessStreamProvider } = context);
+        });
+        return () => {
+            unsubscribe();
+            // Unmounting mid-check (e.g. the host modal is closed) bypasses the
+            // CANCEL event, so close the stream the same way the cancel button does
+            if (livenessStreamProvider?.isRecording()) {
+                closeLivenessStream(livenessStreamProvider, WS_CLOSURE_CODE.USER_CANCEL);
+            }
+        };
+    }, [service]);
     return (React.createElement(View, { className: DETECTOR_CLASS_NAME, testId: DETECTOR_CLASS_NAME },
         React.createElement(FaceLivenessDetectorProvider, { componentProps: props, service: service },
             React.createElement(Flex, { direction: "column", ref: currElementRef },

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

@@ -10,7 +10,7 @@ import '../../../packages/react-liveness/node_modules/@tensorflow-models/face-de
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import { drawStaticOval, clearOvalCanvas } from '../service/utils/liveness.mjs';
+import { drawStaticOval, getVideoFillLayout, clearOvalCanvas } from '../service/utils/liveness.mjs';
 import '../service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
 import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/StreamRecorder/StreamRecorder.mjs';
@@ -32,7 +32,11 @@ const selectVideoStream = createLivenessSelector((state) => state.context.videoA
 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 selectDisableStartScreen = createLivenessSelector((state) => state.context.componentProps?.disableStartScreen);
 const selectSelectableDevices = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectableDevices);
+// how long the video size must be stable during recording before the session
+// oval is redrawn
+const VIDEO_RESIZED_DEBOUNCE_MS = 100;
 const showMatchIndicatorStates = [
     FaceMatchState.TOO_FAR,
     FaceMatchState.CANT_IDENTIFY,
@@ -48,7 +52,7 @@ const MemoizedMatchIndicator = React__default.memo(MatchIndicator);
 const LivenessCameraModule = (props) => {
     const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
     const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
-    const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, } = customComponents ?? {};
+    const { ErrorView = FaceLivenessErrorModal, PhotosensitiveWarning = DefaultPhotosensitiveWarning, CancelButton, } = customComponents ?? {};
     const [state, send] = useLivenessActor();
     const isFaceMovementChallenge = useLivenessSelector(selectChallengeType) === FACE_MOVEMENT_CHALLENGE.type;
     const videoStream = useLivenessSelector(selectVideoStream);
@@ -58,9 +62,11 @@ const LivenessCameraModule = (props) => {
     const faceMatchPercentage = useLivenessSelector(selectFaceMatchPercentage);
     const faceMatchState = useLivenessSelector(selectFaceMatchState);
     const errorState = useLivenessSelector(selectErrorState);
+    const disableStartScreen = useLivenessSelector(selectDisableStartScreen);
     const colorMode = useColorMode();
     const { videoRef, videoWidth, videoHeight } = useMediaStreamInVideo(videoStream);
     const canvasRef = useRef(null);
+    const videoAnchorRef = useRef(null);
     const freshnessColorRef = useRef(null);
     const [isCameraReady, setIsCameraReady] = useState(false);
     const [isMetadataLoaded, setIsMetadataLoaded] = useState(false);
@@ -119,6 +125,84 @@ const LivenessCameraModule = (props) => {
             lightModePreference.addEventListener('change', updateColorModeHandler);
         };
     }, [videoRef, videoStream, colorMode, isStartView, isMetadataLoaded]);
+    // Size the video to fill the anchor, which grows to fill the host container
+    // when the host gives it a height (e.g. a modal body)
+    const layoutVideo = React__default.useCallback(() => {
+        const anchor = videoAnchorRef.current;
+        const video = videoRef.current;
+        if (!anchor || !video?.videoWidth || !video.videoHeight) {
+            return;
+        }
+        const { width, height, left, top } = getVideoFillLayout({
+            containerWidth: anchor.clientWidth,
+            containerHeight: anchor.clientHeight,
+            videoWidth: video.videoWidth,
+            videoHeight: video.videoHeight,
+        });
+        video.style.width = `${width}px`;
+        video.style.height = `${height}px`;
+        video.style.left = `${left}px`;
+        video.style.top = `${top}px`;
+    }, [videoRef]);
+    // Keep the oval aligned with the video when the host container resizes,
+    // e.g. a modal open animation or a responsive layout change. Kept in a ref
+    // so the observer below always calls the latest version.
+    const redrawOnResizeRef = React__default.useRef();
+    const recordingResizeTimeoutRef = React__default.useRef(null);
+    React__default.useLayoutEffect(() => {
+        redrawOnResizeRef.current = () => {
+            layoutVideo();
+            if (isStartView && isMetadataLoaded && canvasRef.current && videoStream) {
+                drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+            }
+            else if (isRecording) {
+                // the video is laid out every frame above; only redraw the session
+                // oval once the size settles to avoid a machine transition per frame
+                if (recordingResizeTimeoutRef.current) {
+                    clearTimeout(recordingResizeTimeoutRef.current);
+                }
+                recordingResizeTimeoutRef.current = setTimeout(() => {
+                    recordingResizeTimeoutRef.current = null;
+                    send({ type: 'VIDEO_RESIZED' });
+                }, VIDEO_RESIZED_DEBOUNCE_MS);
+            }
+        };
+    });
+    React__default.useEffect(() => {
+        const anchor = videoAnchorRef.current;
+        if (!anchor || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        let lastWidth;
+        let lastHeight;
+        let frameId;
+        const resizeObserver = new ResizeObserver(() => {
+            const { clientWidth, clientHeight } = anchor;
+            if (clientWidth === lastWidth && clientHeight === lastHeight) {
+                return;
+            }
+            lastWidth = clientWidth;
+            lastHeight = clientHeight;
+            // coalesce into a single redraw per frame
+            frameId ?? (frameId = requestAnimationFrame(() => {
+                frameId = undefined;
+                redrawOnResizeRef.current?.();
+            }));
+        });
+        resizeObserver.observe(anchor);
+        return () => {
+            resizeObserver.disconnect();
+            if (frameId !== undefined) {
+                cancelAnimationFrame(frameId);
+            }
+            if (recordingResizeTimeoutRef.current) {
+                clearTimeout(recordingResizeTimeoutRef.current);
+            }
+        };
+        // The camera permission check returns early (below) without rendering the
+        // video anchor, so the ref is only set once `isCheckingCamera` is false;
+        // re-run then to start observing the newly mounted anchor.
+    }, [isCheckingCamera]);
     React__default.useLayoutEffect(() => {
         if (isCameraReady) {
             send({
@@ -150,6 +234,7 @@ const LivenessCameraModule = (props) => {
         setIsCameraReady(true);
     };
     const handleLoadedMetadata = () => {
+        layoutVideo();
         setIsMetadataLoaded(true);
     };
     const beginLivenessCheck = React__default.useCallback(() => {
@@ -184,7 +269,9 @@ const LivenessCameraModule = (props) => {
     // We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera)
     const shouldShowFullScreenCamera = isMobileScreen && !isStartView && !shouldShowCenteredLoader;
     return (React__default.createElement(React__default.Fragment, null,
-        !isFaceMovementChallenge && photoSensitivityWarning,
+        !isFaceMovementChallenge &&
+            !disableStartScreen &&
+            photoSensitivityWarning,
         shouldShowCenteredLoader && (React__default.createElement(Flex, { className: LivenessClassNames.ConnectingLoader },
             React__default.createElement(Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }),
             React__default.createElement(Text, { className: LivenessClassNames.LandscapeErrorModalHeader }, hintDisplayText.hintConnectingText))),
@@ -192,7 +279,10 @@ const LivenessCameraModule = (props) => {
                 `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
             React__default.createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
                 isRecording && (React__default.createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
-                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default.createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
+                !isStartView &&
+                    !isWaitingForCamera &&
+                    !isCheckSucceeded &&
+                    CancelButton !== null && (React__default.createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText, CancelButton: CancelButton })),
                 React__default.createElement(Flex, { className: classNames(LivenessClassNames.Hint, shouldShowFullScreenCamera && `${LivenessClassNames.Hint}--mobile`) },
                     React__default.createElement(Hint, { hintDisplayText: hintDisplayText })),
                 errorState && (React__default.createElement(ErrorView, { onRetry: () => {
@@ -205,7 +295,7 @@ const LivenessCameraModule = (props) => {
                     !isFlashingFreshness &&
                     showMatchIndicatorStates.includes(faceMatchState) ? (React__default.createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
             React__default.createElement(View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
-            React__default.createElement(View, { className: LivenessClassNames.VideoAnchor, style: {
+            React__default.createElement(View, { ref: videoAnchorRef, className: LivenessClassNames.VideoAnchor, style: {
                     aspectRatio: `${aspectRatio}`,
                 } },
                 React__default.createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, onLoadedMetadata: handleLoadedMetadata, "data-testid": "video", className: classNames(LivenessClassNames.Video, isCameraUserFacing && LivenessClassNames.UserFacingVideo, isRecordingStopped && LivenessClassNames.FadeOut), "aria-label": cameraDisplayText.a11yVideoLabelText }),
@@ -217,4 +307,4 @@ const LivenessCameraModule = (props) => {
             React__default.createElement(Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
 };
 
-export { LivenessCameraModule, selectChallengeType, selectFaceMatchPercentage, selectFaceMatchState, selectSelectableDevices, selectSelectedDeviceId, selectVideoConstraints, selectVideoStream };
+export { LivenessCameraModule, selectChallengeType, selectDisableStartScreen, selectFaceMatchPercentage, selectFaceMatchState, selectSelectableDevices, selectSelectedDeviceId, selectVideoConstraints, selectVideoStream };

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

@@ -81,8 +81,8 @@ const LivenessCheck = ({ instructionDisplayText, hintDisplayText, cameraDisplayT
                     ? cameraMinSpecificationsMessageText
                     : cameraNotFoundMessageText),
                 React.createElement(Button, { variation: "primary", type: "button", onClick: recheckCameraPermissions }, retryCameraPermissionsText),
-                React.createElement(View, { position: "absolute", top: "medium", right: "medium" },
-                    React.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText }))));
+                components?.CancelButton !== null && (React.createElement(View, { position: "absolute", top: "medium", right: "medium" },
+                    React.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText, Component: components?.CancelButton })))));
         }
         else {
             return (React.createElement(LivenessCameraModule, { isMobileScreen: isMobile, isRecordingStopped: isRecordingStopped, instructionDisplayText: instructionDisplayText, streamDisplayText: streamDisplayText, hintDisplayText: hintDisplayText, errorDisplayText: errorDisplayText, cameraDisplayText: cameraDisplayText, components: components }));

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

@@ -1,6 +1,6 @@
 import { v4 } from 'uuid';
 import { createMachine, assign, actions, spawn } from 'xstate';
-import { fillOverlayCanvasFractional, generateBboxFromLandmarks, getOvalBoundingBox, getIntersectionOverUnion, estimateIllumination, getOvalDetailsFromSessionInformation, drawLivenessOvalInCanvas, getStaticLivenessOvalDetails, isFaceDistanceBelowThreshold, getFaceMatchState, isCameraDeviceVirtual, getColorsSequencesFromSessionInformation } from '../utils/liveness.mjs';
+import { fillOverlayCanvasFractional, getVideoScaleFactor, generateBboxFromLandmarks, getOvalBoundingBox, getIntersectionOverUnion, estimateIllumination, resizeCanvasToDisplaySize, getOvalDetailsFromSessionInformation, drawLivenessOvalInCanvas, getStaticLivenessOvalDetails, isFaceDistanceBelowThreshold, getFaceMatchState, isCameraDeviceVirtual, getColorsSequencesFromSessionInformation } from '../utils/liveness.mjs';
 import { FACE_MOVEMENT_AND_LIGHT_CHALLENGE, FACE_MOVEMENT_CHALLENGE, WS_CLOSURE_CODE } from '../utils/constants.mjs';
 import { FaceMatchState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
@@ -12,6 +12,7 @@ import { createSessionEndEvent, getTrackDimensions, createColorDisplayEvent, cre
 import { createStreamingClient } from '../utils/createStreamingClient/createStreamingClient.mjs';
 import { createSessionInfoFromServerSessionInformation } from '../utils/sessionInformation.mjs';
 import { StreamRecorder } from '../utils/StreamRecorder/StreamRecorder.mjs';
+import { closeLivenessStream } from '../utils/closeLivenessStream.mjs';
 import { isServerSessionInformationEvent, isDisconnectionEvent, isValidationExceptionEvent, isInternalServerExceptionEvent, isThrottlingExceptionEvent, isServiceQuotaExceededExceptionEvent, isInvalidSignatureRegionException, isConnectionTimeoutError } from '../utils/responseStreamEvent.mjs';
 import { STATIC_VIDEO_CONSTRAINTS } from '../../utils/helpers.mjs';
 import { TelemetryReporter } from '../utils/TelemetryReporter/TelemetryReporter.mjs';
@@ -279,6 +280,12 @@ const livenessMachine = createMachine({
                 'sendTimeoutAfterOvalDrawingDelay',
             ],
             initial: 'ovalDrawing',
+            on: {
+                VIDEO_RESIZED: {
+                    internal: true,
+                    actions: ['updateOvalScaleFactor', 'redrawLivenessOval'],
+                },
+            },
             states: {
                 ovalDrawing: {
                     invoke: {
@@ -551,6 +558,34 @@ const livenessMachine = createMachine({
             isFaceFarEnoughBeforeRecording: (_, event) => !!event.data.isFaceFarEnoughBeforeRecording,
             errorState: (_, event) => event.data?.error,
         }),
+        // The oval is drawn once per check; keep it aligned when the host
+        // container resizes after it has been drawn (e.g. modal open animation).
+        updateOvalScaleFactor: assign({
+            ovalAssociatedParams: (context) => {
+                const { videoEl } = context.videoAssociatedParams ?? {};
+                if (!context.ovalAssociatedParams?.ovalDetails || !videoEl) {
+                    return context.ovalAssociatedParams;
+                }
+                return {
+                    ...context.ovalAssociatedParams,
+                    scaleFactor: getVideoScaleFactor(videoEl),
+                };
+            },
+        }),
+        redrawLivenessOval: (context) => {
+            const { videoEl, canvasEl } = context.videoAssociatedParams ?? {};
+            const { ovalDetails, scaleFactor } = context.ovalAssociatedParams ?? {};
+            if (!videoEl || !canvasEl || !ovalDetails || !scaleFactor) {
+                return;
+            }
+            resizeCanvasToDisplaySize(canvasEl);
+            drawLivenessOvalInCanvas({
+                canvas: canvasEl,
+                oval: ovalDetails,
+                scaleFactor,
+                videoEl,
+            });
+        },
         updateOvalAndFaceDetailsPostDraw: assign({
             ovalAssociatedParams: (context, event) => ({
                 ...context.ovalAssociatedParams,
@@ -730,12 +765,7 @@ const livenessMachine = createMachine({
             else if (context.errorState === undefined) {
                 closeCode = WS_CLOSURE_CODE.USER_CANCEL;
             }
-            context.livenessStreamProvider?.stopRecording().then(() => {
-                context.livenessStreamProvider?.dispatchStreamEvent({
-                    type: 'closeCode',
-                    data: { closeCode },
-                });
-            });
+            closeLivenessStream(context.livenessStreamProvider, closeCode);
         },
         freezeStream: (context) => {
             const { videoMediaStream, videoEl } = context.videoAssociatedParams;
@@ -967,7 +997,7 @@ const livenessMachine = createMachine({
         },
         async detectInitialFaceAndDrawOval(context) {
             const { parsedSessionInformation } = context;
-            const { videoEl, canvasEl, isMobile } = context.videoAssociatedParams;
+            const { videoEl, canvasEl } = context.videoAssociatedParams;
             const { faceDetector } = context.ovalAssociatedParams;
             // initialize models
             await faceDetector.modelLoadingPromise;
@@ -998,20 +1028,12 @@ const livenessMachine = createMachine({
             if (!initialFace) {
                 return { faceMatchState, illuminationState };
             }
-            // Get width/height of video element so we can compute scaleFactor
-            // and set canvas width/height.
-            const { width: videoScaledWidth, height: videoScaledHeight } = videoEl.getBoundingClientRect();
-            if (isMobile) {
-                canvasEl.width = window.innerWidth;
-                canvasEl.height = window.innerHeight;
-            }
-            else {
-                canvasEl.width = videoScaledWidth;
-                canvasEl.height = videoScaledHeight;
-            }
+            // Size the canvas to its container: the full screen on mobile and the
+            // video element otherwise.
+            resizeCanvasToDisplaySize(canvasEl);
             // Compute scaleFactor which is how much our video element is scaled
             // vs the intrinsic video resolution
-            const scaleFactor = videoScaledWidth / videoEl.videoWidth;
+            const scaleFactor = getVideoScaleFactor(videoEl);
             // generate oval details from initialFace and video dimensions
             const ovalDetails = getOvalDetailsFromSessionInformation({
                 parsedSessionInformation: parsedSessionInformation,
@@ -1096,7 +1118,7 @@ const livenessMachine = createMachine({
             if (freshnessColorsComplete) {
                 return;
             }
-            const { ovalDetails, scaleFactor } = ovalAssociatedParams;
+            const { ovalDetails } = ovalAssociatedParams;
             const { videoEl } = videoAssociatedParams;
             const completed = await colorSequenceDisplay.startSequences({
                 onSequenceColorChange: ({ sequenceColor, prevSequenceColor, heightFraction, }) => {
@@ -1106,7 +1128,8 @@ const livenessMachine = createMachine({
                         ovalDetails: ovalDetails,
                         nextColor: sequenceColor,
                         prevColor: prevSequenceColor,
-                        scaleFactor: scaleFactor,
+                        // read per frame so a resize during the sequence stays aligned
+                        scaleFactor: getVideoScaleFactor(videoEl),
                         videoEl: videoEl,
                     });
                 },

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

@@ -0,0 +1,28 @@
+/**
+ * Stops recording and sends `closeCode` to the streaming service so the
+ * session is closed with a reason instead of being left to time out.
+ *
+ * Only call this once recording has started: `stopRecording()` resolves when
+ * the recorder stops, so if it never started the close code is not sent.
+ */
+function closeLivenessStream(livenessStreamProvider, closeCode) {
+    livenessStreamProvider
+        ?.stopRecording()
+        .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Error stopping liveness recording:', error);
+    })
+        // send the close code even if stopping failed so the session still ends
+        .then(() => {
+        livenessStreamProvider.dispatchStreamEvent({
+            type: 'closeCode',
+            data: { closeCode },
+        });
+    })
+        .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Error sending liveness close code:', error);
+    });
+}
+
+export { closeLivenessStream };

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

@@ -91,12 +91,59 @@ function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXS
         height: Math.floor(ovalHeight),
     };
 }
+/**
+ * Returns how much the intrinsic video frame is scaled inside the rendered
+ * video element. The video element uses the default `object-fit: contain`,
+ * so when the host container gives it a box that does not match the camera
+ * aspect ratio the frame is letterboxed and the smaller ratio applies.
+ */
+function getVideoScaleFactor(videoEl) {
+    // layout size, unaffected by CSS transforms such as a modal zoom animation
+    const { clientWidth: width, clientHeight: height } = videoEl;
+    const { videoWidth, videoHeight } = videoEl;
+    if (!videoWidth || !videoHeight) {
+        return 1;
+    }
+    return Math.min(width / videoWidth, height / videoHeight);
+}
+// When filling a container taller than the camera frame, the frame is scaled
+// up and cropped on the sides. Keep at least this fraction of the frame width
+// visible so the liveness oval (centered, ~45% of the frame width) is never
+// cropped. The frame is never cropped vertically since the oval spans nearly
+// the full frame height.
+const MIN_VISIBLE_FRAME_WIDTH_FRACTION = 0.7;
+/**
+ * Returns the size and position of the video element so the camera frame
+ * fills as much of its container as possible without cropping the oval.
+ */
+function getVideoFillLayout({ containerWidth, containerHeight, videoWidth, videoHeight, }) {
+    const scale = Math.min(containerHeight / videoHeight, containerWidth / (videoWidth * MIN_VISIBLE_FRAME_WIDTH_FRACTION));
+    const width = videoWidth * scale;
+    const height = videoHeight * scale;
+    return {
+        width,
+        height,
+        left: (containerWidth - width) / 2,
+        top: (containerHeight - height) / 2,
+    };
+}
+/**
+ * Sizes the canvas drawing buffer to match its parent's box: the full screen
+ * on mobile and the video anchor box otherwise. The anchor can differ from the
+ * video element's box, which is centered in it and may be letterboxed or
+ * cropped on the sides.
+ */
+function resizeCanvasToDisplaySize(canvas) {
+    const { clientWidth, clientHeight } = canvas.parentElement ?? canvas;
+    canvas.width = Math.ceil(clientWidth);
+    canvas.height = Math.ceil(clientHeight);
+}
 /**
  * Draws the provided liveness oval on the canvas.
  */
 function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartScreen, }) {
     const { flippedCenterX, centerY, width, height } = oval;
-    const { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
+    const { width: canvasWidth, height: canvasHeight } = canvas;
     const ctx = canvas.getContext('2d');
     if (ctx) {
         ctx.restore();
@@ -137,11 +184,7 @@ function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartS
 }
 function drawStaticOval(canvasEl, videoEl, videoMediaStream) {
     const { width, height } = videoMediaStream.getTracks()[0].getSettings();
-    // Get width/height of video element so we can compute scaleFactor
-    // and set canvas width/height.
-    const { width: videoScaledWidth, height: videoScaledHeight } = videoEl.getBoundingClientRect();
-    canvasEl.width = Math.ceil(videoScaledWidth);
-    canvasEl.height = Math.ceil(videoScaledHeight);
+    resizeCanvasToDisplaySize(canvasEl);
     const ovalDetails = getStaticLivenessOvalDetails({
         width: width,
         height: height,
@@ -150,7 +193,7 @@ function drawStaticOval(canvasEl, videoEl, videoMediaStream) {
     ovalDetails.flippedCenterX = width - ovalDetails.centerX;
     // Compute scaleFactor which is how much our video element is scaled
     // vs the intrinsic video resolution
-    const scaleFactor = videoScaledWidth / videoEl.videoWidth;
+    const scaleFactor = getVideoScaleFactor(videoEl);
     // Draw oval in canvas using ovalDetails and scaleFactor
     drawLivenessOvalInCanvas({
         canvas: canvasEl,
@@ -262,17 +305,47 @@ function fillFractionalContext({ ctx, prevColor, nextColor, fraction, }) {
     }
 }
 function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, videoEl, ovalDetails, heightFraction, scaleFactor, }) {
-    const { x: videoX, y: videoY } = videoEl.getBoundingClientRect();
+    // The overlay is `position: fixed`, but a transformed ancestor (common for
+    // modal dialogs) makes it relative to that ancestor instead of the viewport,
+    // so measure the canvas itself rather than assuming the window.
+    // getBoundingClientRect is in transformed (screen) space while clientWidth
+    // and scaleFactor are in layout space, so convert everything into the
+    // canvas's own layout space to also handle scale transforms.
+    const videoRect = videoEl.getBoundingClientRect();
+    const canvasRect = overlayCanvas.getBoundingClientRect();
+    const videoScreenScale = videoEl.clientWidth
+        ? videoRect.width / videoEl.clientWidth
+        : 1;
+    const canvasScreenScale = overlayCanvas.clientWidth && canvasRect.width
+        ? canvasRect.width / overlayCanvas.clientWidth
+        : 1;
+    // canvas pixels per camera frame pixel
+    const frameScale = (scaleFactor * videoScreenScale) / canvasScreenScale;
+    // offset of the (possibly letterboxed or cropped) video frame relative to
+    // the canvas, in canvas pixels
+    const frameX = (videoRect.x +
+        (videoRect.width - videoEl.videoWidth * scaleFactor * videoScreenScale) /
+            2 -
+        canvasRect.x) /
+        canvasScreenScale;
+    const frameY = (videoRect.y +
+        (videoRect.height -
+            videoEl.videoHeight * scaleFactor * videoScreenScale) /
+            2 -
+        canvasRect.y) /
+        canvasScreenScale;
     const { flippedCenterX, centerY, width, height } = ovalDetails;
-    const updatedCenterX = flippedCenterX * scaleFactor + videoX;
-    const updatedCenterY = centerY * scaleFactor + videoY;
-    const canvasWidth = overlayCanvas.width;
-    const canvasHeight = overlayCanvas.height;
+    const updatedCenterX = flippedCenterX * frameScale + frameX;
+    const updatedCenterY = centerY * frameScale + frameY;
     const ctx = overlayCanvas.getContext('2d');
+    // Because the canvas is set to 100% we need to manually set the height for the canvas to use pixel values
+    const canvasWidth = Math.ceil(overlayCanvas.clientWidth || canvasRect.width) ||
+        window.innerWidth;
+    const canvasHeight = Math.ceil(overlayCanvas.clientHeight || canvasRect.height) ||
+        window.innerHeight;
     if (ctx) {
-        // Because the canvas is set to to 100% we need to manually set the height for the canvas to use pixel values
-        ctx.canvas.width = window.innerWidth;
-        ctx.canvas.height = window.innerHeight;
+        ctx.canvas.width = canvasWidth;
+        ctx.canvas.height = canvasHeight;
         ctx.clearRect(0, 0, canvasWidth, canvasHeight);
         // fill the complete canvas
         fillFractionalContext({
@@ -297,7 +370,7 @@ function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, vide
         });
         // draw the oval path and fill it
         ctx.beginPath();
-        ctx.ellipse(updatedCenterX, updatedCenterY, (width * scaleFactor) / 2, (height * scaleFactor) / 2, 0, 0, 2 * Math.PI);
+        ctx.ellipse(updatedCenterX, updatedCenterY, (width * frameScale) / 2, (height * frameScale) / 2, 0, 0, 2 * Math.PI);
         // add stroke to the oval path
         ctx.strokeStyle = 'white';
         ctx.lineWidth = 8;
@@ -402,4 +475,4 @@ async function isFaceDistanceBelowThreshold({ parsedSessionInformation, faceDete
     return { isDistanceBelowThreshold, error };
 }
 
-export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getColorsSequencesFromSessionInformation, getFaceMatchState, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isFaceDistanceBelowThreshold };
+export { MIN_VISIBLE_FRAME_WIDTH_FRACTION, clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getColorsSequencesFromSessionInformation, getFaceMatchState, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getStaticLivenessOvalDetails, getVideoFillLayout, getVideoScaleFactor, isCameraDeviceVirtual, isFaceDistanceBelowThreshold, resizeCanvasToDisplaySize };

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

@@ -7,7 +7,7 @@ import '../providers/FaceLivenessDetectorProvider.mjs';
 import '@aws-amplify/ui';
 import { LivenessClassNames } from '../types/classNames.mjs';
 
-const CancelButton = ({ ariaLabel }) => {
+const CancelButton = ({ ariaLabel, Component, }) => {
     const [state, send] = useLivenessActor();
     const isFinalState = state.done;
     const handleClick = () => {
@@ -17,6 +17,9 @@ const CancelButton = ({ ariaLabel }) => {
     };
     if (isFinalState)
         return null;
+    if (Component) {
+        return (React__default.createElement(Component, { onCancel: handleClick, cancelLivenessCheckText: ariaLabel }));
+    }
     return (React__default.createElement(Button, { autoFocus: true, variation: "link", onClick: handleClick, size: "large", className: LivenessClassNames.CancelButton, "aria-label": ariaLabel },
         React__default.createElement(IconClose, { "aria-hidden": "true", "data-testid": "close-icon" })));
 };

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

@@ -30,9 +30,9 @@ const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
     return (React__default.createElement(View, { className: LivenessClassNames.RecordingIconContainer },
         React__default.createElement(RecordingIcon, null, recordingIndicatorText)));
 };
-const DefaultCancelButton = ({ cancelLivenessCheckText, }) => {
+const DefaultCancelButton = ({ cancelLivenessCheckText, CancelButton: CancelButton$1, }) => {
     return (React__default.createElement(View, { className: LivenessClassNames.CancelContainer },
-        React__default.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText })));
+        React__default.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText, Component: CancelButton$1 })));
 };
 
 export { DefaultCancelButton, DefaultPhotosensitiveWarning, DefaultRecordingIcon };

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.6.9';
+const VERSION = '3.7.0';
 
 export { VERSION };