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

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

@@ -7,9 +7,11 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import '@aws-sdk/client-rekognitionstreaming';
+import './service/utils/constants.mjs';
+import './service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
+import '@aws-amplify/ui';
 import './service/utils/createStreamingClient/createStreamingClient.mjs';
-import './service/utils/freshnessColorDisplay.mjs';
+import './service/utils/StreamRecorder/StreamRecorder.mjs';
 import { View, Flex } from '@aws-amplify/ui-react';
 import { FaceLivenessDetectorProvider } from './providers/FaceLivenessDetectorProvider.mjs';
 import { LivenessCheck } from './LivenessCheck/LivenessCheck.mjs';

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

@@ -0,0 +1,13 @@
+import { Flex, View, Label, SelectField } from '@aws-amplify/ui-react';
+import React__default from 'react';
+import { LivenessClassNames } from '../types/classNames.mjs';
+
+const CameraSelector = (props) => {
+    const { onSelect: onCameraChange, devices: selectableDevices, deviceId: selectedDeviceId, } = props;
+    return (React__default.createElement(Flex, { className: LivenessClassNames.StartScreenCameraSelect },
+        React__default.createElement(View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
+            React__default.createElement(Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
+            React__default.createElement(SelectField, { id: "amplify-liveness-camera-select", testId: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices.map((device) => (React__default.createElement("option", { value: device.deviceId, key: device.deviceId }, device.label)))))));
+};
+
+export { CameraSelector };

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

@@ -1,6 +1,6 @@
 import React__default, { useRef, useState } from 'react';
 import { classNames } from '@aws-amplify/ui';
-import { Loader, View, Flex, Text, Label, SelectField, Button } from '@aws-amplify/ui-react';
+import { View, Flex, Loader, Text, Button } from '@aws-amplify/ui-react';
 import { useColorMode } from '@aws-amplify/ui-react/internal';
 import '../service/machine/machine.mjs';
 import { FaceMatchState } from '../service/types/liveness.mjs';
@@ -10,9 +10,10 @@ 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 '@aws-sdk/client-rekognitionstreaming';
+import { FACE_MOVEMENT_CHALLENGE } from '../service/utils/constants.mjs';
+import '../service/utils/ColorSequenceDisplay/ColorSequenceDisplay.mjs';
 import '../service/utils/createStreamingClient/createStreamingClient.mjs';
-import '../service/utils/freshnessColorDisplay.mjs';
+import '../service/utils/StreamRecorder/StreamRecorder.mjs';
 import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
 import { useLivenessSelector, createLivenessSelector } from '../hooks/useLivenessSelector.mjs';
 import { useMediaStreamInVideo } from '../hooks/useMediaStreamInVideo.mjs';
@@ -20,16 +21,18 @@ import { LivenessClassNames } from '../types/classNames.mjs';
 import { selectErrorState, Hint } from '../shared/Hint.mjs';
 import { MatchIndicator } from '../shared/MatchIndicator.mjs';
 import { Overlay } from '../shared/Overlay.mjs';
+import { isDeviceUserFacing } from '../utils/device.mjs';
 import { FaceLivenessErrorModal, renderErrorModal } from '../shared/FaceLivenessErrorModal.mjs';
 import { DefaultPhotosensitiveWarning, DefaultRecordingIcon, DefaultCancelButton } from '../shared/DefaultStartScreenComponents.mjs';
+import { CameraSelector } from './CameraSelector.mjs';
 
+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__default.createElement(Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }));
 const showMatchIndicatorStates = [
     FaceMatchState.TOO_FAR,
     FaceMatchState.CANT_IDENTIFY,
@@ -47,6 +50,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);
@@ -59,8 +63,14 @@ const LivenessCameraModule = (props) => {
     const canvasRef = useRef(null);
     const freshnessColorRef = useRef(null);
     const [isCameraReady, setIsCameraReady] = useState(false);
-    const isCheckingCamera = state.matches('cameraCheck');
-    const isWaitingForCamera = state.matches('waitForDOMAndCameraDetails');
+    const [isMetadataLoaded, setIsMetadataLoaded] = useState(false);
+    const [isCameraUserFacing, setIsCameraUserFacing] = 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');
@@ -74,18 +84,29 @@ const LivenessCameraModule = (props) => {
     const [mediaWidth, setMediaWidth] = useState(videoWidth);
     const [mediaHeight, setMediaHeight] = useState(videoHeight);
     const [aspectRatio, setAspectRatio] = 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__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__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);
             }
         };
@@ -97,7 +118,7 @@ const LivenessCameraModule = (props) => {
             darkModePreference.removeEventListener('change', updateColorModeHandler);
             lightModePreference.addEventListener('change', updateColorModeHandler);
         };
-    }, [canvasRef, videoRef, videoStream, isStartView]);
+    }, [videoRef, videoStream, colorMode, isStartView, isMetadataLoaded]);
     React__default.useLayoutEffect(() => {
         if (isCameraReady) {
             send({
@@ -128,6 +149,9 @@ const LivenessCameraModule = (props) => {
     const handleMediaPlay = () => {
         setIsCameraReady(true);
     };
+    const handleLoadedMetadata = () => {
+        setIsMetadataLoaded(true);
+    };
     const beginLivenessCheck = React__default.useCallback(() => {
         send({
             type: 'BEGIN',
@@ -136,6 +160,7 @@ const LivenessCameraModule = (props) => {
     const onCameraChange = React__default.useCallback((e) => {
         const newDeviceId = e.target.value;
         const changeCamera = async () => {
+            setIsMetadataLoaded(false);
             const newStream = await navigator.mediaDevices.getUserMedia({
                 video: {
                     ...videoConstraints,
@@ -152,16 +177,19 @@ const LivenessCameraModule = (props) => {
     }, [videoConstraints, send]);
     if (isCheckingCamera) {
         return (React__default.createElement(Flex, { justifyContent: 'center', className: LivenessClassNames.StartScreenCameraWaiting },
-            React__default.createElement(Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
+            React__default.createElement(Loader, { size: "large", className: LivenessClassNames.CenteredLoader, "data-testid": "centered-loader", position: "unset" }),
             React__default.createElement(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__default.createElement(React__default.Fragment, null,
-        photoSensitivityWarning,
+        !isFaceMovementChallenge && 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))),
         React__default.createElement(Flex, { className: classNames(LivenessClassNames.CameraModule, shouldShowFullScreenCamera &&
                 `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
-            !isCameraReady && centeredLoader,
             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 })),
@@ -180,19 +208,13 @@ const LivenessCameraModule = (props) => {
             React__default.createElement(View, { className: LivenessClassNames.VideoAnchor, style: {
                     aspectRatio: `${aspectRatio}`,
                 } },
-                React__default.createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: classNames(LivenessClassNames.Video, isRecordingStopped && LivenessClassNames.FadeOut), "aria-label": cameraDisplayText.a11yVideoLabelText }),
+                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 }),
                 React__default.createElement(Flex, { className: classNames(LivenessClassNames.OvalCanvas, shouldShowFullScreenCamera &&
                         `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
                     React__default.createElement(View, { as: "canvas", ref: canvasRef })),
-                isStartView &&
-                    !isMobileScreen &&
-                    selectableDevices &&
-                    selectableDevices.length > 1 && (React__default.createElement(Flex, { className: LivenessClassNames.StartScreenCameraSelect },
-                    React__default.createElement(View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
-                        React__default.createElement(Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
-                        React__default.createElement(SelectField, { id: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices?.map((device) => (React__default.createElement("option", { value: device.deviceId, key: device.deviceId }, device.label))))))))),
+                allowDeviceSelection ? (React__default.createElement(CameraSelector, { onSelect: onCameraChange, devices: selectableDevices, deviceId: selectedDeviceId })) : null)),
         isStartView && (React__default.createElement(Flex, { justifyContent: "center" },
             React__default.createElement(Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
 };
 
-export { LivenessCameraModule, selectFaceMatchPercentage, selectFaceMatchState, selectSelectableDevices, selectSelectedDeviceId, selectVideoConstraints, selectVideoStream };
+export { LivenessCameraModule, selectChallengeType, selectFaceMatchPercentage, selectFaceMatchState, selectSelectableDevices, selectSelectedDeviceId, selectVideoConstraints, selectVideoStream };

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

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