@aws-amplify/ui-react-liveness 2.0.11 → 3.0.0

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

@@ -1 +1,462 @@
-import{__awaiter as t}from"tslib";import{FaceMatchState as e,IlluminationState as o}from"../types/liveness.mjs";import{LivenessErrorState as n}from"../types/error.mjs";import{FACE_DISTANCE_THRESHOLD as i,REDUCED_THRESHOLD_MOBILE as r,REDUCED_THRESHOLD as a}from"./constants.mjs";function h(t,e,o){return t*(o-e)+e}function l(t){const e=t.flippedCenterX-t.width/2,o=t.flippedCenterX+t.width/2,n=t.centerY-t.height/2,i=t.centerY+t.height/2;return{ovalBoundingBox:{left:e,top:n,right:o,bottom:i},minOvalX:e,maxOvalX:o,minOvalY:n,maxOvalY:i}}function c(t,e){const o=Math.max(t.left,e.left),n=Math.max(t.top,e.top),i=Math.min(t.right,e.right),r=Math.min(t.bottom,e.bottom),a=Math.abs(Math.max(0,i-o)*Math.max(0,r-n));if(0===a)return 0;return a/(Math.abs((t.right-t.left)*(t.bottom-t.top))+Math.abs((e.right-e.left)*(e.bottom-e.top))-a)}function s({sessionInformation:t,videoWidth:e}){var o,n;const i=null===(n=null===(o=null==t?void 0:t.Challenge)||void 0===o?void 0:o.FaceMovementAndLightChallenge)||void 0===n?void 0:n.OvalParameters;if(!(i&&i.CenterX&&i.CenterY&&i.Width&&i.Height))throw new Error("Oval parameters not returned from session information.");return{flippedCenterX:e-i.CenterX,centerX:i.CenterX,centerY:i.CenterY,width:i.Width,height:i.Height}}function d({width:t,height:e,widthSeed:o=1,centerXSeed:n=.5,centerYSeed:i=.5}){const r=e;let a=t;const l=.8*o,c=Math.floor(7*t/16),s=Math.floor(9*t/16),d=Math.floor(7*e/16),f=Math.floor(9*e/16),g=h(n,c,s),u=h(i,d,f);t>=e&&(a=3/4*r);const v=l*a,p=1.618*v;return{flippedCenterX:Math.floor(a-g),centerX:Math.floor(g),centerY:Math.floor(u),width:Math.floor(v),height:Math.floor(p)}}function f({canvas:t,oval:e,scaleFactor:o,videoEl:n}){const{flippedCenterX:i,centerY:r,width:a,height:h}=e,{width:l,height:c}=t.getBoundingClientRect(),s=t.getContext("2d");if(!s)throw new Error("Cannot find Canvas.");{s.clearRect(0,0,l,c),s.fillStyle="rgba(255, 255, 255, 1.0)",s.fillRect(0,0,l,c);const t={width:n.videoWidth,height:n.videoHeight},e={x:(l-t.width*o)/2,y:(c-t.height*o)/2};s.setTransform(o,0,0,o,e.x,e.y),s.beginPath(),s.ellipse(i,r,a/2,h/2,0,0,2*Math.PI),s.strokeStyle="#AEB3B7",s.lineWidth=3,s.stroke(),s.clip(),s.setTransform(1,0,0,1,0,0),s.clearRect(0,0,l,c)}}function g(t,o,n,i){var r,a;let h;const s=null===(a=null===(r=null==i?void 0:i.Challenge)||void 0===r?void 0:r.FaceMovementAndLightChallenge)||void 0===a?void 0:a.ChallengeConfig;if(!(s&&s.OvalIouThreshold&&s.OvalIouHeightThreshold&&s.OvalIouWidthThreshold&&s.FaceIouHeightThreshold&&s.FaceIouWidthThreshold))throw new Error("Challenge information not returned from session information.");const{OvalIouThreshold:d,OvalIouHeightThreshold:f,OvalIouWidthThreshold:g,FaceIouHeightThreshold:u,FaceIouWidthThreshold:p}=s,m=v(t,o),C=m.left,w=m.right,M=m.top,E=m.bottom,{ovalBoundingBox:O,minOvalX:x,minOvalY:b,maxOvalX:T,maxOvalY:I}=l(o),R=c(m,O),D=d,y=o.width*g,F=o.height*f,A=o.width*p,H=o.height*u,X=100*Math.max(Math.min(1,.75*(R-n)/(D-n)+.25),0);return h=R>D&&Math.abs(x-C)<y&&Math.abs(T-w)<y&&Math.abs(I-E)<F?e.MATCHED:b-M>H||E-I>H||x-C>A&&w-T>A?e.TOO_CLOSE:e.TOO_FAR,{faceMatchState:h,faceMatchPercentage:X}}function u(t){const{leftEye:e,rightEye:o,mouth:n}=t,i=[];i[0]=(e[0]+o[0])/2,i[1]=(e[1]+o[1])/2;return{pupilDistance:Math.sqrt(Math.pow(e[0]-o[0],2)+Math.pow(e[1]-o[1],2)),faceHeight:Math.sqrt(Math.pow(i[0]-n[0],2)+Math.pow(i[1]-n[1],2))}}function v(t,e){const{leftEye:o,rightEye:n,nose:i}=t,{height:r,centerY:a}=e,h=a-r/2,l=[];l[0]=(o[0]+n[0])/2,l[1]=(o[1]+n[1])/2;const{pupilDistance:c,faceHeight:s}=u(t),d=(2*c+1.8*s)/2,f=1.618*d;let g,v;l[1]<=(h+r)/2?(g=(l[0]+i[0])/2,v=(l[1]+i[1])/2):(g=l[0],v=l[1]);const p=g-d/2,m=v-f/2;return{left:p,top:m,right:p+d,bottom:m+f}}function p(t){const e=document.createElement("canvas");e.width=t.videoWidth,e.height=t.videoHeight;const n=e.getContext("2d");if(n){n.drawImage(t,0,0,e.width,e.height);const i=n.getImageData(0,0,e.width,e.height).data,r=8,a=new Array(r).fill(0);for(let t=0;t<i.length;t++){a[Math.round(.2126*i[t++]+.7152*i[t++]+.0722*i[t++])%32]++}let h=-1,l=0;for(let t=0;t<r;t++)a[t]>l&&(l=a[t],h=t);return e.remove(),0===h?o.DARK:h===r?o.BRIGHT:o.NORMAL}throw new Error("Cannot find Video Element.")}function m(t){return t.label.toLowerCase().includes("virtual")}function C({ctx:t,prevColor:e,nextColor:o,fraction:n}){const i=t.canvas.width,r=t.canvas.height;t.fillStyle=o,t.fillRect(0,0,i,r*n),1!==n&&(t.fillStyle=e,t.fillRect(0,r*n,i,r*(1-n)))}function w({overlayCanvas:t,prevColor:e,nextColor:o,videoEl:n,ovalDetails:i,heightFraction:r,scaleFactor:a}){const{x:h,y:l}=n.getBoundingClientRect(),{flippedCenterX:c,centerY:s,width:d,height:f}=i,g=c*a+h,u=s*a+l,v=t.width,p=t.height,m=t.getContext("2d");if(!m)throw new Error("Cannot find Overlay Canvas.");m.canvas.width=window.innerWidth,m.canvas.height=window.innerHeight,m.clearRect(0,0,v,p),C({ctx:m,prevColor:e,nextColor:o,fraction:r}),m.save(),m.beginPath(),m.rect(0,0,v,p),m.clip(),m.clearRect(0,0,v,p),m.globalAlpha=.9,C({ctx:m,prevColor:e,nextColor:o,fraction:r}),m.beginPath(),m.ellipse(g,u,d*a/2,f*a/2,0,0,2*Math.PI),m.strokeStyle="white",m.lineWidth=8,m.stroke(),m.clip(),m.clearRect(0,0,v,p),m.globalAlpha=.75,C({ctx:m,prevColor:e,nextColor:o,fraction:r}),m.restore()}const M=t=>!!t;function E(t){return(t.Challenge.FaceMovementAndLightChallenge.ColorSequences||[]).map((({FreshnessColor:t,DownscrollDuration:e,FlatDisplayDuration:o})=>{const n=t.RGB,i=`rgb(${n[0]},${n[1]},${n[2]})`;return void 0!==i&&void 0!==e&&void 0!==o?{color:i,downscrollDuration:e,flatDisplayDuration:o}:void 0})).filter(M)}function O(t){return t.slice(t.indexOf("(")+1,t.indexOf(")")).split(",").map((t=>parseInt(t)))}function x(o,n){return t(this,void 0,void 0,(function*(){let t;switch((yield o.detectFaces(n)).length){case 0:t=e.CANT_IDENTIFY;break;case 1:t=e.FACE_IDENTIFIED;break;default:t=e.TOO_MANY}return t}))}function b({faceDetector:e,videoEl:o,ovalDetails:h,reduceThreshold:l=!1,isMobile:c=!1}){return t(this,void 0,void 0,(function*(){const t=yield e.detectFaces(o);let s,d,f=!1;switch(t.length){case 0:d=n.FACE_DISTANCE_ERROR;break;case 1:{s=t[0];const e=h.width,{pupilDistance:o,faceHeight:g}=u(s),v=2;e&&(f=(v*o+1.8*g)/2/v/e<(l?c?r:a:i),f||(d=n.FACE_DISTANCE_ERROR));break}default:d=n.MULTIPLE_FACES_ERROR}return{isDistanceBelowThreshold:f,error:d}}))}function T({deviceHeight:t,deviceWidth:e,height:o,width:n,top:i,left:r}){return{Height:o/t,Width:n/e,Top:i/t,Left:r/e}}export{f as drawLivenessOvalInCanvas,p as estimateIllumination,w as fillOverlayCanvasFractional,v as generateBboxFromLandmarks,T as getBoundingBox,E as getColorsSequencesFromSessionInformation,x as getFaceMatchState,g as getFaceMatchStateInLivenessOval,c as getIntersectionOverUnion,l as getOvalBoundingBox,s as getOvalDetailsFromSessionInformation,O as getRGBArrayFromColorString,d as getStaticLivenessOvalDetails,m as isCameraDeviceVirtual,M as isClientFreshnessColorSequence,b as isFaceDistanceBelowThreshold};
+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.
+ */
+function getScaledValueFromRandomSeed(randomSeed, min, max) {
+    return randomSeed * (max - min) + min;
+}
+/**
+ * Returns the bounding box details from an oval
+ */
+function getOvalBoundingBox(ovalDetails) {
+    const minOvalX = ovalDetails.flippedCenterX - ovalDetails.width / 2;
+    const maxOvalX = ovalDetails.flippedCenterX + ovalDetails.width / 2;
+    const minOvalY = ovalDetails.centerY - ovalDetails.height / 2;
+    const maxOvalY = ovalDetails.centerY + ovalDetails.height / 2;
+    const ovalBoundingBox = {
+        left: minOvalX,
+        top: minOvalY,
+        right: maxOvalX,
+        bottom: maxOvalY,
+    };
+    return { ovalBoundingBox, minOvalX, maxOvalX, minOvalY, maxOvalY };
+}
+/**
+ * Returns the ratio of intersection and union of two bounding boxes.
+ */
+function getIntersectionOverUnion(box1, box2) {
+    const xA = Math.max(box1.left, box2.left);
+    const yA = Math.max(box1.top, box2.top);
+    const xB = Math.min(box1.right, box2.right);
+    const yB = Math.min(box1.bottom, box2.bottom);
+    const intersectionArea = Math.abs(Math.max(0, xB - xA) * Math.max(0, yB - yA));
+    if (intersectionArea === 0) {
+        return 0;
+    }
+    const boxAArea = Math.abs((box1.right - box1.left) * (box1.bottom - box1.top));
+    const boxBArea = Math.abs((box2.right - box2.left) * (box2.bottom - box2.top));
+    return intersectionArea / (boxAArea + boxBArea - intersectionArea);
+}
+/**
+ * Returns the details of a randomly generated liveness oval
+ * from SDK
+ */
+function getOvalDetailsFromSessionInformation({ sessionInformation, videoWidth, }) {
+    const ovalParameters = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
+        ?.OvalParameters;
+    if (!ovalParameters ||
+        !ovalParameters.CenterX ||
+        !ovalParameters.CenterY ||
+        !ovalParameters.Width ||
+        !ovalParameters.Height) {
+        throw new Error('Oval parameters not returned from session information.');
+    }
+    // We need to include a flippedCenterX for visualizing the oval on a flipped camera view
+    // The camera view we show the customer is flipped to making moving left and right more obvious
+    // The video stream sent to the liveness service is not flipped
+    return {
+        flippedCenterX: videoWidth - ovalParameters.CenterX,
+        centerX: ovalParameters.CenterX,
+        centerY: ovalParameters.CenterY,
+        width: ovalParameters.Width,
+        height: ovalParameters.Height,
+    };
+}
+/**
+ * Returns the details of a statically generated liveness oval based on the video dimensions
+ */
+function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXSeed = 0.5, centerYSeed = 0.5, ratioMultiplier = 0.8, }) {
+    const videoHeight = height;
+    let videoWidth = width;
+    const ovalRatio = widthSeed * ratioMultiplier;
+    const minOvalCenterX = Math.floor((7 * width) / 16);
+    const maxOvalCenterX = Math.floor((9 * width) / 16);
+    const minOvalCenterY = Math.floor((7 * height) / 16);
+    const maxOvalCenterY = Math.floor((9 * height) / 16);
+    const centerX = getScaledValueFromRandomSeed(centerXSeed, minOvalCenterX, maxOvalCenterX);
+    const centerY = getScaledValueFromRandomSeed(centerYSeed, minOvalCenterY, maxOvalCenterY);
+    if (width >= height) {
+        videoWidth = (3 / 4) * videoHeight;
+    }
+    const ovalWidth = ovalRatio * videoWidth;
+    const ovalHeight = 1.618 * ovalWidth;
+    return {
+        flippedCenterX: Math.floor(videoWidth - centerX),
+        centerX: Math.floor(centerX),
+        centerY: Math.floor(centerY),
+        width: Math.floor(ovalWidth),
+        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.
+ */
+function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartScreen, }) {
+    const { flippedCenterX, centerY, width, height } = oval;
+    const { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.restore();
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        // fill the canvas with a transparent rectangle
+        ctx.fillStyle = isStartScreen
+            ? getComputedStyle(canvas).getPropertyValue('--amplify-colors-background-primary')
+            : '#fff';
+        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+        // On mobile our canvas is the width/height of the full screen.
+        // We need to calculate horizontal and vertical translation to reposition
+        // our canvas drawing so the oval is still placed relative to the dimensions
+        // of the video element.
+        const baseDims = { width: videoEl.videoWidth, height: videoEl.videoHeight };
+        const translate = {
+            x: (canvasWidth - baseDims.width * scaleFactor) / 2,
+            y: (canvasHeight - baseDims.height * scaleFactor) / 2,
+        };
+        // Set the transform to scale
+        ctx.setTransform(scaleFactor, 0, 0, scaleFactor, translate.x, translate.y);
+        // draw the oval path
+        ctx.beginPath();
+        ctx.ellipse(flippedCenterX, centerY, width / 2, height / 2, 0, 0, 2 * Math.PI);
+        // add stroke to the oval path
+        ctx.strokeStyle = getComputedStyle(canvas).getPropertyValue('--amplify-colors-border-secondary');
+        ctx.lineWidth = 3;
+        ctx.stroke();
+        ctx.save();
+        ctx.clip();
+        // Restore default canvas transform matrix
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        // clear the oval content from the rectangle
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    }
+    else {
+        throw new Error('Cannot find Canvas.');
+    }
+}
+/**
+ * Returns the state of the provided face with respect to the provided liveness oval.
+ */
+function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersection, sessionInformation) {
+    let faceMatchState;
+    const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
+        ?.ChallengeConfig;
+    if (!challengeConfig ||
+        !challengeConfig.OvalIouThreshold ||
+        !challengeConfig.OvalIouHeightThreshold ||
+        !challengeConfig.OvalIouWidthThreshold ||
+        !challengeConfig.FaceIouHeightThreshold ||
+        !challengeConfig.FaceIouWidthThreshold) {
+        throw new Error('Challenge information not returned from session information.');
+    }
+    const { OvalIouThreshold, OvalIouHeightThreshold, OvalIouWidthThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold, } = challengeConfig;
+    const faceBoundingBox = generateBboxFromLandmarks(face, ovalDetails);
+    const minFaceX = faceBoundingBox.left;
+    const maxFaceX = faceBoundingBox.right;
+    const minFaceY = faceBoundingBox.top;
+    const maxFaceY = faceBoundingBox.bottom;
+    const { ovalBoundingBox, minOvalX, minOvalY, maxOvalX, maxOvalY } = getOvalBoundingBox(ovalDetails);
+    const intersection = getIntersectionOverUnion(faceBoundingBox, ovalBoundingBox);
+    const intersectionThreshold = OvalIouThreshold;
+    const ovalMatchWidthThreshold = ovalDetails.width * OvalIouWidthThreshold;
+    const ovalMatchHeightThreshold = ovalDetails.height * OvalIouHeightThreshold;
+    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)
+     */
+    const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
+        (intersectionThreshold - initialFaceIntersection) +
+        0.25), 0) * 100;
+    if (intersection > intersectionThreshold &&
+        Math.abs(minOvalX - minFaceX) < ovalMatchWidthThreshold &&
+        Math.abs(maxOvalX - maxFaceX) < ovalMatchWidthThreshold &&
+        Math.abs(maxOvalY - maxFaceY) < ovalMatchHeightThreshold) {
+        faceMatchState = FaceMatchState.MATCHED;
+    }
+    else if (minOvalY - minFaceY > faceDetectionHeightThreshold ||
+        maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
+        (minOvalX - minFaceX > faceDetectionWidthThreshold &&
+            maxFaceX - maxOvalX > faceDetectionWidthThreshold)) {
+        faceMatchState = FaceMatchState.TOO_CLOSE;
+    }
+    else {
+        faceMatchState = FaceMatchState.TOO_FAR;
+    }
+    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.
+ */
+function estimateIllumination(videoEl) {
+    const canvasEl = document.createElement('canvas');
+    canvasEl.width = videoEl.videoWidth;
+    canvasEl.height = videoEl.videoHeight;
+    const ctx = canvasEl.getContext('2d');
+    if (ctx) {
+        ctx.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
+        const frame = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height).data;
+        // histogram
+        const MAX_SCALE = 8;
+        const hist = new Array(MAX_SCALE).fill(0);
+        for (let i = 0; i < frame.length; i++) {
+            const luma = Math.round(frame[i++] * 0.2126 + frame[i++] * 0.7152 + frame[i++] * 0.0722);
+            hist[luma % 32]++;
+        }
+        let ind = -1, maxCount = 0;
+        for (let i = 0; i < MAX_SCALE; i++) {
+            if (hist[i] > maxCount) {
+                maxCount = hist[i];
+                ind = i;
+            }
+        }
+        canvasEl.remove();
+        if (ind === 0)
+            return IlluminationState.DARK;
+        if (ind === MAX_SCALE)
+            return IlluminationState.BRIGHT;
+        return IlluminationState.NORMAL;
+    }
+    else {
+        throw new Error('Cannot find Video Element.');
+    }
+}
+/**
+ * Checks if the provided media device is a virtual camera.
+ * @param device
+ */
+function isCameraDeviceVirtual(device) {
+    return device.label.toLowerCase().includes('virtual');
+}
+const INITIAL_ALPHA = 0.9;
+const SECONDARY_ALPHA = 0.75;
+function fillFractionalContext({ ctx, prevColor, nextColor, fraction, }) {
+    const canvasWidth = ctx.canvas.width;
+    const canvasHeight = ctx.canvas.height;
+    ctx.fillStyle = nextColor;
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight * fraction);
+    if (fraction !== 1) {
+        ctx.fillStyle = prevColor;
+        ctx.fillRect(0, canvasHeight * fraction, canvasWidth, canvasHeight * (1 - fraction));
+    }
+}
+function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, videoEl, ovalDetails, heightFraction, scaleFactor, }) {
+    const { x: videoX, y: videoY } = videoEl.getBoundingClientRect();
+    const { flippedCenterX, centerY, width, height } = ovalDetails;
+    const updatedCenterX = flippedCenterX * scaleFactor + videoX;
+    const updatedCenterY = centerY * scaleFactor + videoY;
+    const canvasWidth = overlayCanvas.width;
+    const canvasHeight = overlayCanvas.height;
+    const ctx = overlayCanvas.getContext('2d');
+    if (ctx) {
+        // Because the canvas is set to to 100% we need to manually set the height for the canvas to use pixel values
+        ctx.canvas.width = window.innerWidth;
+        ctx.canvas.height = window.innerHeight;
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        // fill the complete canvas
+        fillFractionalContext({
+            ctx,
+            prevColor,
+            nextColor,
+            fraction: heightFraction,
+        });
+        // save the current state
+        ctx.save();
+        // draw the rectangle path and fill it
+        ctx.beginPath();
+        ctx.rect(0, 0, canvasWidth, canvasHeight);
+        ctx.clip();
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.globalAlpha = INITIAL_ALPHA;
+        fillFractionalContext({
+            ctx,
+            prevColor,
+            nextColor,
+            fraction: heightFraction,
+        });
+        // draw the oval path and fill it
+        ctx.beginPath();
+        ctx.ellipse(updatedCenterX, updatedCenterY, (width * scaleFactor) / 2, (height * scaleFactor) / 2, 0, 0, 2 * Math.PI);
+        // add stroke to the oval path
+        ctx.strokeStyle = 'white';
+        ctx.lineWidth = 8;
+        ctx.stroke();
+        ctx.clip();
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.globalAlpha = SECONDARY_ALPHA;
+        fillFractionalContext({
+            ctx,
+            prevColor,
+            nextColor,
+            fraction: heightFraction,
+        });
+        // restore the state
+        ctx.restore();
+    }
+    else {
+        throw new Error('Cannot find Overlay Canvas.');
+    }
+}
+const isClientFreshnessColorSequence = (obj) => !!obj;
+function getColorsSequencesFromSessionInformation(sessionInformation) {
+    const colorSequenceFromSessionInfo = sessionInformation.Challenge.FaceMovementAndLightChallenge
+        .ColorSequences || [];
+    const colorSequences = colorSequenceFromSessionInfo.map(({ FreshnessColor, DownscrollDuration: downscrollDuration, FlatDisplayDuration: flatDisplayDuration, }) => {
+        const colorArray = FreshnessColor.RGB;
+        const color = `rgb(${colorArray[0]},${colorArray[1]},${colorArray[2]})`;
+        return typeof color !== 'undefined' &&
+            typeof downscrollDuration !== 'undefined' &&
+            typeof flatDisplayDuration !== 'undefined'
+            ? {
+                color,
+                downscrollDuration,
+                flatDisplayDuration,
+            }
+            : undefined;
+    });
+    return colorSequences.filter(isClientFreshnessColorSequence);
+}
+function getRGBArrayFromColorString(colorStr) {
+    return colorStr
+        .slice(colorStr.indexOf('(') + 1, colorStr.indexOf(')'))
+        .split(',')
+        .map((str) => parseInt(str));
+}
+async function getFaceMatchState(faceDetector, videoEl) {
+    const detectedFaces = await faceDetector.detectFaces(videoEl);
+    let faceMatchState;
+    switch (detectedFaces.length) {
+        case 0: {
+            //no face detected;
+            faceMatchState = FaceMatchState.CANT_IDENTIFY;
+            break;
+        }
+        case 1: {
+            //exactly one face detected, match face with oval;
+            faceMatchState = FaceMatchState.FACE_IDENTIFIED;
+            break;
+        }
+        default: {
+            //more than one face detected ;
+            faceMatchState = FaceMatchState.TOO_MANY;
+            break;
+        }
+    }
+    return faceMatchState;
+}
+async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails, reduceThreshold = false, isMobile = false, }) {
+    const detectedFaces = await faceDetector.detectFaces(videoEl);
+    let detectedFace;
+    let isDistanceBelowThreshold = false;
+    let error;
+    switch (detectedFaces.length) {
+        case 0: {
+            //no face detected;
+            error = LivenessErrorState.FACE_DISTANCE_ERROR;
+            break;
+        }
+        case 1: {
+            //exactly one face detected, match face with oval;
+            detectedFace = detectedFaces[0];
+            const width = ovalDetails.width;
+            const { pupilDistance, faceHeight } = getPupilDistanceAndFaceHeight(detectedFace);
+            const alpha = 2.0, gamma = 1.8;
+            const calibratedPupilDistance = (alpha * pupilDistance + gamma * faceHeight) / 2 / alpha;
+            if (width) {
+                isDistanceBelowThreshold =
+                    calibratedPupilDistance / width <
+                        (!reduceThreshold
+                            ? FACE_DISTANCE_THRESHOLD
+                            : isMobile
+                                ? REDUCED_THRESHOLD_MOBILE
+                                : REDUCED_THRESHOLD);
+                if (!isDistanceBelowThreshold) {
+                    error = LivenessErrorState.FACE_DISTANCE_ERROR;
+                }
+            }
+            break;
+        }
+        default: {
+            //more than one face detected
+            error = LivenessErrorState.MULTIPLE_FACES_ERROR;
+            break;
+        }
+    }
+    return { isDistanceBelowThreshold, error };
+}
+function getBoundingBox({ deviceHeight, deviceWidth, height, width, top, left, }) {
+    return {
+        Height: height / deviceHeight,
+        Width: width / deviceWidth,
+        Top: top / deviceHeight,
+        Left: left / deviceWidth,
+    };
+}
+
+export { drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getFaceMatchStateInLivenessOval, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };

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

@@ -1 +1,144 @@
-import{__awaiter as e,__asyncGenerator as i,__await as t}from"tslib";import{Credentials as o,getAmplifyUserAgent as n}from"@aws-amplify/core";import{RekognitionStreamingClient as r,StartFaceLivenessSessionCommand as s}from"@aws-sdk/client-rekognitionstreaming";import{VideoRecorder as d}from"./videoRecorder.mjs";import{getLivenessUserAgent as a}from"../../utils/platform.mjs";import{CustomWebSocketFetchHandler as l}from"./CustomWebSocketFetchHandler.mjs";const h=1e3;function c(e){return void 0!==e.Challenge}function v(e){return void 0!==e.code}class m{constructor({sessionId:e,region:i,stream:t,videoEl:o,credentialProvider:n,endpointOverride:r}){this.sessionId=e,this.region=i,this._stream=t,this.videoEl=o,this.videoRecorder=new d(t),this.credentialProvider=n,this.endpointOverride=r,this.initPromise=this.init()}getResponseStream(){return e(this,void 0,void 0,(function*(){return yield this.initPromise,this.responseStream}))}startRecordingLivenessVideo(){this.videoRecorder.start(1e3)}sendClientInfo(e){this.videoRecorder.dispatch(new MessageEvent("clientSesssionInfo",{data:{clientInfo:e}}))}stopVideo(){return e(this,void 0,void 0,(function*(){yield this.videoRecorder.stop()}))}dispatchStopVideoEvent(){this.videoRecorder.dispatch(new Event("stopVideo"))}endStreamWithCode(i){return e(this,void 0,void 0,(function*(){"recording"===this.videoRecorder.getState()&&(yield this.stopVideo()),this.videoRecorder.dispatch(new MessageEvent("endStreamWithCode",{data:{code:i}}))}))}init(){var i;return e(this,void 0,void 0,(function*(){const e=null!==(i=this.credentialProvider)&&void 0!==i?i:yield o.get();if(!e)throw new Error("No credentials");const t={credentials:e,region:this.region,customUserAgent:`${n()} ${a()}`,requestHandler:new l({connectionTimeout:1e4})};if(this.endpointOverride){const e=this.endpointOverride;t.endpointProvider=()=>({url:new URL(e)})}this._client=new r(t),this.responseStream=yield this.startLivenessVideoConnection()}))}getAsyncGeneratorFromReadableStream(e){const o=this;return this._reader=e.getReader(),function(){return i(this,arguments,(function*(){for(;;){const{done:e,value:i}=yield t(o._reader.read());if(e)return yield t(void 0);if("stopVideo"===i)yield yield t({VideoEvent:{VideoChunk:[],TimestampMillis:Date.now()}});else if(void 0!==i.arrayBuffer){const e=yield t(i.arrayBuffer()),o=new Uint8Array(e);o.length>0&&(yield yield t({VideoEvent:{VideoChunk:o,TimestampMillis:Date.now()}}))}else c(i)?yield yield t({ClientSessionInformationEvent:{Challenge:i.Challenge}}):v(i)&&(yield yield t({VideoEvent:{VideoChunk:[],TimestampMillis:{closeCode:i.code}}}))}}))}}startLivenessVideoConnection(){return e(this,void 0,void 0,(function*(){const e=this.getAsyncGeneratorFromReadableStream(this.videoRecorder.videoStream)();return(yield this._client.send(new s({ChallengeVersions:"FaceMovementAndLightChallenge_1.0.0",SessionId:this.sessionId,LivenessRequestStream:e,VideoWidth:this.videoEl.videoWidth.toString(),VideoHeight:this.videoEl.videoHeight.toString()}))).LivenessResponseStream}))}}export{m as LivenessStreamProvider,h as TIME_SLICE};
+import { getAmplifyUserAgent } from '@aws-amplify/core/internals/utils';
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { RekognitionStreamingClient, StartFaceLivenessSessionCommand } from '@aws-sdk/client-rekognitionstreaming';
+import { VideoRecorder } from './videoRecorder.mjs';
+import { getLivenessUserAgent } from '../../utils/platform.mjs';
+import { CustomWebSocketFetchHandler } from './CustomWebSocketFetchHandler.mjs';
+
+const TIME_SLICE = 1000;
+function isBlob(obj) {
+    return obj.arrayBuffer !== undefined;
+}
+function isClientSessionInformationEvent(obj) {
+    return obj.Challenge !== undefined;
+}
+function isEndStreamWithCodeEvent(obj) {
+    return obj.code !== undefined;
+}
+class LivenessStreamProvider {
+    constructor({ sessionId, region, stream, videoEl, credentialProvider, endpointOverride, }) {
+        this.sessionId = sessionId;
+        this.region = region;
+        this._stream = stream;
+        this.videoEl = videoEl;
+        this.videoRecorder = new VideoRecorder(stream);
+        this.credentialProvider = credentialProvider;
+        this.endpointOverride = endpointOverride;
+        this.initPromise = this.init();
+    }
+    async getResponseStream() {
+        await this.initPromise;
+        return this.responseStream;
+    }
+    startRecordingLivenessVideo() {
+        this.videoRecorder.start(TIME_SLICE);
+    }
+    sendClientInfo(clientInfo) {
+        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', {
+            data: { clientInfo },
+        }));
+    }
+    async stopVideo() {
+        await this.videoRecorder.stop();
+    }
+    dispatchStopVideoEvent() {
+        this.videoRecorder.dispatch(new Event('stopVideo'));
+    }
+    async endStreamWithCode(code) {
+        if (this.videoRecorder.getState() === 'recording') {
+            await this.stopVideo();
+        }
+        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', {
+            data: { code: code },
+        }));
+        return;
+    }
+    async init() {
+        const credentials = this.credentialProvider ?? (await fetchAuthSession()).credentials;
+        if (!credentials) {
+            throw new Error('No credentials');
+        }
+        const clientconfig = {
+            credentials,
+            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
+    getAsyncGeneratorFromReadableStream(stream) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const current = this;
+        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();
+                if (done) {
+                    return;
+                }
+                // Video chunks blobs should be sent as video events
+                if (value === 'stopVideo') {
+                    // sending an empty video chunk signals that we have ended sending video
+                    yield {
+                        VideoEvent: {
+                            VideoChunk: [],
+                            TimestampMillis: Date.now(),
+                        },
+                    };
+                }
+                else if (isBlob(value)) {
+                    const buffer = await value.arrayBuffer();
+                    const chunk = new Uint8Array(buffer);
+                    if (chunk.length > 0) {
+                        yield {
+                            VideoEvent: {
+                                VideoChunk: chunk,
+                                TimestampMillis: Date.now(),
+                            },
+                        };
+                    }
+                }
+                else if (isClientSessionInformationEvent(value)) {
+                    yield {
+                        ClientSessionInformationEvent: {
+                            Challenge: value.Challenge,
+                        },
+                    };
+                }
+                else if (isEndStreamWithCodeEvent(value)) {
+                    yield {
+                        VideoEvent: {
+                            VideoChunk: [],
+                            TimestampMillis: { closeCode: value.code },
+                        },
+                    };
+                }
+            }
+        };
+    }
+    async startLivenessVideoConnection() {
+        const livenessRequestGenerator = this.getAsyncGeneratorFromReadableStream(this.videoRecorder.videoStream)();
+        const response = await this._client.send(new StartFaceLivenessSessionCommand({
+            ChallengeVersions: 'FaceMovementAndLightChallenge_1.0.0',
+            SessionId: this.sessionId,
+            LivenessRequestStream: livenessRequestGenerator,
+            VideoWidth: this.videoEl.videoWidth.toString(),
+            VideoHeight: this.videoEl.videoHeight.toString(),
+        }));
+        return response.LivenessResponseStream;
+    }
+}
+
+export { LivenessStreamProvider, TIME_SLICE };

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

@@ -1 +1,14 @@
-function e(){try{return!(!window.WebAssembly||!window.WebAssembly.compile&&!window.WebAssembly.compileStreaming)}catch(e){return!1}}export{e as isWebAssemblySupported};
+/**
+ * Checks whether WebAssembly is supported in the current environment.
+ */
+function isWebAssemblySupported() {
+    try {
+        return (!!window.WebAssembly &&
+            (!!window.WebAssembly.compile || !!window.WebAssembly.compileStreaming));
+    }
+    catch (e) {
+        return false;
+    }
+}
+
+export { isWebAssemblySupported };