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

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

@@ -83,8 +83,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 +92,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 +119,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 +142,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/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.14';
 
 export { VERSION };