@aws-amplify/ui-react-liveness 3.0.13 → 3.0.15

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/Signer.mjs

@@ -0,0 +1,18 @@
+import { SignatureV4 } from '@smithy/signature-v4';
+
+// override aws sdk default value of 60
+const REQUEST_EXPIRY = 299;
+class Signer extends SignatureV4 {
+    presign(request, options) {
+        return super.presign(request, {
+            ...options,
+            expiresIn: REQUEST_EXPIRY,
+            // `headers` that should not be signed. Liveness WebSocket
+            // request omits `headers` except for required `host` header. Signature
+            // could be a mismatch if other `headers` are signed
+            unsignableHeaders: new Set(Object.keys(request.headers).filter((header) => header !== 'host')),
+        });
+    }
+}
+
+export { REQUEST_EXPIRY, Signer };

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/createStreamingClient.mjs

@@ -0,0 +1,27 @@
+import { RekognitionStreamingClient } from '@aws-sdk/client-rekognitionstreaming';
+import { getAmplifyUserAgent } from '@aws-amplify/core/internals/utils';
+import { getLivenessUserAgent } from '../../../utils/platform.mjs';
+import { CustomWebSocketFetchHandler } from './CustomWebSocketFetchHandler.mjs';
+import { resolveCredentials } from './resolveCredentials.mjs';
+import { Signer } from './Signer.mjs';
+
+const CONNECTION_TIMEOUT = 10000;
+const CUSTOM_USER_AGENT = `${getAmplifyUserAgent()} ${getLivenessUserAgent()}`;
+async function createStreamingClient({ credentialsProvider, endpointOverride, region, }) {
+    const credentials = await resolveCredentials(credentialsProvider);
+    const clientconfig = {
+        credentials,
+        customUserAgent: CUSTOM_USER_AGENT,
+        region,
+        requestHandler: new CustomWebSocketFetchHandler({
+            connectionTimeout: CONNECTION_TIMEOUT,
+        }),
+        signerConstructor: Signer,
+    };
+    if (endpointOverride) {
+        clientconfig.endpointProvider = () => ({ url: new URL(endpointOverride) });
+    }
+    return new RekognitionStreamingClient(clientconfig);
+}
+
+export { createStreamingClient };

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/resolveCredentials.mjs

@@ -0,0 +1,38 @@
+import { fetchAuthSession } from 'aws-amplify/auth';
+
+const isCredentialsProvider = (credentialsProvider) => typeof credentialsProvider === 'function';
+// the return interface of `fetchAuthSession` includes `credentials` as
+// optional, but `credentials` is always returned. If `fetchAuthSession`
+// is called for an unauthenticated end user, values of `accessKeyId`
+// and `secretAccessKey` are `undefined`
+const isCredentials = (credentials) => !!(credentials?.accessKeyId && credentials?.secretAccessKey);
+/**
+ * Resolves the `credentials` param to be passed to `RekognitionStreamingClient` which accepts either:
+ * - a `credentials` object
+ * - a `credentialsProvider` callback
+ *
+ * @param credentialsProvider optional `credentialsProvider` callback
+ * @returns {Promise<AwsCredentials | AwsCredentialProvider>} `credentials` object or valid `credentialsProvider` callback
+ */
+async function resolveCredentials(credentialsProvider) {
+    const hasCredentialsProvider = isCredentialsProvider(credentialsProvider);
+    if (hasCredentialsProvider) {
+        return credentialsProvider;
+    }
+    if (credentialsProvider && !hasCredentialsProvider) {
+        throw new Error('Invalid credentialsProvider');
+    }
+    try {
+        const result = (await fetchAuthSession()).credentials;
+        if (isCredentials(result)) {
+            return result;
+        }
+        throw new Error('Missing credentials');
+    }
+    catch (e) {
+        const { message } = e;
+        throw new Error(`Invalid credentials: ${message}`);
+    }
+}
+
+export { resolveCredentials };

package/dist/esm/components/FaceLivenessDetector/service/utils/liveness.mjs

@@ -2,7 +2,6 @@ import { FaceMatchState, IlluminationState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
 import { FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD_MOBILE, REDUCED_THRESHOLD } from './constants.mjs';
 
-/* eslint-disable */
 /**
  * Returns the random number between min and max
  * seeded with the provided random seed.
@@ -93,31 +92,6 @@ function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXS
         height: Math.floor(ovalHeight),
     };
 }
-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);
-    const ovalDetails = getStaticLivenessOvalDetails({
-        width: width,
-        height: height,
-        ratioMultiplier: 0.5,
-    });
-    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;
-    // Draw oval in canvas using ovalDetails and scaleFactor
-    drawLivenessOvalInCanvas({
-        canvas: canvasEl,
-        oval: ovalDetails,
-        scaleFactor,
-        videoEl: videoEl,
-        isStartScreen: true,
-    });
-}
 /**
  * Draws the provided liveness oval on the canvas.
  */
@@ -162,6 +136,31 @@ function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartS
         throw new Error('Cannot find Canvas.');
     }
 }
+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);
+    const ovalDetails = getStaticLivenessOvalDetails({
+        width: width,
+        height: height,
+        ratioMultiplier: 0.5,
+    });
+    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;
+    // Draw oval in canvas using ovalDetails and scaleFactor
+    drawLivenessOvalInCanvas({
+        canvas: canvasEl,
+        oval: ovalDetails,
+        scaleFactor,
+        videoEl: videoEl,
+        isStartScreen: true,
+    });
+}
 function clearOvalCanvas({ canvas, }) {
     const ctx = canvas.getContext('2d');
     if (ctx) {
@@ -172,9 +171,43 @@ function clearOvalCanvas({ canvas, }) {
         throw new Error('Cannot find Canvas.');
     }
 }
+function getPupilDistanceAndFaceHeight(face) {
+    const { leftEye, rightEye, mouth } = face;
+    const eyeCenter = [];
+    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
+    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
+    const pupilDistance = Math.sqrt((leftEye[0] - rightEye[0]) ** 2 + (leftEye[1] - rightEye[1]) ** 2);
+    const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
+    return { pupilDistance, faceHeight };
+}
+function generateBboxFromLandmarks(face, oval) {
+    const { leftEye, rightEye, nose, leftEar, rightEar, top: faceTop, height: faceHeight, } = face;
+    const { height: ovalHeight, centerY } = oval;
+    const ovalTop = centerY - ovalHeight / 2;
+    const eyeCenter = [];
+    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
+    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
+    const { pupilDistance: pd, faceHeight: fh } = getPupilDistanceAndFaceHeight(face);
+    const alpha = 2.0, gamma = 1.8;
+    const ow = (alpha * pd + gamma * fh) / 2;
+    const oh = 1.618 * ow;
+    let cx;
+    if (eyeCenter[1] <= (ovalTop + ovalHeight) / 2) {
+        cx = (eyeCenter[0] + nose[0]) / 2;
+    }
+    else {
+        cx = eyeCenter[0];
+    }
+    const bottom = faceTop + faceHeight;
+    const top = bottom - oh;
+    const left = Math.min(cx - ow / 2, rightEar[0]);
+    const right = Math.max(cx + ow / 2, leftEar[0]);
+    return { bottom, left, right, top };
+}
 /**
  * Returns the state of the provided face with respect to the provided liveness oval.
  */
+// eslint-disable-next-line max-params
 function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersection, sessionInformation) {
     let faceMatchState;
     const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
@@ -201,7 +234,7 @@ function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersect
     const faceDetectionWidthThreshold = ovalDetails.width * FaceIouWidthThreshold;
     const faceDetectionHeightThreshold = ovalDetails.height * FaceIouHeightThreshold;
     /** From Science
-     * p=max(min(1,0.75∗(si​−s0​)/(st​−s0​)+0.25)),0)
+     * p=max(min(1,0.75∗(si−s0)/(st−s0)+0.25)),0)
      */
     const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
         (intersectionThreshold - initialFaceIntersection) +
@@ -228,44 +261,6 @@ function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersect
     }
     return { faceMatchState, faceMatchPercentage };
 }
-function getPupilDistanceAndFaceHeight(face) {
-    const { leftEye, rightEye, mouth } = face;
-    const eyeCenter = [];
-    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
-    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
-    const pupilDistance = Math.sqrt((leftEye[0] - rightEye[0]) ** 2 + (leftEye[1] - rightEye[1]) ** 2);
-    const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
-    return { pupilDistance, faceHeight };
-}
-function generateBboxFromLandmarks(face, oval) {
-    const { leftEye, rightEye, nose, leftEar, rightEar, top: faceTop, height: faceHeight, } = face;
-    const { height: ovalHeight, centerY } = oval;
-    const ovalTop = centerY - ovalHeight / 2;
-    const eyeCenter = [];
-    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
-    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
-    const { pupilDistance: pd, faceHeight: fh } = getPupilDistanceAndFaceHeight(face);
-    const alpha = 2.0, gamma = 1.8;
-    const ow = (alpha * pd + gamma * fh) / 2;
-    const oh = 1.618 * ow;
-    let cx;
-    if (eyeCenter[1] <= (ovalTop + ovalHeight) / 2) {
-        cx = (eyeCenter[0] + nose[0]) / 2;
-    }
-    else {
-        cx = eyeCenter[0];
-    }
-    const faceBottom = faceTop + faceHeight;
-    const top = faceBottom - oh;
-    const left = Math.min(cx - ow / 2, rightEar[0]);
-    const right = Math.max(cx + ow / 2, leftEar[0]);
-    return {
-        left: left,
-        top: top,
-        right: right,
-        bottom: faceBottom,
-    };
-}
 /**
  * Returns the illumination state in the provided video frame.
  */
@@ -381,7 +376,7 @@ function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, vide
 const isClientFreshnessColorSequence = (obj) => !!obj;
 function getColorsSequencesFromSessionInformation(sessionInformation) {
     const colorSequenceFromSessionInfo = sessionInformation.Challenge.FaceMovementAndLightChallenge
-        .ColorSequences || [];
+        .ColorSequences ?? [];
     const colorSequences = colorSequenceFromSessionInfo.map(({ FreshnessColor, DownscrollDuration: downscrollDuration, FlatDisplayDuration: flatDisplayDuration, }) => {
         const colorArray = FreshnessColor.RGB;
         const color = `rgb(${colorArray[0]},${colorArray[1]},${colorArray[2]})`;
@@ -439,7 +434,7 @@ async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails
         case 1: {
             //exactly one face detected, match face with oval;
             detectedFace = detectedFaces[0];
-            const width = ovalDetails.width;
+            const { width } = ovalDetails;
             const { pupilDistance, faceHeight } = getPupilDistanceAndFaceHeight(detectedFace);
             const alpha = 2.0, gamma = 1.8;
             const calibratedPupilDistance = (alpha * pupilDistance + gamma * faceHeight) / 2 / alpha;

package/dist/esm/components/FaceLivenessDetector/service/utils/streamProvider.mjs

@@ -1,9 +1,6 @@
-import { getAmplifyUserAgent } from '@aws-amplify/core/internals/utils';
-import { fetchAuthSession } from 'aws-amplify/auth';
-import { RekognitionStreamingClient, StartFaceLivenessSessionCommand } from '@aws-sdk/client-rekognitionstreaming';
+import { StartFaceLivenessSessionCommand } from '@aws-sdk/client-rekognitionstreaming';
 import { VideoRecorder } from './videoRecorder.mjs';
-import { getLivenessUserAgent } from '../../utils/platform.mjs';
-import { CustomWebSocketFetchHandler } from './CustomWebSocketFetchHandler.mjs';
+import { createStreamingClient } from './createStreamingClient/createStreamingClient.mjs';
 
 const TIME_SLICE = 1000;
 function isBlob(obj) {
@@ -34,9 +31,7 @@ class LivenessStreamProvider {
         this.videoRecorder.start(TIME_SLICE);
     }
     sendClientInfo(clientInfo) {
-        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', {
-            data: { clientInfo },
-        }));
+        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', { data: { clientInfo } }));
     }
     async stopVideo() {
         await this.videoRecorder.stop();
@@ -48,32 +43,15 @@ class LivenessStreamProvider {
         if (this.videoRecorder.getState() === 'recording') {
             await this.stopVideo();
         }
-        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', {
-            data: { code: code },
-        }));
+        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', { data: { code } }));
         return;
     }
     async init() {
-        const credentials = this.credentialProvider ?? (await fetchAuthSession()).credentials;
-        if (!credentials) {
-            throw new Error('No credentials');
-        }
-        const clientconfig = {
-            credentials,
+        this._client = await createStreamingClient({
+            credentialsProvider: this.credentialProvider,
+            endpointOverride: this.endpointOverride,
             region: this.region,
-            customUserAgent: `${getAmplifyUserAgent()} ${getLivenessUserAgent()}`,
-            requestHandler: new CustomWebSocketFetchHandler({
-                connectionTimeout: 10000,
-            }),
-        };
-        if (this.endpointOverride) {
-            const override = this.endpointOverride;
-            clientconfig.endpointProvider = () => {
-                const url = new URL(override);
-                return { url };
-            };
-        }
-        this._client = new RekognitionStreamingClient(clientconfig);
+        });
         this.responseStream = await this.startLivenessVideoConnection();
     }
     // Creates a generator from a stream of video chunks and livenessActionDocuments and yields VideoEvent and ClientEvents
@@ -83,8 +61,7 @@ class LivenessStreamProvider {
         this._reader = stream.getReader();
         return async function* () {
             while (true) {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                const { done, value } = await current._reader.read();
+                const { done, value } = (await current._reader.read());
                 if (done) {
                     return;
                 }
@@ -93,7 +70,7 @@ class LivenessStreamProvider {
                     // sending an empty video chunk signals that we have ended sending video
                     yield {
                         VideoEvent: {
-                            VideoChunk: [],
+                            VideoChunk: new Uint8Array([]),
                             TimestampMillis: Date.now(),
                         },
                     };
@@ -120,7 +97,9 @@ class LivenessStreamProvider {
                 else if (isEndStreamWithCodeEvent(value)) {
                     yield {
                         VideoEvent: {
-                            VideoChunk: [],
+                            VideoChunk: new Uint8Array([]),
+                            // this is a custom type that does not match LivenessRequestStream.
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                             TimestampMillis: { closeCode: value.code },
                         },
                     };
@@ -141,4 +120,4 @@ class LivenessStreamProvider {
     }
 }
 
-export { LivenessStreamProvider, TIME_SLICE };
+export { LivenessStreamProvider };

package/dist/esm/components/FaceLivenessDetector/service/utils/videoRecorder.mjs

@@ -2,12 +2,11 @@
  * Helper wrapper class over the native MediaRecorder.
  */
 class VideoRecorder {
-    constructor(stream, options = {}) {
+    constructor(stream) {
         if (typeof MediaRecorder === 'undefined') {
             throw Error('MediaRecorder is not supported by this browser');
         }
         this._stream = stream;
-        this._options = options;
         this._chunks = [];
         this._recorder = new MediaRecorder(stream, { bitsPerSecond: 1000000 });
         this._setupCallbacks();

package/dist/esm/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.mjs

@@ -9,12 +9,8 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import '@xstate/react';
 import '../providers/FaceLivenessDetectorProvider.mjs';

package/dist/esm/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.mjs

@@ -9,12 +9,8 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import { Toast } from './Toast.mjs';
 import { Overlay } from './Overlay.mjs';

package/dist/esm/components/FaceLivenessDetector/shared/Hint.mjs

@@ -7,12 +7,8 @@ import '@tensorflow-models/face-detection';
 import '@tensorflow/tfjs-backend-wasm';
 import '@tensorflow/tfjs-backend-cpu';
 import '@aws-amplify/core/internals/utils';
-import 'aws-amplify/auth';
 import '@aws-sdk/client-rekognitionstreaming';
-import '@aws-sdk/util-format-url';
-import '@smithy/eventstream-serde-browser';
-import '@smithy/fetch-http-handler';
-import '@smithy/protocol-http';
+import '../service/utils/createStreamingClient/createStreamingClient.mjs';
 import '../service/utils/freshnessColorDisplay.mjs';
 import { useLivenessActor } from '../hooks/useLivenessActor.mjs';
 import { createLivenessSelector, useLivenessSelector } from '../hooks/useLivenessSelector.mjs';

package/dist/esm/components/FaceLivenessDetector/types/classNames.mjs

@@ -14,11 +14,6 @@ var LivenessClassNames;
     LivenessClassNames["FreshnessCanvas"] = "amplify-liveness-freshness-canvas";
     LivenessClassNames["InstructionList"] = "amplify-liveness-instruction-list";
     LivenessClassNames["InstructionOverlay"] = "amplify-liveness-instruction-overlay";
-    LivenessClassNames["Figure"] = "amplify-liveness-figure";
-    LivenessClassNames["FigureCaption"] = "amplify-liveness-figure__caption";
-    LivenessClassNames["FigureIcon"] = "amplify-liveness-figure__icon";
-    LivenessClassNames["FigureImage"] = "amplify-liveness-figure__image";
-    LivenessClassNames["Figures"] = "amplify-liveness-figures";
     LivenessClassNames["Hint"] = "amplify-liveness-hint";
     LivenessClassNames["HintText"] = "amplify-liveness-hint__text";
     LivenessClassNames["LandscapeErrorModal"] = "amplify-liveness-landscape-error-modal";

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.0.13';
+const VERSION = '3.0.15';
 
 export { VERSION };