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

package/dist/index.js

@@ -256,12 +256,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();
@@ -302,11 +349,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,
@@ -315,7 +358,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,
@@ -427,17 +470,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({
@@ -462,7 +535,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;
@@ -1251,7 +1324,7 @@ function createRequestStreamGenerator(stream) {
     };
 }
 
-const VERSION = '3.6.9';
+const VERSION = '3.7.0';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -1812,6 +1885,33 @@ _StreamRecorder_chunks = new WeakMap(), _StreamRecorder_recorder = new WeakMap()
     tslib.__classPrivateFieldSet(this, _StreamRecorder_eventListeners, {}, "f");
 };
 
+/**
+ * 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);
+    });
+}
+
 const isServerSessionInformationEvent = (value) => {
     return !!value
         ?.ServerSessionInformationEvent;
@@ -2121,6 +2221,12 @@ const livenessMachine = xstate.createMachine({
                 'sendTimeoutAfterOvalDrawingDelay',
             ],
             initial: 'ovalDrawing',
+            on: {
+                VIDEO_RESIZED: {
+                    internal: true,
+                    actions: ['updateOvalScaleFactor', 'redrawLivenessOval'],
+                },
+            },
             states: {
                 ovalDrawing: {
                     invoke: {
@@ -2393,6 +2499,34 @@ const livenessMachine = xstate.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: xstate.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: xstate.assign({
             ovalAssociatedParams: (context, event) => ({
                 ...context.ovalAssociatedParams,
@@ -2572,12 +2706,7 @@ const livenessMachine = xstate.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;
@@ -2809,7 +2938,7 @@ const livenessMachine = xstate.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;
@@ -2840,20 +2969,12 @@ const livenessMachine = xstate.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,
@@ -2938,7 +3059,7 @@ const livenessMachine = xstate.createMachine({
             if (freshnessColorsComplete) {
                 return;
             }
-            const { ovalDetails, scaleFactor } = ovalAssociatedParams;
+            const { ovalDetails } = ovalAssociatedParams;
             const { videoEl } = videoAssociatedParams;
             const completed = await colorSequenceDisplay.startSequences({
                 onSequenceColorChange: ({ sequenceColor, prevSequenceColor, heightFraction, }) => {
@@ -2948,7 +3069,8 @@ const livenessMachine = xstate.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,
                     });
                 },
@@ -3123,7 +3245,7 @@ var LivenessClassNames;
     LivenessClassNames["VideoAnchor"] = "amplify-liveness-video-anchor";
 })(LivenessClassNames || (LivenessClassNames = {}));
 
-const CancelButton = ({ ariaLabel }) => {
+const CancelButton = ({ ariaLabel, Component, }) => {
     const [state, send] = useLivenessActor();
     const isFinalState = state.done;
     const handleClick = () => {
@@ -3133,6 +3255,9 @@ const CancelButton = ({ ariaLabel }) => {
     };
     if (isFinalState)
         return null;
+    if (Component) {
+        return (React__namespace["default"].createElement(Component, { onCancel: handleClick, cancelLivenessCheckText: ariaLabel }));
+    }
     return (React__namespace["default"].createElement(uiReact.Button, { autoFocus: true, variation: "link", onClick: handleClick, size: "large", className: LivenessClassNames.CancelButton, "aria-label": ariaLabel },
         React__namespace["default"].createElement(internal.IconClose, { "aria-hidden": "true", "data-testid": "close-icon" })));
 };
@@ -3492,9 +3617,9 @@ const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
     return (React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.RecordingIconContainer },
         React__namespace["default"].createElement(RecordingIcon, null, recordingIndicatorText)));
 };
-const DefaultCancelButton = ({ cancelLivenessCheckText, }) => {
+const DefaultCancelButton = ({ cancelLivenessCheckText, CancelButton: CancelButton$1, }) => {
     return (React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.CancelContainer },
-        React__namespace["default"].createElement(CancelButton, { ariaLabel: cancelLivenessCheckText })));
+        React__namespace["default"].createElement(CancelButton, { ariaLabel: cancelLivenessCheckText, Component: CancelButton$1 })));
 };
 
 const CameraSelector = (props) => {
@@ -3511,7 +3636,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,
@@ -3527,7 +3656,7 @@ const MemoizedMatchIndicator = React__namespace["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);
@@ -3537,9 +3666,11 @@ const LivenessCameraModule = (props) => {
     const faceMatchPercentage = useLivenessSelector(selectFaceMatchPercentage);
     const faceMatchState = useLivenessSelector(selectFaceMatchState);
     const errorState = useLivenessSelector(selectErrorState);
+    const disableStartScreen = useLivenessSelector(selectDisableStartScreen);
     const colorMode = internal.useColorMode();
     const { videoRef, videoWidth, videoHeight } = useMediaStreamInVideo(videoStream);
     const canvasRef = React.useRef(null);
+    const videoAnchorRef = React.useRef(null);
     const freshnessColorRef = React.useRef(null);
     const [isCameraReady, setIsCameraReady] = React.useState(false);
     const [isMetadataLoaded, setIsMetadataLoaded] = React.useState(false);
@@ -3598,6 +3729,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__namespace["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__namespace["default"].useRef();
+    const recordingResizeTimeoutRef = React__namespace["default"].useRef(null);
+    React__namespace["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__namespace["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__namespace["default"].useLayoutEffect(() => {
         if (isCameraReady) {
             send({
@@ -3629,6 +3838,7 @@ const LivenessCameraModule = (props) => {
         setIsCameraReady(true);
     };
     const handleLoadedMetadata = () => {
+        layoutVideo();
         setIsMetadataLoaded(true);
     };
     const beginLivenessCheck = React__namespace["default"].useCallback(() => {
@@ -3663,7 +3873,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__namespace["default"].createElement(React__namespace["default"].Fragment, null,
-        !isFaceMovementChallenge && photoSensitivityWarning,
+        !isFaceMovementChallenge &&
+            !disableStartScreen &&
+            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))),
@@ -3671,7 +3883,10 @@ const LivenessCameraModule = (props) => {
                 `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
             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 })),
+                !isStartView &&
+                    !isWaitingForCamera &&
+                    !isCheckSucceeded &&
+                    CancelButton !== null && (React__namespace["default"].createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText, CancelButton: CancelButton })),
                 React__namespace["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.Hint, shouldShowFullScreenCamera && `${LivenessClassNames.Hint}--mobile`) },
                     React__namespace["default"].createElement(Hint, { hintDisplayText: hintDisplayText })),
                 errorState && (React__namespace["default"].createElement(ErrorView, { onRetry: () => {
@@ -3684,7 +3899,7 @@ const LivenessCameraModule = (props) => {
                     !isFlashingFreshness &&
                     showMatchIndicatorStates.includes(faceMatchState) ? (React__namespace["default"].createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
             React__namespace["default"].createElement(uiReact.View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
-            React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
+            React__namespace["default"].createElement(uiReact.View, { ref: videoAnchorRef, 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, onLoadedMetadata: handleLoadedMetadata, "data-testid": "video", className: ui.classNames(LivenessClassNames.Video, isCameraUserFacing && LivenessClassNames.UserFacingVideo, isRecordingStopped && LivenessClassNames.FadeOut), "aria-label": cameraDisplayText.a11yVideoLabelText }),
@@ -3778,8 +3993,8 @@ const LivenessCheck = ({ instructionDisplayText, hintDisplayText, cameraDisplayT
                     ? cameraMinSpecificationsMessageText
                     : cameraNotFoundMessageText),
                 React__namespace.createElement(uiReact.Button, { variation: "primary", type: "button", onClick: recheckCameraPermissions }, retryCameraPermissionsText),
-                React__namespace.createElement(uiReact.View, { position: "absolute", top: "medium", right: "medium" },
-                    React__namespace.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText }))));
+                components?.CancelButton !== null && (React__namespace.createElement(uiReact.View, { position: "absolute", top: "medium", right: "medium" },
+                    React__namespace.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText, Component: components?.CancelButton })))));
         }
         else {
             return (React__namespace.createElement(LivenessCameraModule, { isMobileScreen: isMobile, isRecordingStopped: isRecordingStopped, instructionDisplayText: instructionDisplayText, streamDisplayText: streamDisplayText, hintDisplayText: hintDisplayText, errorDisplayText: errorDisplayText, cameraDisplayText: cameraDisplayText, components: components }));
@@ -3914,6 +4129,22 @@ function FaceLivenessDetectorCore(props) {
             },
         },
     });
+    React__namespace.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__namespace.createElement(uiReact.View, { className: DETECTOR_CLASS_NAME, testId: DETECTOR_CLASS_NAME },
         React__namespace.createElement(FaceLivenessDetectorProvider, { componentProps: props, service: service },
             React__namespace.createElement(uiReact.Flex, { direction: "column", ref: currElementRef },

package/dist/styles.css

@@ -4246,7 +4246,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
     opacity: 0;
   }
 }
+.liveness-detector {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.liveness-detector > .amplify-flex,
+.liveness-detector .liveness-detector-check {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .amplify-liveness-camera-module {
+  flex: 1 1 auto;
+  min-height: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -4323,6 +4337,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-liveness-video-anchor {
   position: relative;
   width: 100%;
+  flex: 1 1 auto;
+  min-height: 200px;
+  overflow: hidden;
+}
+
+.amplify-liveness-camera-module--mobile .amplify-liveness-video-anchor {
+  flex: none;
 }
 
 .amplify-liveness-recording-icon-container {
@@ -4663,6 +4684,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   justify-content: center;
   text-align: center;
   height: 480px;
+  max-height: 100%;
 }
 
 .amplify-menu__wrapper {

package/dist/types/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.d.ts

@@ -8,6 +8,7 @@ export declare const selectVideoStream: import("../hooks").LivenessSelectorFn<Me
 export declare const selectFaceMatchPercentage: import("../hooks").LivenessSelectorFn<number | undefined>;
 export declare const selectFaceMatchState: import("../hooks").LivenessSelectorFn<FaceMatchState | undefined>;
 export declare const selectSelectedDeviceId: import("../hooks").LivenessSelectorFn<string | undefined>;
+export declare const selectDisableStartScreen: import("../hooks").LivenessSelectorFn<boolean | undefined>;
 export declare const selectSelectableDevices: import("../hooks").LivenessSelectorFn<MediaDeviceInfo[] | undefined>;
 export interface LivenessCameraModuleProps {
     isMobileScreen: boolean;

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

@@ -66,7 +66,7 @@ export interface LivenessContext {
     shouldDisconnect: boolean | undefined;
     videoAssociatedParams: VideoAssociatedParams | undefined;
 }
-export type LivenessEventTypes = 'BEGIN' | 'CONNECTION_TIMEOUT' | 'START_RECORDING' | 'TIMEOUT' | 'ERROR' | 'CANCEL' | 'SET_SESSION_INFO' | 'DISCONNECT_EVENT' | 'SET_DOM_AND_CAMERA_DETAILS' | 'UPDATE_DEVICE_AND_STREAM' | 'CAMERA_NOT_FOUND' | 'SERVER_ERROR' | 'RUNTIME_ERROR' | 'RETRY_CAMERA_CHECK' | 'MOBILE_LANDSCAPE_WARNING';
+export type LivenessEventTypes = 'BEGIN' | 'CONNECTION_TIMEOUT' | 'START_RECORDING' | 'TIMEOUT' | 'ERROR' | 'CANCEL' | 'SET_SESSION_INFO' | 'DISCONNECT_EVENT' | 'SET_DOM_AND_CAMERA_DETAILS' | 'UPDATE_DEVICE_AND_STREAM' | 'CAMERA_NOT_FOUND' | 'SERVER_ERROR' | 'RUNTIME_ERROR' | 'RETRY_CAMERA_CHECK' | 'MOBILE_LANDSCAPE_WARNING' | 'VIDEO_RESIZED';
 export type LivenessEventData = Record<PropertyKey, any>;
 export interface LivenessEvent {
     type: LivenessEventTypes;

package/dist/types/components/FaceLivenessDetector/service/utils/closeLivenessStream.d.ts

@@ -0,0 +1,9 @@
+import type { StreamRecorder } from './StreamRecorder';
+/**
+ * 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.
+ */
+export declare function closeLivenessStream(livenessStreamProvider: StreamRecorder | undefined, closeCode: number): void;

package/dist/types/components/FaceLivenessDetector/service/utils/index.d.ts

@@ -8,3 +8,4 @@ export { createRequestStreamGenerator, createSessionStartEvent, createSessionEnd
 export { createStreamingClient } from './createStreamingClient';
 export { isFaceMovementAndLightChallenge, isFaceMovementChallenge, createSessionInfoFromServerSessionInformation, } from './sessionInformation';
 export { StreamRecorder } from './StreamRecorder';
+export { closeLivenessStream } from './closeLivenessStream';

package/dist/types/components/FaceLivenessDetector/service/utils/liveness.d.ts

@@ -36,6 +36,36 @@ export declare function getStaticLivenessOvalDetails({ width, height, widthSeed,
     ratioMultiplier?: number;
     ovalHeightWidthRatio?: number;
 }): LivenessOvalDetails;
+/**
+ * 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.
+ */
+export declare function getVideoScaleFactor(videoEl: HTMLVideoElement): number;
+export declare 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.
+ */
+export declare function getVideoFillLayout({ containerWidth, containerHeight, videoWidth, videoHeight, }: {
+    containerWidth: number;
+    containerHeight: number;
+    videoWidth: number;
+    videoHeight: number;
+}): {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+/**
+ * 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.
+ */
+export declare function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): void;
 /**
  * Draws the provided liveness oval on the canvas.
  */

package/dist/types/components/FaceLivenessDetector/shared/CancelButton.d.ts

@@ -1,5 +1,20 @@
 import React from 'react';
+export interface FaceLivenessCancelButtonProps {
+    /**
+     * Cancels the liveness check, same as the default cancel button
+     */
+    onCancel: () => void;
+    /**
+     * Resolved `cancelLivenessCheckText` display text, used as the default
+     * button's accessible name
+     */
+    cancelLivenessCheckText: string;
+}
 export interface CancelButtonProps {
     ariaLabel: string;
+    /**
+     * Custom cancel button provided through `components.CancelButton`
+     */
+    Component?: React.ComponentType<FaceLivenessCancelButtonProps>;
 }
 export declare const CancelButton: React.FC<CancelButtonProps>;