@aws-amplify/ui-react-liveness 0.0.0-next-43a297e-20230410194306

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

@@ -0,0 +1,101 @@
+import { LivenessOvalDetails, IlluminationState, Face, FaceMatchState, BoundingBox, LivenessErrorState } from '../types';
+import { FaceDetection } from '../types/faceDetection';
+import { ClientFreshnessColorSequence } from '../types/service';
+import { ColorSequence, SessionInformation } from '@aws-sdk/client-rekognitionstreaming';
+interface OvalBoundingBox {
+    ovalBoundingBox: BoundingBox;
+    minOvalX: number;
+    maxOvalX: number;
+    minOvalY: number;
+    maxOvalY: number;
+}
+/**
+ * Returns the bounding box details from an oval
+ */
+export declare function getOvalBoundingBox(ovalDetails: LivenessOvalDetails): OvalBoundingBox;
+/**
+ * Returns the ratio of intersection and union of two bounding boxes.
+ */
+export declare function getIntersectionOverUnion(box1: BoundingBox, box2: BoundingBox): number;
+/**
+ * Returns the details of a randomly generated liveness oval
+ * from SDK
+ */
+export declare function getOvalDetailsFromSessionInformation({ sessionInformation, videoWidth, }: {
+    sessionInformation: SessionInformation;
+    videoWidth: number;
+}): LivenessOvalDetails;
+/**
+ * Returns the details of a statically generated liveness oval based on the video dimensions
+ */
+export declare function getStaticLivenessOvalDetails({ width, height, widthSeed, centerXSeed, centerYSeed, }: {
+    width: number;
+    height: number;
+    widthSeed?: number;
+    centerXSeed?: number;
+    centerYSeed?: number;
+}): LivenessOvalDetails;
+/**
+ * Draws the provided liveness oval on the canvas.
+ */
+export declare function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, }: {
+    canvas: HTMLCanvasElement;
+    oval: LivenessOvalDetails;
+    scaleFactor: number;
+    videoEl: HTMLVideoElement;
+}): void;
+interface FaceMatchStateInLivenessOval {
+    faceMatchState: FaceMatchState;
+    faceMatchPercentage: number;
+}
+/**
+ * Returns the state of the provided face with respect to the provided liveness oval.
+ */
+export declare function getFaceMatchStateInLivenessOval(face: Face, ovalDetails: LivenessOvalDetails, initialFaceIntersection: number, sessionInformation: SessionInformation): FaceMatchStateInLivenessOval;
+export declare function generateBboxFromLandmarks(face: Face, oval: LivenessOvalDetails): BoundingBox;
+/**
+ * Returns the illumination state in the provided video frame.
+ */
+export declare function estimateIllumination(videoEl: HTMLVideoElement): IlluminationState | undefined;
+/**
+ * Checks if the provided media device is a virtual camera.
+ * @param device
+ */
+export declare function isCameraDeviceVirtual(device: MediaDeviceInfo): boolean;
+export declare const LivenessErrorStateStringMap: Record<LivenessErrorState, string>;
+export declare const MOCK_COLOR_SEQUENCES: ColorSequence[];
+interface FillOverlayCanvasFractionalInput {
+    overlayCanvas: HTMLCanvasElement;
+    prevColor: string;
+    nextColor: string;
+    videoEl: HTMLVideoElement;
+    ovalDetails: LivenessOvalDetails;
+    heightFraction: number;
+    scaleFactor: number;
+}
+export declare function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, videoEl, ovalDetails, heightFraction, scaleFactor, }: FillOverlayCanvasFractionalInput): void;
+export declare const isClientFreshnessColorSequence: (obj: ClientFreshnessColorSequence | undefined) => obj is ClientFreshnessColorSequence;
+export declare function getColorsSequencesFromSessionInformation(sessionInformation: SessionInformation): ClientFreshnessColorSequence[];
+export declare function getRGBArrayFromColorString(colorStr: string): number[];
+export declare function getFaceMatchState(faceDetector: FaceDetection, videoEl: HTMLVideoElement): Promise<FaceMatchState>;
+export declare function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails, reduceThreshold, isMobile, }: {
+    faceDetector: FaceDetection;
+    videoEl: HTMLVideoElement;
+    ovalDetails?: LivenessOvalDetails;
+    reduceThreshold?: boolean;
+    isMobile?: boolean;
+}): Promise<boolean>;
+export declare function getBoundingBox({ deviceHeight, deviceWidth, height, width, top, left, }: {
+    deviceHeight: number;
+    deviceWidth: number;
+    height: number;
+    width: number;
+    top: number;
+    left: number;
+}): {
+    Height: number;
+    Width: number;
+    Top: number;
+    Left: number;
+};
+export {};

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

@@ -0,0 +1,37 @@
+import { AmazonAIInterpretPredictionsProvider } from '@aws-amplify/predictions';
+import { ClientSessionInformationEvent, LivenessResponseStream } from '@aws-sdk/client-rekognitionstreaming';
+import { VideoRecorder } from './videoRecorder';
+export interface StartLivenessStreamInput {
+    sessionId: string;
+}
+export interface StartLivenessStreamOutput {
+    sessionId: string;
+    stream: WebSocket;
+}
+export interface Credentials {
+    accessKeyId: string;
+    secretAccessKey: string;
+    sessionToken: string;
+}
+export declare const TIME_SLICE = 1000;
+export declare class LivenessStreamProvider extends AmazonAIInterpretPredictionsProvider {
+    sessionId: string;
+    region: string;
+    videoRecorder: VideoRecorder;
+    responseStream: AsyncIterable<LivenessResponseStream>;
+    private _reader;
+    private videoEl;
+    private _client;
+    private _stream;
+    private initPromise;
+    constructor(sessionId: string, region: string, stream: MediaStream, videoEl: HTMLVideoElement);
+    getResponseStream(): Promise<AsyncIterable<LivenessResponseStream>>;
+    startRecordingLivenessVideo(): void;
+    sendClientInfo(clientInfo: ClientSessionInformationEvent): void;
+    stopVideo(): Promise<void>;
+    dispatchStopVideoEvent(): void;
+    endStream(): Promise<undefined>;
+    private init;
+    private getAsyncGeneratorFromReadableStream;
+    private startLivenessVideoConnection;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Checks whether WebAssembly is supported in the current environment.
+ */
+export declare function isWebAssemblySupported(): boolean;
+/**
+ * Checks whether WebGL is supported in the current environment.
+ */
+export declare function isWebGLSupported(): boolean;

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

@@ -0,0 +1,30 @@
+/**
+ * The options for the video recorder.
+ */
+export interface VideoRecorderOptions {
+}
+/**
+ * Helper wrapper class over the native MediaRecorder.
+ */
+export declare class VideoRecorder {
+    videoStream: ReadableStream<Blob | string>;
+    recordingStartApiTimestamp: number | undefined;
+    recorderStartTimestamp: number | undefined;
+    recorderEndTimestamp: number | undefined;
+    firstChunkTimestamp: number | undefined;
+    recorderStarted: Promise<void>;
+    private _recorder;
+    private _stream;
+    private _options;
+    private _chunks;
+    private _recorderStopped;
+    constructor(stream: MediaStream, options?: VideoRecorderOptions);
+    getState(): string | undefined;
+    start(timeSlice?: number): void;
+    stop(): Promise<void>;
+    pause(): void;
+    clearRecordedData(): void;
+    destroy(): void;
+    dispatch(event: Event): void;
+    private _setupCallbacks;
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface CancelButtonProps {
+    ariaLabel: string;
+}
+export declare const CancelButton: React.FC<CancelButtonProps>;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface StartScreenComponents {
+    Header?: React.ComponentType;
+    PhotosensitiveWarning?: React.ComponentType;
+    Instructions?: React.ComponentType;
+}
+interface DefaultHeaderProps {
+    headingText: string;
+    bodyText: string;
+}
+export declare const DefaultHeader: ({ headingText, bodyText, }: DefaultHeaderProps) => JSX.Element;
+interface DefaultPhotosensitiveWarningProps {
+    headingText: string;
+    bodyText: string;
+    infoText: string;
+}
+export declare const DefaultPhotosensitiveWarning: ({ headingText, bodyText, infoText, }: DefaultPhotosensitiveWarningProps) => JSX.Element;
+interface DefaultInstructionsProps {
+    headingText: string;
+    goodFitCaptionText: string;
+    goodFitAltText: string;
+    tooFarCaptionText: string;
+    tooFarAltText: string;
+    steps: string[];
+}
+export declare const DefaultInstructions: ({ headingText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, steps, }: DefaultInstructionsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { LivenessErrorState } from '../service';
+import { ErrorDisplayText } from '../displayText';
+export interface CheckScreenComponents {
+    ErrorView?: React.ComponentType<FaceLivenessErrorModalProps>;
+}
+export interface FaceLivenessErrorModalProps {
+    children: React.ReactNode;
+    displayText?: Partial<ErrorDisplayText>;
+    onRetry: () => void;
+}
+export declare const renderErrorModal: ({ errorState, overrideErrorDisplayText }: {
+    errorState: LivenessErrorState;
+    overrideErrorDisplayText?: Partial<{
+        timeoutHeaderText: string;
+        timeoutMessageText: string;
+        faceDistanceHeaderText: string;
+        faceDistanceMessageText: string;
+        clientHeaderText: string;
+        clientMessageText: string;
+        serverHeaderText: string;
+        serverMessageText: string;
+        landscapeHeaderText: string;
+        landscapeMessageText: string;
+        portraitMessageText: string;
+        tryAgainText: string;
+    }> | undefined;
+}) => JSX.Element | null;
+export declare const FaceLivenessErrorModal: React.FC<FaceLivenessErrorModalProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface GoodFitIllustrationProps {
+    title: string;
+    testId?: string;
+}
+export declare const GoodFitIllustration: React.FC<GoodFitIllustrationProps>;
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IlluminationState, FaceMatchState } from '../service';
+import { HintDisplayText } from '../displayText';
+export declare const selectErrorState: import("../hooks").LivenessSelectorFn<import("../service").LivenessErrorState | null>;
+export declare const selectFaceMatchState: import("../hooks").LivenessSelectorFn<FaceMatchState>;
+export declare const selectIlluminationState: import("../hooks").LivenessSelectorFn<IlluminationState>;
+export declare const selectIsFaceFarEnoughBeforeRecording: import("../hooks").LivenessSelectorFn<boolean>;
+export declare const selectFaceMatchStateBeforeStart: import("../hooks").LivenessSelectorFn<FaceMatchState>;
+export interface HintProps {
+    hintDisplayText: Required<HintDisplayText>;
+}
+export declare const Hint: React.FC<HintProps>;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface LandscapeErrorModalProps {
+    onRetry: () => void;
+    header: string;
+    portraitMessage: string;
+    landscapeMessage: string;
+    tryAgainText: string;
+}
+export declare const LandscapeErrorModal: React.FC<LandscapeErrorModalProps>;
+export {};

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

@@ -0,0 +1,9 @@
+/**
+ * Copied from src/primitives/Alert/AlertIcon.tsx because we want to re-use the icon but it is not currently expored by AlertIcon.
+ * We currently don't want to make a change to the AlertIcon primitive itself and may expose the icon in the future but for now so as not to introduce cross component dependencies we have duplicated it.
+ */
+import * as React from 'react';
+export interface LivenessIconWithPopoverProps {
+    children: string;
+}
+export declare const LivenessIconWithPopover: React.FC<LivenessIconWithPopoverProps>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MatchIndicatorProps {
+    percentage: number;
+    initialPercentage?: number;
+    testId?: string;
+}
+export declare const MatchIndicator: React.FC<MatchIndicatorProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { FlexProps } from '@aws-amplify/ui-react';
+interface AnchorOrigin {
+    horizontal: 'start' | 'center' | 'end';
+    vertical: 'start' | 'center' | 'end' | 'space-between';
+}
+interface OverlayProps extends FlexProps {
+    anchorOrigin?: AnchorOrigin;
+}
+export declare const Overlay: React.FC<OverlayProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface RecordingIconProps {
+    children: string;
+}
+export declare const RecordingIcon: React.FC<RecordingIconProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FlexProps } from '@aws-amplify/ui-react';
+interface StartScreenFigureProps extends FlexProps {
+    caption: string;
+    variation?: 'defaut' | 'error' | 'success';
+}
+export declare const StartScreenFigure: React.FC<StartScreenFigureProps>;
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ViewProps } from '@aws-amplify/ui-react';
+interface ToastProps extends ViewProps {
+    variation?: 'default' | 'primary' | 'error';
+    size?: 'medium' | 'large';
+    heading?: string;
+}
+export declare const Toast: React.FC<ToastProps>;
+export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TooFarIllustrationProps {
+    title: string;
+    testId?: string;
+}
+export declare const TooFarIllustration: React.FC<TooFarIllustrationProps>;
+export {};

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

@@ -0,0 +1,8 @@
+export * from './CancelButton';
+export * from './Hint';
+export * from './MatchIndicator';
+export * from './Overlay';
+export * from './RecordingIcon';
+export * from './StartScreenFigure';
+export * from './GoodFitIllustration';
+export * from './TooFarIllustration';

package/dist/types/components/FaceLivenessDetector/types/classNames.d.ts

@@ -0,0 +1,27 @@
+export declare enum LivenessClassNames {
+    CameraModule = "amplify-liveness-camera-module",
+    CancelContainer = "amplify-liveness-cancel-container",
+    CancelButton = "amplify-liveness-cancel-button",
+    CountdownContainer = "amplify-liveness-countdown-container",
+    DescriptionBullet = "amplify-liveness-description-bullet",
+    DescriptionBulletIndex = "amplify-liveness-description-bullet__index",
+    DescriptionBulletIndexText = "amplify-liveness-description-bullet__index__text",
+    DescriptionBulletMessage = "amplify-liveness-description-bullet__message",
+    FadeOut = "amplify-liveness-fade-out",
+    FreshnessCanvas = "amplify-liveness-freshness-canvas",
+    InstructionList = "amplify-liveness-instruction-list",
+    InstructionOverlay = "amplify-liveness-instruction-overlay",
+    Figure = "amplify-liveness-figure",
+    FigureCaption = "amplify-liveness-figure__caption",
+    FigureIcon = "amplify-liveness-figure__icon",
+    FigureImage = "amplify-liveness-figure__image",
+    Figures = "amplify-liveness-figures",
+    Loader = "amplify-liveness-loader",
+    MatchIndicator = "amplify-liveness-match-indicator",
+    OvalCanvas = "amplify-liveness-oval-canvas",
+    RecordingIconContainer = "amplify-liveness-recording-icon-container",
+    RecordingIcon = "amplify-liveness-recording-icon",
+    Toast = "amplify-liveness-toast",
+    Video = "amplify-liveness-video",
+    VideoAnchor = "amplify-liveness-video-anchor"
+}

package/dist/types/components/FaceLivenessDetector/utils/device.d.ts

@@ -0,0 +1,10 @@
+export declare function isMobileScreen(): boolean;
+export declare function isIOS(): boolean;
+export declare function isPortrait(): boolean;
+/**
+ * Use window.matchMedia to direct landscape orientation
+ * screen.orientation is not supported in Safari so we will use
+ * media query detection to listen for changes instead.
+ * @returns MediaQueryList object
+ */
+export declare function getLandscapeMediaQuery(): MediaQueryList;

package/dist/types/components/FaceLivenessDetector/utils/getDisplayText.d.ts

@@ -0,0 +1,17 @@
+import { LivenessDisplayText, HintDisplayText, CameraDisplayText, InstructionDisplayText, StreamDisplayText, ErrorDisplayText } from '../displayText';
+interface LivenessDisplayTextInterface {
+    hintDisplayText: Required<HintDisplayText>;
+    cameraDisplayText: Required<CameraDisplayText>;
+    instructionDisplayText: Required<InstructionDisplayText>;
+    streamDisplayText: Required<StreamDisplayText>;
+    errorDisplayText: Required<ErrorDisplayText>;
+}
+/**
+ * Merges optional displayText prop with
+ * defaultLivenessDisplayText and returns more bite size portions to pass
+ * down to child components of FaceLivenessDetector.
+ * @param overrideDisplayText
+ * @returns hintDisplayText, cameraDisplayText, instructionDisplayText, cancelLivenessCheckText
+ */
+export declare function getDisplayText(overrideDisplayText: LivenessDisplayText | undefined): LivenessDisplayTextInterface;
+export {};

package/dist/types/components/index.d.ts

@@ -0,0 +1 @@
+export * from './FaceLivenessDetector';

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { FaceLivenessDetector, FaceLivenessDetectorProps } from './components';

package/dist/types/styles.d.ts

@@ -0,0 +1 @@
+import './styles.css';

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.0.0-liveness-20d2db2-20230302053408";

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@aws-amplify/ui-react-liveness",
+  "version": "0.0.0-next-43a297e-20230410194306",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "browser": {
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "dist/types/index.d.ts",
+  "sideEffects": [
+    "dist/**/*.css"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aws-amplify/amplify-ui",
+    "directory": "packages/react-liveness"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "yarn build:rollup",
+    "build:rollup": "rollup --config",
+    "check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react-liveness\"'",
+    "clean": "rimraf dist node_modules",
+    "dev": "yarn build:rollup --watch",
+    "lint": "yarn typecheck && eslint src",
+    "prebuild": "rimraf dist",
+    "size": "yarn size-limit",
+    "test": "jest",
+    "test:ci": "yarn test && yarn check:esm",
+    "test:watch": "yarn test --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "aws-amplify": ">= 5.0.1",
+    "react": ">= 16.14.0",
+    "react-dom": ">= 16.14.0"
+  },
+  "dependencies": {
+    "@aws-amplify/ui": "0.0.0-next-43a297e-20230410194306",
+    "@aws-amplify/ui-react": "0.0.0-next-43a297e-20230410194306",
+    "@aws-sdk/client-rekognitionstreaming": "3.309.0",
+    "@tensorflow-models/blazeface": "0.0.7",
+    "@tensorflow/tfjs-backend-cpu": "3.11.0",
+    "@tensorflow/tfjs-backend-wasm": "3.11.0",
+    "@tensorflow/tfjs-converter": "3.11.0",
+    "@tensorflow/tfjs-core": "3.11.0",
+    "@xstate/react": "3.0.0",
+    "classnames": "2.3.1",
+    "nanoid": "3.1.31",
+    "react-countdown-circle-timer": "^2.5.4",
+    "xstate": "^4.33.6"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@size-limit/preset-big-lib": "^7.0.8",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^26.0.23",
+    "@types/jest-when": "^3.5.0",
+    "@types/react": "^17.0.2",
+    "blob-polyfill": "^7.0.20220408",
+    "eslint": "^8.13.0",
+    "eslint-config-amplify-ui": "0.0.0",
+    "jest": "^27.0.4",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-when": "^3.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.70.0",
+    "rollup-plugin-node-externals": "^4.1.1",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "size-limit": "^7.0.8",
+    "ts-jest": "^27.0.3",
+    "web-streams-polyfill": "^3.2.1"
+  },
+  "size-limit": [
+    {
+      "name": "FaceLivenessDetector",
+      "path": "dist/esm/index.mjs",
+      "import": "{ FaceLivenessDetector }",
+      "limit": "275 kB"
+    }
+  ]
+}