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

package/README.md

@@ -1,23 +1,23 @@
-# Amplify UI
+# Amplify UI React Liveness
 
-Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into _any_ application. Amplify UI consists of:
+The React Liveness package provides components for face liveness detection in Amplify connected applications.
 
-1. Connected components that simplify complex cloud-connected workflows, like Authenticator.
-2. Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.
-3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
-4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.
+## Contents
 
-## React Documentation
+### Core Components
 
-- https://ui.docs.amplify.aws/react
+- `FaceLivenessDetector` - Component for face liveness detection
+- `FaceLivenessDetectorCore` - Core component for face liveness detection
 
-## Features 🚀
+### Type Definitions
 
-- **Better developer experience** Connected-components like Authenticator are being written with framework-specific implementations so that they follow framework conventions and are easier to integrate into your application.
-- **Endlessly customizable** Every detail of Amplify UI is customizable to match your brand. Style all of Amplify UI with themes, override components with your own, or build your own UI and use Amplify for complex state management.
-- **Accessible** Amplify UI components follow [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) and [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) best practices and guidelines such as color contrast, keyboard navigation, accessible labels, and focus management.
-- **Primitive components (React only right now)** Primitive components are used in the connected components, like Authenticator, you can also customize them and use them to build the rest of your UI.
+- `FaceLivenessDetectorProps` - Props for FaceLivenessDetector component
+- `FaceLivenessDetectorCoreProps` - Props for FaceLivenessDetectorCore component
+- `AwsCredentialProvider` - Type for AWS credential provider
+- `AwsCredentials` - Type for AWS credentials
+- `AwsTemporaryCredentials` - Type for AWS temporary credentials
+- `ErrorState` - Type for error state
 
-## We love contributors!!
+## React Documentation
 
-See our contributing guide [CONTRIBUTING.md](/CONTRIBUTING.md) to help us scale Amplify UI!
+- https://ui.docs.amplify.aws/react

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';