@aws-amplify/ui-react-liveness 3.1.11 → 3.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCheck.mjs +1 -1
- package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/CustomWebSocketFetchHandler.mjs +6 -0
- package/dist/esm/version.mjs +1 -1
- package/dist/index.js +73 -70
- package/dist/types/version.d.ts +1 -1
- package/package.json +5 -6
|
@@ -8,7 +8,7 @@ import '@tensorflow-models/face-detection';
|
|
|
8
8
|
import '@tensorflow/tfjs-backend-wasm';
|
|
9
9
|
import '@tensorflow/tfjs-backend-cpu';
|
|
10
10
|
import '@aws-amplify/core/internals/utils';
|
|
11
|
-
import {
|
|
11
|
+
import { getLandscapeMediaQuery, isMobileScreen } from '../utils/device.mjs';
|
|
12
12
|
import '@aws-sdk/client-rekognitionstreaming';
|
|
13
13
|
import '../service/utils/createStreamingClient/createStreamingClient.mjs';
|
|
14
14
|
import '../service/utils/freshnessColorDisplay.mjs';
|
|
@@ -8,6 +8,12 @@ import { WS_CLOSURE_CODE } from '../constants.mjs';
|
|
|
8
8
|
* Note: This file was copied from https://github.com/aws/aws-sdk-js-v3/blob/main/packages/middleware-websocket/src/websocket-fetch-handler.ts#L176
|
|
9
9
|
* Because of this the file is not fully typed at this time but we should eventually work on fully typing this file.
|
|
10
10
|
*/
|
|
11
|
+
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
|
12
|
+
/* eslint-disable @typescript-eslint/require-await */
|
|
13
|
+
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
|
14
|
+
/* eslint-disable @typescript-eslint/no-unsafe-return */
|
|
15
|
+
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
|
16
|
+
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
11
17
|
const DEFAULT_WS_CONNECTION_TIMEOUT_MS = 2000;
|
|
12
18
|
const WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE = 'Websocket connection timeout';
|
|
13
19
|
const isWebSocketRequest = (request) => request.protocol === 'ws:' || request.protocol === 'wss:';
|
package/dist/esm/version.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -22,8 +22,6 @@ var uiReact = require('@aws-amplify/ui-react');
|
|
|
22
22
|
var ui = require('@aws-amplify/ui');
|
|
23
23
|
var internal = require('@aws-amplify/ui-react/internal');
|
|
24
24
|
|
|
25
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
|
-
|
|
27
25
|
function _interopNamespace(e) {
|
|
28
26
|
if (e && e.__esModule) return e;
|
|
29
27
|
var n = Object.create(null);
|
|
@@ -42,7 +40,6 @@ function _interopNamespace(e) {
|
|
|
42
40
|
return Object.freeze(n);
|
|
43
41
|
}
|
|
44
42
|
|
|
45
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
46
43
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
47
44
|
|
|
48
45
|
/**
|
|
@@ -833,7 +830,7 @@ function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceInterse
|
|
|
833
830
|
return { faceMatchState, faceMatchPercentage };
|
|
834
831
|
}
|
|
835
832
|
|
|
836
|
-
const VERSION = '3.1.
|
|
833
|
+
const VERSION = '3.1.12';
|
|
837
834
|
|
|
838
835
|
const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
|
|
839
836
|
const getLivenessUserAgent = () => {
|
|
@@ -844,6 +841,12 @@ const getLivenessUserAgent = () => {
|
|
|
844
841
|
* Note: This file was copied from https://github.com/aws/aws-sdk-js-v3/blob/main/packages/middleware-websocket/src/websocket-fetch-handler.ts#L176
|
|
845
842
|
* Because of this the file is not fully typed at this time but we should eventually work on fully typing this file.
|
|
846
843
|
*/
|
|
844
|
+
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
|
845
|
+
/* eslint-disable @typescript-eslint/require-await */
|
|
846
|
+
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
|
847
|
+
/* eslint-disable @typescript-eslint/no-unsafe-return */
|
|
848
|
+
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
|
849
|
+
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
847
850
|
const DEFAULT_WS_CONNECTION_TIMEOUT_MS = 2000;
|
|
848
851
|
const WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE = 'Websocket connection timeout';
|
|
849
852
|
const isWebSocketRequest = (request) => request.protocol === 'ws:' || request.protocol === 'wss:';
|
|
@@ -2541,12 +2544,12 @@ const livenessMachine = xstate.createMachine({
|
|
|
2541
2544
|
},
|
|
2542
2545
|
});
|
|
2543
2546
|
|
|
2544
|
-
const FaceLivenessDetectorContext =
|
|
2547
|
+
const FaceLivenessDetectorContext = React__namespace["default"].createContext(null);
|
|
2545
2548
|
function FaceLivenessDetectorProvider({ children, ...props }) {
|
|
2546
|
-
return (
|
|
2549
|
+
return (React__namespace["default"].createElement(FaceLivenessDetectorContext.Provider, { value: props }, children));
|
|
2547
2550
|
}
|
|
2548
2551
|
function useFaceLivenessDetector() {
|
|
2549
|
-
const props =
|
|
2552
|
+
const props = React__namespace["default"].useContext(FaceLivenessDetectorContext);
|
|
2550
2553
|
if (props === null) {
|
|
2551
2554
|
throw new Error('useFaceLivenessDetector must be used within a FaceLivenessDetectorProvider');
|
|
2552
2555
|
}
|
|
@@ -2661,8 +2664,8 @@ const CancelButton = ({ ariaLabel }) => {
|
|
|
2661
2664
|
};
|
|
2662
2665
|
if (isFinalState)
|
|
2663
2666
|
return null;
|
|
2664
|
-
return (
|
|
2665
|
-
|
|
2667
|
+
return (React__namespace["default"].createElement(uiReact.Button, { autoFocus: true, variation: "link", onClick: handleClick, size: "large", className: LivenessClassNames.CancelButton, "aria-label": ariaLabel },
|
|
2668
|
+
React__namespace["default"].createElement(internal.IconClose, { "aria-hidden": "true", "data-testid": "close-icon" })));
|
|
2666
2669
|
};
|
|
2667
2670
|
|
|
2668
2671
|
const Toast = ({ variation = 'default', size = 'medium', children, isInitial = false, ...rest }) => {
|
|
@@ -2786,8 +2789,8 @@ const Hint = ({ hintDisplayText }) => {
|
|
|
2786
2789
|
};
|
|
2787
2790
|
|
|
2788
2791
|
const MatchIndicator = ({ percentage, initialPercentage = 25, testId, }) => {
|
|
2789
|
-
const [matchPercentage, setMatchPercentage] =
|
|
2790
|
-
|
|
2792
|
+
const [matchPercentage, setMatchPercentage] = React__namespace["default"].useState(initialPercentage);
|
|
2793
|
+
React__namespace["default"].useEffect(() => {
|
|
2791
2794
|
if (percentage < 0) {
|
|
2792
2795
|
setMatchPercentage(0);
|
|
2793
2796
|
}
|
|
@@ -2801,8 +2804,8 @@ const MatchIndicator = ({ percentage, initialPercentage = 25, testId, }) => {
|
|
|
2801
2804
|
const percentageStyles = {
|
|
2802
2805
|
'--percentage': `${matchPercentage}%`,
|
|
2803
2806
|
};
|
|
2804
|
-
return (
|
|
2805
|
-
|
|
2807
|
+
return (React__namespace["default"].createElement("div", { className: LivenessClassNames.MatchIndicator, "data-testid": testId },
|
|
2808
|
+
React__namespace["default"].createElement("div", { className: `${LivenessClassNames.MatchIndicator}__bar`, style: percentageStyles, role: "progressbar", "aria-label": "MatchIndicator", "aria-valuenow": percentage, "aria-valuetext": `${percentage}% face fit` })));
|
|
2806
2809
|
};
|
|
2807
2810
|
|
|
2808
2811
|
const Overlay = ({ children, horizontal = 'center', vertical = 'center', className, ...rest }) => {
|
|
@@ -2810,11 +2813,11 @@ const Overlay = ({ children, horizontal = 'center', vertical = 'center', classNa
|
|
|
2810
2813
|
};
|
|
2811
2814
|
|
|
2812
2815
|
const RecordingIcon = ({ children }) => {
|
|
2813
|
-
return (
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2816
|
+
return (React__namespace["default"].createElement(uiReact.Flex, { className: LivenessClassNames.RecordingIcon },
|
|
2817
|
+
React__namespace["default"].createElement(uiReact.Flex, { "data-testid": "rec-icon", justifyContent: "center" },
|
|
2818
|
+
React__namespace["default"].createElement(uiReact.Icon, { viewBox: { width: 20, height: 20 }, width: "20", height: "20" },
|
|
2819
|
+
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "8", fill: "red" }))),
|
|
2820
|
+
React__namespace["default"].createElement(uiReact.Text, { as: "span", fontWeight: "bold" }, children)));
|
|
2818
2821
|
};
|
|
2819
2822
|
|
|
2820
2823
|
const defaultErrorDisplayText = {
|
|
@@ -2910,11 +2913,11 @@ const renderToastErrorModal = (props) => {
|
|
|
2910
2913
|
heading = serverHeaderText;
|
|
2911
2914
|
message = serverMessageText;
|
|
2912
2915
|
}
|
|
2913
|
-
return (
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2916
|
+
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
|
|
2917
|
+
React__namespace["default"].createElement(uiReact.Flex, { className: LivenessClassNames.ErrorModal },
|
|
2918
|
+
React__namespace["default"].createElement(internal.AlertIcon, { ariaLabel: errorLabelText, role: "img", variation: "error" }),
|
|
2919
|
+
React__namespace["default"].createElement(uiReact.Text, { className: LivenessClassNames.ErrorModalHeading, id: "amplify-liveness-error-heading" }, heading)),
|
|
2920
|
+
React__namespace["default"].createElement(uiReact.Text, { id: "amplify-liveness-error-message" }, message)));
|
|
2918
2921
|
};
|
|
2919
2922
|
const renderErrorModal = ({ errorState, overrideErrorDisplayText, }) => {
|
|
2920
2923
|
const displayText = {
|
|
@@ -2940,11 +2943,11 @@ const FaceLivenessErrorModal = (props) => {
|
|
|
2940
2943
|
...overrideErrorDisplayText,
|
|
2941
2944
|
};
|
|
2942
2945
|
const { tryAgainText } = displayText;
|
|
2943
|
-
return (
|
|
2944
|
-
|
|
2946
|
+
return (React__namespace["default"].createElement(Overlay, { className: LivenessClassNames.OpaqueOverlay },
|
|
2947
|
+
React__namespace["default"].createElement(Toast, { "aria-labelledby": "amplify-liveness-error-heading", "aria-describedby": "amplify-liveness-error-message", role: "alertdialog" },
|
|
2945
2948
|
children,
|
|
2946
|
-
|
|
2947
|
-
|
|
2949
|
+
React__namespace["default"].createElement(uiReact.Flex, { justifyContent: "center" },
|
|
2950
|
+
React__namespace["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText)))));
|
|
2948
2951
|
};
|
|
2949
2952
|
|
|
2950
2953
|
/**
|
|
@@ -2980,19 +2983,19 @@ const LivenessIconWithPopover = ({ children, headingText, labelText }) => {
|
|
|
2980
2983
|
LivenessIconWithPopover.displayName = 'LivenessIconWithPopover';
|
|
2981
2984
|
|
|
2982
2985
|
const DefaultPhotosensitiveWarning = ({ bodyText, headingText, infoText, labelText, }) => {
|
|
2983
|
-
return (
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2986
|
+
return (React__namespace["default"].createElement(uiReact.Flex, { className: `${ui.ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`, style: { zIndex: '3' } },
|
|
2987
|
+
React__namespace["default"].createElement(uiReact.View, { flex: "1" },
|
|
2988
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.AlertHeading }, headingText),
|
|
2989
|
+
React__namespace["default"].createElement(uiReact.View, { className: ui.ComponentClassName.AlertBody }, bodyText)),
|
|
2990
|
+
React__namespace["default"].createElement(LivenessIconWithPopover, { labelText: labelText, headingText: headingText }, infoText)));
|
|
2988
2991
|
};
|
|
2989
2992
|
const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
|
|
2990
|
-
return (
|
|
2991
|
-
|
|
2993
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.RecordingIconContainer },
|
|
2994
|
+
React__namespace["default"].createElement(RecordingIcon, null, recordingIndicatorText)));
|
|
2992
2995
|
};
|
|
2993
2996
|
const DefaultCancelButton = ({ cancelLivenessCheckText, }) => {
|
|
2994
|
-
return (
|
|
2995
|
-
|
|
2997
|
+
return (React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.CancelContainer },
|
|
2998
|
+
React__namespace["default"].createElement(CancelButton, { ariaLabel: cancelLivenessCheckText })));
|
|
2996
2999
|
};
|
|
2997
3000
|
|
|
2998
3001
|
const selectVideoConstraints = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoConstraints);
|
|
@@ -3001,7 +3004,7 @@ const selectFaceMatchPercentage = createLivenessSelector((state) => state.contex
|
|
|
3001
3004
|
const selectFaceMatchState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchState);
|
|
3002
3005
|
const selectSelectedDeviceId = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectedDeviceId);
|
|
3003
3006
|
const selectSelectableDevices = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectableDevices);
|
|
3004
|
-
const centeredLoader = (
|
|
3007
|
+
const centeredLoader = (React__namespace["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }));
|
|
3005
3008
|
const showMatchIndicatorStates = [
|
|
3006
3009
|
FaceMatchState.TOO_FAR,
|
|
3007
3010
|
FaceMatchState.CANT_IDENTIFY,
|
|
@@ -3013,7 +3016,7 @@ const showMatchIndicatorStates = [
|
|
|
3013
3016
|
* The LivenessCameraModule still needs to be optimized for re-renders and at that time
|
|
3014
3017
|
* we should be able to remove this memoization
|
|
3015
3018
|
*/
|
|
3016
|
-
const MemoizedMatchIndicator =
|
|
3019
|
+
const MemoizedMatchIndicator = React__namespace["default"].memo(MatchIndicator);
|
|
3017
3020
|
const LivenessCameraModule = (props) => {
|
|
3018
3021
|
const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
|
|
3019
3022
|
const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
|
|
@@ -3046,12 +3049,12 @@ const LivenessCameraModule = (props) => {
|
|
|
3046
3049
|
const [mediaWidth, setMediaWidth] = React.useState(videoWidth);
|
|
3047
3050
|
const [mediaHeight, setMediaHeight] = React.useState(videoHeight);
|
|
3048
3051
|
const [aspectRatio, setAspectRatio] = React.useState(() => videoWidth && videoHeight ? videoWidth / videoHeight : 0);
|
|
3049
|
-
|
|
3052
|
+
React__namespace["default"].useEffect(() => {
|
|
3050
3053
|
if (canvasRef?.current && videoRef?.current && videoStream && isStartView) {
|
|
3051
3054
|
drawStaticOval(canvasRef.current, videoRef.current, videoStream);
|
|
3052
3055
|
}
|
|
3053
3056
|
}, [canvasRef, videoRef, videoStream, colorMode, isStartView]);
|
|
3054
|
-
|
|
3057
|
+
React__namespace["default"].useEffect(() => {
|
|
3055
3058
|
const updateColorModeHandler = (e) => {
|
|
3056
3059
|
if (e.matches &&
|
|
3057
3060
|
canvasRef?.current &&
|
|
@@ -3070,7 +3073,7 @@ const LivenessCameraModule = (props) => {
|
|
|
3070
3073
|
lightModePreference.addEventListener('change', updateColorModeHandler);
|
|
3071
3074
|
};
|
|
3072
3075
|
}, [canvasRef, videoRef, videoStream, isStartView]);
|
|
3073
|
-
|
|
3076
|
+
React__namespace["default"].useLayoutEffect(() => {
|
|
3074
3077
|
if (isCameraReady) {
|
|
3075
3078
|
send({
|
|
3076
3079
|
type: 'SET_DOM_AND_CAMERA_DETAILS',
|
|
@@ -3088,24 +3091,24 @@ const LivenessCameraModule = (props) => {
|
|
|
3088
3091
|
setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
|
|
3089
3092
|
}
|
|
3090
3093
|
}, [send, videoRef, isCameraReady, isMobileScreen]);
|
|
3091
|
-
|
|
3094
|
+
React__namespace["default"].useEffect(() => {
|
|
3092
3095
|
if (isDetectFaceBeforeStart) {
|
|
3093
3096
|
clearOvalCanvas({ canvas: canvasRef.current });
|
|
3094
3097
|
}
|
|
3095
3098
|
}, [isDetectFaceBeforeStart]);
|
|
3096
|
-
const photoSensitivityWarning =
|
|
3097
|
-
return (
|
|
3098
|
-
|
|
3099
|
+
const photoSensitivityWarning = React__namespace["default"].useMemo(() => {
|
|
3100
|
+
return (React__namespace["default"].createElement(uiReact.View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
|
|
3101
|
+
React__namespace["default"].createElement(PhotosensitiveWarning, { bodyText: instructionDisplayText.photosensitivityWarningBodyText, headingText: instructionDisplayText.photosensitivityWarningHeadingText, infoText: instructionDisplayText.photosensitivityWarningInfoText, labelText: instructionDisplayText.photosensitivityWarningLabelText })));
|
|
3099
3102
|
}, [PhotosensitiveWarning, instructionDisplayText, isStartView]);
|
|
3100
3103
|
const handleMediaPlay = () => {
|
|
3101
3104
|
setIsCameraReady(true);
|
|
3102
3105
|
};
|
|
3103
|
-
const beginLivenessCheck =
|
|
3106
|
+
const beginLivenessCheck = React__namespace["default"].useCallback(() => {
|
|
3104
3107
|
send({
|
|
3105
3108
|
type: 'BEGIN',
|
|
3106
3109
|
});
|
|
3107
3110
|
}, [send]);
|
|
3108
|
-
const onCameraChange =
|
|
3111
|
+
const onCameraChange = React__namespace["default"].useCallback((e) => {
|
|
3109
3112
|
const newDeviceId = e.target.value;
|
|
3110
3113
|
const changeCamera = async () => {
|
|
3111
3114
|
const newStream = await navigator.mediaDevices.getUserMedia({
|
|
@@ -3123,23 +3126,23 @@ const LivenessCameraModule = (props) => {
|
|
|
3123
3126
|
changeCamera();
|
|
3124
3127
|
}, [videoConstraints, send]);
|
|
3125
3128
|
if (isCheckingCamera) {
|
|
3126
|
-
return (
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
+
return (React__namespace["default"].createElement(uiReact.Flex, { justifyContent: 'center', className: LivenessClassNames.StartScreenCameraWaiting },
|
|
3130
|
+
React__namespace["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
|
|
3131
|
+
React__namespace["default"].createElement(uiReact.Text, { fontSize: "large", fontWeight: "bold", "data-testid": "waiting-camera-permission", className: `${LivenessClassNames.StartScreenCameraWaiting}__text` }, cameraDisplayText.waitingCameraPermissionText)));
|
|
3129
3132
|
}
|
|
3130
3133
|
// We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera)
|
|
3131
3134
|
const shouldShowFullScreenCamera = isMobileScreen && !isStartView && !isWaitingForCamera;
|
|
3132
|
-
return (
|
|
3135
|
+
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
|
|
3133
3136
|
photoSensitivityWarning,
|
|
3134
|
-
|
|
3137
|
+
React__namespace["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.CameraModule, shouldShowFullScreenCamera &&
|
|
3135
3138
|
`${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
|
|
3136
3139
|
!isCameraReady && centeredLoader,
|
|
3137
|
-
|
|
3138
|
-
isRecording && (
|
|
3139
|
-
!isStartView && !isWaitingForCamera && !isCheckSucceeded && (
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
errorState && (
|
|
3140
|
+
React__namespace["default"].createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
|
|
3141
|
+
isRecording && (React__namespace["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
|
|
3142
|
+
!isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__namespace["default"].createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
|
|
3143
|
+
React__namespace["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.Hint, shouldShowFullScreenCamera && `${LivenessClassNames.Hint}--mobile`) },
|
|
3144
|
+
React__namespace["default"].createElement(Hint, { hintDisplayText: hintDisplayText })),
|
|
3145
|
+
errorState && (React__namespace["default"].createElement(ErrorView, { onRetry: () => {
|
|
3143
3146
|
send({ type: 'CANCEL' });
|
|
3144
3147
|
}, displayText: errorDisplayText }, renderErrorModal({
|
|
3145
3148
|
errorState,
|
|
@@ -3147,24 +3150,24 @@ const LivenessCameraModule = (props) => {
|
|
|
3147
3150
|
}))),
|
|
3148
3151
|
isRecording &&
|
|
3149
3152
|
!isFlashingFreshness &&
|
|
3150
|
-
showMatchIndicatorStates.includes(faceMatchState) ? (
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
+
showMatchIndicatorStates.includes(faceMatchState) ? (React__namespace["default"].createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
|
|
3154
|
+
React__namespace["default"].createElement(uiReact.View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
|
|
3155
|
+
React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
|
|
3153
3156
|
aspectRatio: `${aspectRatio}`,
|
|
3154
3157
|
} },
|
|
3155
|
-
|
|
3156
|
-
|
|
3158
|
+
React__namespace["default"].createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: ui.classNames(LivenessClassNames.Video, isRecordingStopped && LivenessClassNames.FadeOut), "aria-label": cameraDisplayText.a11yVideoLabelText }),
|
|
3159
|
+
React__namespace["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, shouldShowFullScreenCamera &&
|
|
3157
3160
|
`${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
|
|
3158
|
-
|
|
3161
|
+
React__namespace["default"].createElement(uiReact.View, { as: "canvas", ref: canvasRef })),
|
|
3159
3162
|
isStartView &&
|
|
3160
3163
|
!isMobileScreen &&
|
|
3161
3164
|
selectableDevices &&
|
|
3162
|
-
selectableDevices.length > 1 && (
|
|
3163
|
-
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
isStartView && (
|
|
3167
|
-
|
|
3165
|
+
selectableDevices.length > 1 && (React__namespace["default"].createElement(uiReact.Flex, { className: LivenessClassNames.StartScreenCameraSelect },
|
|
3166
|
+
React__namespace["default"].createElement(uiReact.View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
|
|
3167
|
+
React__namespace["default"].createElement(uiReact.Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
|
|
3168
|
+
React__namespace["default"].createElement(uiReact.SelectField, { id: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices?.map((device) => (React__namespace["default"].createElement("option", { value: device.deviceId, key: device.deviceId }, device.label))))))))),
|
|
3169
|
+
isStartView && (React__namespace["default"].createElement(uiReact.Flex, { justifyContent: "center" },
|
|
3170
|
+
React__namespace["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
|
|
3168
3171
|
};
|
|
3169
3172
|
|
|
3170
3173
|
const LandscapeErrorModal = (props) => {
|
package/dist/types/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "3.1.
|
|
1
|
+
export declare const VERSION = "3.1.12";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aws-amplify/ui-react-liveness",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.12",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/esm/index.mjs",
|
|
6
6
|
"exports": {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react-liveness\"'",
|
|
35
35
|
"clean": "rimraf dist node_modules",
|
|
36
36
|
"dev": "yarn build:rollup --watch",
|
|
37
|
-
"lint": "yarn typecheck && eslint
|
|
37
|
+
"lint": "yarn typecheck && eslint .",
|
|
38
38
|
"prebuild": "rimraf dist",
|
|
39
39
|
"size": "yarn size-limit",
|
|
40
40
|
"test": "jest",
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
"typecheck": "tsc --noEmit"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"@aws-amplify/core": "
|
|
45
|
+
"@aws-amplify/core": "*",
|
|
46
46
|
"aws-amplify": "^6.6.0",
|
|
47
47
|
"react": "^16.14.0 || ^17.0 || ^18.0",
|
|
48
48
|
"react-dom": "^16.14.0 || ^17.0 || ^18.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@aws-amplify/ui": "6.6.
|
|
52
|
-
"@aws-amplify/ui-react": "6.5.
|
|
51
|
+
"@aws-amplify/ui": "6.6.2",
|
|
52
|
+
"@aws-amplify/ui-react": "6.5.2",
|
|
53
53
|
"@aws-sdk/client-rekognitionstreaming": "3.621.0",
|
|
54
54
|
"@aws-sdk/util-format-url": "3.609.0",
|
|
55
55
|
"@smithy/eventstream-serde-browser": "^2.0.4",
|
|
@@ -69,7 +69,6 @@
|
|
|
69
69
|
"xstate": "^4.33.6"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@rollup/plugin-commonjs": "^22.0.1",
|
|
73
72
|
"@types/jest-when": "^3.5.0",
|
|
74
73
|
"blob-polyfill": "^7.0.20220408",
|
|
75
74
|
"jest-canvas-mock": "^2.5.2",
|