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

package/dist/index.js

@@ -1 +1,3208 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),a=require("@aws-amplify/core"),i=require("@xstate/react"),r=require("xstate"),n=require("@tensorflow/tfjs-core"),o=require("@tensorflow-models/blazeface"),s=require("@tensorflow/tfjs-backend-wasm");require("@tensorflow/tfjs-backend-cpu");var c=require("@aws-sdk/client-rekognitionstreaming"),l=require("@aws-sdk/util-format-url"),d=require("@smithy/eventstream-serde-browser"),h=require("@smithy/fetch-http-handler"),u=require("@smithy/protocol-http"),m=require("nanoid"),f=require("@aws-amplify/ui-react"),v=require("@aws-amplify/ui-react/internal"),g=require("@aws-amplify/ui"),p=require("classnames");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function T(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var i=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,i.get?i:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var C,S,y=E(t),x=T(t),F=T(n),R=T(o),M=T(s),w=E(p);class A{triggerModelLoading(){this.modelLoadingPromise=this.loadModels()}}!function(e){e.DARK="dark",e.BRIGHT="bright",e.NORMAL="normal"}(C||(C={})),function(e){e.MATCHED="MATCHED",e.TOO_FAR="TOO FAR",e.TOO_CLOSE="TOO CLOSE",e.CANT_IDENTIFY="CANNOT IDENTIFY",e.FACE_IDENTIFIED="ONE FACE IDENTIFIED",e.TOO_MANY="TOO MANY FACES"}(S||(S={}));const _={TIMEOUT:"TIMEOUT",RUNTIME_ERROR:"RUNTIME_ERROR",FRESHNESS_TIMEOUT:"FRESHNESS_TIMEOUT",SERVER_ERROR:"SERVER_ERROR",CAMERA_FRAMERATE_ERROR:"CAMERA_FRAMERATE_ERROR",CAMERA_ACCESS_ERROR:"CAMERA_ACCESS_ERROR",FACE_DISTANCE_ERROR:"FACE_DISTANCE_ERROR",MOBILE_LANDSCAPE_ERROR:"MOBILE_LANDSCAPE_ERROR",MULTIPLE_FACES_ERROR:"MULTIPLE_FACES_ERROR"},D=1e3,O=4e3,I=4001,b=4003,P=4005,k=4007;function L(e,t,a){return e*(a-t)+t}function N(e){const t=e.flippedCenterX-e.width/2,a=e.flippedCenterX+e.width/2,i=e.centerY-e.height/2,r=e.centerY+e.height/2;return{ovalBoundingBox:{left:t,top:i,right:a,bottom:r},minOvalX:t,maxOvalX:a,minOvalY:i,maxOvalY:r}}function H(e,t){const a=Math.max(e.left,t.left),i=Math.max(e.top,t.top),r=Math.min(e.right,t.right),n=Math.min(e.bottom,t.bottom),o=Math.abs(Math.max(0,r-a)*Math.max(0,n-i));if(0===o)return 0;return o/(Math.abs((e.right-e.left)*(e.bottom-e.top))+Math.abs((t.right-t.left)*(t.bottom-t.top))-o)}function B({width:e,height:t,widthSeed:a=1,centerXSeed:i=.5,centerYSeed:r=.5}){const n=t;let o=e;const s=.8*a,c=Math.floor(7*e/16),l=Math.floor(9*e/16),d=Math.floor(7*t/16),h=Math.floor(9*t/16),u=L(i,c,l),m=L(r,d,h);e>=t&&(o=3/4*n);const f=s*o,v=1.618*f;return{flippedCenterX:Math.floor(o-u),centerX:Math.floor(u),centerY:Math.floor(m),width:Math.floor(f),height:Math.floor(v)}}function W(e){const{leftEye:t,rightEye:a,mouth:i}=e,r=[];r[0]=(t[0]+a[0])/2,r[1]=(t[1]+a[1])/2;return{pupilDistance:Math.sqrt(Math.pow(t[0]-a[0],2)+Math.pow(t[1]-a[1],2)),faceHeight:Math.sqrt(Math.pow(r[0]-i[0],2)+Math.pow(r[1]-i[1],2))}}function V(e,t){const{leftEye:a,rightEye:i,nose:r}=e,{height:n,centerY:o}=t,s=o-n/2,c=[];c[0]=(a[0]+i[0])/2,c[1]=(a[1]+i[1])/2;const{pupilDistance:l,faceHeight:d}=W(e),h=(2*l+1.8*d)/2,u=1.618*h;let m,f;c[1]<=(s+n)/2?(m=(c[0]+r[0])/2,f=(c[1]+r[1])/2):(m=c[0],f=c[1]);const v=m-h/2,g=f-u/2;return{left:v,top:g,right:v+h,bottom:g+u}}function j(e){const t=document.createElement("canvas");t.width=e.videoWidth,t.height=e.videoHeight;const a=t.getContext("2d");if(a){a.drawImage(e,0,0,t.width,t.height);const i=a.getImageData(0,0,t.width,t.height).data,r=8,n=new Array(r).fill(0);for(let e=0;e<i.length;e++){n[Math.round(.2126*i[e++]+.7152*i[e++]+.0722*i[e++])%32]++}let o=-1,s=0;for(let e=0;e<r;e++)n[e]>s&&(s=n[e],o=e);return t.remove(),0===o?C.DARK:o===r?C.BRIGHT:C.NORMAL}throw new Error("Cannot find Video Element.")}function z({ctx:e,prevColor:t,nextColor:a,fraction:i}){const r=e.canvas.width,n=e.canvas.height;e.fillStyle=a,e.fillRect(0,0,r,n*i),1!==i&&(e.fillStyle=t,e.fillRect(0,n*i,r,n*(1-i)))}const q=e=>!!e;function U(e){return e.slice(e.indexOf("(")+1,e.indexOf(")")).split(",").map((e=>parseInt(e)))}function Y({faceDetector:t,videoEl:a,ovalDetails:i,reduceThreshold:r=!1,isMobile:n=!1}){return e.__awaiter(this,void 0,void 0,(function*(){const e=yield t.detectFaces(a);let o,s,c=!1;switch(e.length){case 0:s=_.FACE_DISTANCE_ERROR;break;case 1:{o=e[0];const t=i.width,{pupilDistance:a,faceHeight:l}=W(o),d=2;t&&(c=(d*a+1.8*l)/2/d/t<(r?n?.37:.4:.32),c||(s=_.FACE_DISTANCE_ERROR));break}default:s=_.MULTIPLE_FACES_ERROR}return{isDistanceBelowThreshold:c,error:s}}))}function $({deviceHeight:e,deviceWidth:t,height:a,width:i,top:r,left:n}){return{Height:a/e,Width:i/t,Top:r/e,Left:n/t}}const G=`https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/${M.version_wasm}/`;class X extends A{constructor(e,t){super(),this.faceModelUrl=null!=t?t:"https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow-models/blazeface/0.0.7/model/model.json",this.binaryPath=null!=e?e:G}loadModels(){return e.__awaiter(this,void 0,void 0,(function*(){!function(){try{return!(!window.WebAssembly||!window.WebAssembly.compile&&!window.WebAssembly.compileStreaming)}catch(e){return!1}}()?yield this._loadCPUBackend():yield this._loadWebAssemblyBackend();try{yield F.ready(),this._model=yield a.jitteredExponentialRetry(R.load,[{modelUrl:this.faceModelUrl}])}catch(e){throw new Error("There was an error loading the blazeface model. If you are using a custom blazeface model url ensure that it is a fully qualified url that returns a json file.")}}))}detectFaces(t){return e.__awaiter(this,void 0,void 0,(function*(){const e=yield this._model.estimateFaces(t,!1,!0,!0),a=Date.now();return e.filter((e=>!!e.landmarks)).map((e=>{const{topLeft:t,bottomRight:i,probability:r,landmarks:n}=e,[o,s]=t,[c,l]=i,d=Math.abs(o-c),h=Math.abs(l-s),u=n[0],m=n[1],f=n[2],v=n[3];return{top:s,left:c,width:d,height:h,timestampMs:a,probability:r[0],rightEye:u,leftEye:m,mouth:v,nose:f}}))}))}_loadWebAssemblyBackend(){return e.__awaiter(this,void 0,void 0,(function*(){try{M.setWasmPaths(this.binaryPath),yield a.jitteredExponentialRetry((()=>e.__awaiter(this,void 0,void 0,(function*(){if(!(yield F.setBackend("wasm")))throw new Error("Initialization of backend wasm failed")}))),[]),this.modelBackend="wasm"}catch(e){throw new Error('There was an error loading the TFJS WASM backend. If you are using a custom WASM path ensure that it ends with "/" and that it is not the full URL as @tensorflow/tfjs-backend-wasm will append the wasm binary file name. Read more: https://github.com/tensorflow/tfjs/blob/master/tfjs-backend-wasm/src/backend_wasm.ts#L475.')}}))}_loadCPUBackend(){return e.__awaiter(this,void 0,void 0,(function*(){yield F.setBackend("cpu"),this.modelBackend="cpu"}))}}class Z{constructor(e,t={}){if("undefined"==typeof MediaRecorder)throw Error("MediaRecorder is not supported by this browser");this._stream=e,this._options=t,this._chunks=[],this._recorder=new MediaRecorder(e,{bitsPerSecond:1e6}),this._setupCallbacks()}getState(){return this._recorder.state}start(e){this.clearRecordedData(),this.recordingStartApiTimestamp=Date.now(),this._recorder.start(e)}stop(){return e.__awaiter(this,void 0,void 0,(function*(){return"recording"===this.getState()&&this._recorder.stop(),this._recorderStopped}))}pause(){this._recorder.pause()}clearRecordedData(){this._chunks=[]}dispatch(e){this._recorder.dispatchEvent(e)}getVideoChunkSize(){return this._chunks.length}_setupCallbacks(){this.videoStream=new ReadableStream({start:e=>{this._recorder&&(this._recorder.ondataavailable=t=>{t.data&&t.data.size>0&&(0===this._chunks.length&&(this.firstChunkTimestamp=Date.now()),this._chunks.push(t.data),e.enqueue(t.data))},this._recorder.addEventListener("clientSesssionInfo",(t=>{e.enqueue(t.data.clientInfo)})),this._recorder.addEventListener("stopVideo",(()=>{e.enqueue("stopVideo")})),this._recorder.addEventListener("endStream",(()=>{e.close()})),this._recorder.addEventListener("endStreamWithCode",(t=>{e.enqueue({type:"endStreamWithCode",code:t.data.code})})))}}),this.recorderStarted=new Promise((e=>{this._recorder.onstart=()=>{this.recorderStartTimestamp=Date.now(),e()}})),this._recorderStopped=new Promise((e=>{this._recorder.onstop=()=>{this.recorderEndTimestamp=Date.now(),e()}})),this._recorder.onerror=()=>{"stopped"!==this.getState()&&this.stop()}}}const K=2e3,Q=t=>{return t[Symbol.asyncIterator]?t:(a=t,"function"==typeof ReadableStream&&a instanceof ReadableStream?d.readableStreamtoIterable(t):{[Symbol.asyncIterator]:function(){return e.__asyncGenerator(this,arguments,(function*(){yield yield e.__await(t)}))}});var a};class J{constructor(e,t=new h.FetchHttpHandler){this.metadata={handlerProtocol:"websocket/h1.1"},this.sockets={},this.utf8decoder=new TextDecoder,this.httpHandler=t,this.configPromise="function"==typeof e?e().then((e=>null!=e?e:{})):Promise.resolve(null!=e?e:{})}destroy(){for(const[e,t]of Object.entries(this.sockets)){for(const e of t)e.close(1e3,"Socket closed through destroy() call");delete this.sockets[e]}}handle(t){return e.__awaiter(this,void 0,void 0,(function*(){if(!(e=>"ws:"===e.protocol||"wss:"===e.protocol)(t))return this.httpHandler.handle(t);const e=l.formatUrl(t),a=new WebSocket(e);this.sockets[e]||(this.sockets[e]=[]),this.sockets[e].push(a),a.binaryType="arraybuffer";const{connectionTimeout:i=K}=yield this.configPromise;yield this.waitForReady(a,i);const{body:r}=t,n=Q(r),o=(e=>"function"==typeof ReadableStream?d.iterableToReadableStream(e):e)(this.connect(a,n));return{response:new u.HttpResponse({statusCode:200,body:o})}}))}removeNotUsableSockets(e){var t;this.sockets[e]=(null!==(t=this.sockets[e])&&void 0!==t?t:[]).filter((e=>![WebSocket.CLOSING,WebSocket.CLOSED].includes(e.readyState)))}waitForReady(e,t){return new Promise(((a,i)=>{const r=setTimeout((()=>{this.removeNotUsableSockets(e.url),i({$metadata:{httpStatusCode:500}})}),t);e.onopen=()=>{clearTimeout(r),a()}}))}connect(t,a){let i,r=!1,n=()=>{},o=()=>{};t.onmessage=e=>{o({done:!1,value:new Uint8Array(e.data)})},t.onerror=e=>{r=!0,t.close(),n(e)},t.onclose=()=>{this.removeNotUsableSockets(t.url),r||(i?n(i):o({done:!0,value:void 0}))};const s={[Symbol.asyncIterator]:()=>({next:()=>new Promise(((e,t)=>{o=e,n=t}))})};return(()=>{e.__awaiter(this,void 0,void 0,(function*(){var r,n,o,s;try{try{for(var c,l=!0,d=e.__asyncValues(a);!(r=(c=yield d.next()).done);){s=c.value,l=!1;try{const e=s,a=this.utf8decoder.decode(e);if(a.includes("closeCode")){const e=a.match(/"closeCode":([0-9]*)/);if(e){const a=e[1];t.close(parseInt(a))}continue}t.send(e)}finally{l=!0}}}catch(e){n={error:e}}finally{try{l||r||!(o=d.return)||(yield o.call(d))}finally{if(n)throw n.error}}}catch(e){i=e}finally{t.close(D)}}))})(),s}}function ee(e){return void 0!==e.Challenge}function te(e){return void 0!==e.code}class ae{constructor({sessionId:e,region:t,stream:a,videoEl:i,credentialProvider:r,endpointOverride:n}){this.sessionId=e,this.region=t,this._stream=a,this.videoEl=i,this.videoRecorder=new Z(a),this.credentialProvider=r,this.endpointOverride=n,this.initPromise=this.init()}getResponseStream(){return e.__awaiter(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.__awaiter(this,void 0,void 0,(function*(){yield this.videoRecorder.stop()}))}dispatchStopVideoEvent(){this.videoRecorder.dispatch(new Event("stopVideo"))}endStreamWithCode(t){return e.__awaiter(this,void 0,void 0,(function*(){"recording"===this.videoRecorder.getState()&&(yield this.stopVideo()),this.videoRecorder.dispatch(new MessageEvent("endStreamWithCode",{data:{code:t}}))}))}init(){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=null!==(t=this.credentialProvider)&&void 0!==t?t:yield a.Credentials.get();if(!e)throw new Error("No credentials");const i={credentials:e,region:this.region,customUserAgent:`${a.getAmplifyUserAgent()} ui-react-liveness/2.0.11`,requestHandler:new J({connectionTimeout:1e4})};if(this.endpointOverride){const e=this.endpointOverride;i.endpointProvider=()=>({url:new URL(e)})}this._client=new c.RekognitionStreamingClient(i),this.responseStream=yield this.startLivenessVideoConnection()}))}getAsyncGeneratorFromReadableStream(t){const a=this;return this._reader=t.getReader(),function(){return e.__asyncGenerator(this,arguments,(function*(){for(;;){const{done:t,value:i}=yield e.__await(a._reader.read());if(t)return yield e.__await(void 0);if("stopVideo"===i)yield yield e.__await({VideoEvent:{VideoChunk:[],TimestampMillis:Date.now()}});else if(void 0!==i.arrayBuffer){const t=yield e.__await(i.arrayBuffer()),a=new Uint8Array(t);a.length>0&&(yield yield e.__await({VideoEvent:{VideoChunk:a,TimestampMillis:Date.now()}}))}else ee(i)?yield yield e.__await({ClientSessionInformationEvent:{Challenge:i.Challenge}}):te(i)&&(yield yield e.__await({VideoEvent:{VideoChunk:[],TimestampMillis:{closeCode:i.code}}}))}}))}}startLivenessVideoConnection(){return e.__awaiter(this,void 0,void 0,(function*(){const e=this.getAsyncGeneratorFromReadableStream(this.videoRecorder.videoStream)();return(yield this._client.send(new c.StartFaceLivenessSessionCommand({ChallengeVersions:"FaceMovementAndLightChallenge_1.0.0",SessionId:this.sessionId,LivenessRequestStream:e,VideoWidth:this.videoEl.videoWidth.toString(),VideoHeight:this.videoEl.videoHeight.toString()}))).LivenessResponseStream}))}}var ie;!function(e){e.SCROLLING="SCROLLING",e.FLAT="FLAT"}(ie||(ie={}));class re{constructor(e,t){this.context=e,this.freshnessColorsSequence=t,this.isFirstTick=!0}displayColorTick(){return e.__awaiter(this,void 0,void 0,(function*(){return new Promise(((e,t)=>{setTimeout((()=>{this.displayNextColorTick(e,t)}),Math.min(10))}))}))}init(){this.stageIndex=0,this.currColorIndex=0,this.currColorSequence=this.freshnessColorsSequence[0],this.prevColorSequence=this.freshnessColorsSequence[0],this.stage=ie.FLAT,this.timeLastFlatOrScrollChange=Date.now(),this.timeLastFaceMatchChecked=Date.now()}displayNextColorTick(e,t){const{freshnessColorEl:a}=this.context.freshnessColorAssociatedParams,{ovalDetails:i,scaleFactor:r}=this.context.ovalAssociatedParams,{videoEl:n}=this.context.videoAssociatedParams,o=Date.now();this.isFirstTick&&(this.init(),this.isFirstTick=!1,this.sendColorStartTime({tickStartTime:o,currColor:this.currColorSequence.color,prevColor:this.currColorSequence.color,currColorIndex:this.stageIndex}));let s=o-this.timeLastFlatOrScrollChange;if(a.style.display="block",(this.stage===ie.FLAT&&s>=this.currColorSequence.flatDisplayDuration||this.stage===ie.SCROLLING&&s>=this.currColorSequence.downscrollDuration)&&(this.incrementStageIndex(o),s=0),this.currColorIndex<this.freshnessColorsSequence.length){const t=s/(this.stage===ie.SCROLLING?this.currColorSequence.downscrollDuration:this.currColorSequence.flatDisplayDuration);!function({overlayCanvas:e,prevColor:t,nextColor:a,videoEl:i,ovalDetails:r,heightFraction:n,scaleFactor:o}){const{x:s,y:c}=i.getBoundingClientRect(),{flippedCenterX:l,centerY:d,width:h,height:u}=r,m=l*o+s,f=d*o+c,v=e.width,g=e.height,p=e.getContext("2d");if(!p)throw new Error("Cannot find Overlay Canvas.");p.canvas.width=window.innerWidth,p.canvas.height=window.innerHeight,p.clearRect(0,0,v,g),z({ctx:p,prevColor:t,nextColor:a,fraction:n}),p.save(),p.beginPath(),p.rect(0,0,v,g),p.clip(),p.clearRect(0,0,v,g),p.globalAlpha=.9,z({ctx:p,prevColor:t,nextColor:a,fraction:n}),p.beginPath(),p.ellipse(m,f,h*o/2,u*o/2,0,0,2*Math.PI),p.strokeStyle="white",p.lineWidth=8,p.stroke(),p.clip(),p.clearRect(0,0,v,g),p.globalAlpha=.75,z({ctx:p,prevColor:t,nextColor:a,fraction:n}),p.restore()}({overlayCanvas:a,prevColor:this.prevColorSequence.color,nextColor:this.currColorSequence.color,videoEl:n,ovalDetails:i,heightFraction:t,scaleFactor:r}),e(!1)}else a.style.display="none",e(!0)}incrementStageIndex(e){if(this.stageIndex+=1,this.prevColorSequence=this.freshnessColorsSequence[this.currColorIndex],this.stage===ie.FLAT)this.currColorIndex+=1,this.stage=ie.SCROLLING;else if(this.stage===ie.SCROLLING){this.freshnessColorsSequence[this.currColorIndex].flatDisplayDuration>0?this.stage=ie.FLAT:(this.stage=ie.SCROLLING,this.currColorIndex+=1)}this.currColorSequence=this.freshnessColorsSequence[this.currColorIndex],this.timeLastFlatOrScrollChange=Date.now(),this.currColorSequence&&this.sendColorStartTime({tickStartTime:e,currColor:this.currColorSequence.color,prevColor:this.prevColorSequence.color,currColorIndex:this.stageIndex})}sendColorStartTime({tickStartTime:e,currColor:t,prevColor:a,currColorIndex:i}){const{livenessStreamProvider:r,challengeId:n}=this.context;r.sendClientInfo({Challenge:{FaceMovementAndLightChallenge:{ChallengeId:n,ColorDisplayed:{CurrentColor:{RGB:U(t)},PreviousColor:{RGB:U(a)},SequenceNumber:i,CurrentColorStartTimestamp:e}}}})}}const ne=e=>!!(null==e?void 0:e.DisconnectionEvent),oe=e=>!!(null==e?void 0:e.ValidationException),se=e=>!!(null==e?void 0:e.InternalServerException),ce=e=>!!(null==e?void 0:e.ThrottlingException),le=e=>!!(null==e?void 0:e.ServiceQuotaExceededException),de={width:{min:320,ideal:640},height:{min:240,ideal:480},frameRate:{min:15,ideal:30,max:30},facingMode:"user"};let he;const ue=r.createMachine({id:"livenessMachine",initial:"start",predictableActionArguments:!0,context:{challengeId:m.nanoid(),maxFailedAttempts:0,failedAttempts:0,componentProps:void 0,serverSessionInformation:void 0,videoAssociatedParams:{videoConstraints:de},ovalAssociatedParams:void 0,faceMatchAssociatedParams:{illuminationState:void 0,faceMatchState:void 0,faceMatchPercentage:25,currentDetectedFace:void 0,startFace:void 0,endFace:void 0,initialFaceMatchTime:void 0},freshnessColorAssociatedParams:{freshnessColorEl:void 0,freshnessColors:[],freshnessColorsComplete:!1,freshnessColorDisplay:void 0},errorState:void 0,livenessStreamProvider:void 0,responseStreamActorRef:void 0,shouldDisconnect:!1,faceMatchStateBeforeStart:void 0,isFaceFarEnoughBeforeRecording:void 0,isRecordingStopped:!1},on:{CANCEL:"userCancel",TIMEOUT:{target:"retryableTimeout",actions:"updateErrorStateForTimeout"},SET_SESSION_INFO:{internal:!0,actions:"updateSessionInfo"},DISCONNECT_EVENT:{internal:!0,actions:"updateShouldDisconnect"},SET_DOM_AND_CAMERA_DETAILS:{actions:"setDOMAndCameraDetails"},SERVER_ERROR:{target:"error",actions:"updateErrorStateForServer"},RUNTIME_ERROR:{target:"error"},MOBILE_LANDSCAPE_WARNING:{target:"mobileLandscapeWarning",actions:"updateErrorStateForServer"}},states:{start:{on:{BEGIN:"cameraCheck"}},cameraCheck:{entry:["resetErrorState","initializeFaceDetector"],invoke:{src:"checkVirtualCameraAndGetStream",onDone:{target:"waitForDOMAndCameraDetails",actions:["updateVideoMediaStream"]},onError:{target:"permissionDenied"}}},waitForDOMAndCameraDetails:{after:{0:{target:"detectFaceBeforeStart",cond:"hasDOMAndCameraDetails"},500:{target:"waitForDOMAndCameraDetails"}}},detectFaceBeforeStart:{invoke:{src:"detectFace",onDone:{target:"checkFaceDetectedBeforeStart",actions:["updateFaceMatchBeforeStartDetails"]}}},checkFaceDetectedBeforeStart:{after:{0:{target:"detectFaceDistanceBeforeRecording",cond:"hasSingleFaceBeforeStart"},100:{target:"detectFaceBeforeStart"}}},detectFaceDistanceBeforeRecording:{invoke:{src:"detectFaceDistance",onDone:{target:"checkFaceDistanceBeforeRecording",actions:["updateFaceDistanceBeforeRecording"]}}},checkFaceDistanceBeforeRecording:{after:{0:{target:"initializeLivenessStream",cond:"hasEnoughFaceDistanceBeforeRecording"},100:{target:"detectFaceDistanceBeforeRecording"}}},initializeLivenessStream:{invoke:{src:"openLivenessStreamConnection",onDone:{target:"notRecording",actions:["updateLivenessStreamProvider","spawnResponseStreamActor"]}}},notRecording:{on:{START_RECORDING:"recording"},initial:"waitForSessionInfo",states:{waitForSessionInfo:{after:{0:{target:"#livenessMachine.recording",cond:"hasServerSessionInfo"},100:{target:"waitForSessionInfo"}}}}},recording:{entry:["clearErrorState","startRecording"],initial:"ovalDrawing",states:{ovalDrawing:{entry:["sendTimeoutAfterOvalDrawingDelay"],invoke:{src:"detectInitialFaceAndDrawOval",onDone:{target:"checkFaceDetected",actions:["updateOvalAndFaceDetailsPostDraw","sendTimeoutAfterOvalMatchDelay"]},onError:{target:"#livenessMachine.error",actions:"updateErrorStateForRuntime"}}},checkFaceDetected:{after:{0:{target:"checkRecordingStarted",cond:"hasSingleFace"},100:{target:"ovalDrawing"}}},checkRecordingStarted:{after:{0:{target:"ovalMatching",cond:"hasRecordingStarted",actions:["updateRecordingStartTimestampMs"]},100:{target:"checkRecordingStarted"}}},ovalMatching:{entry:["cancelOvalDrawingTimeout"],invoke:{src:"detectFaceAndMatchOval",onDone:{target:"checkMatch",actions:"updateFaceDetailsPostMatch"}}},checkMatch:{after:{0:{target:"flashFreshnessColors",cond:"hasFaceMatchedInOvalWithMinTime",actions:["updateEndFaceMatch","setupFlashFreshnessColors","cancelOvalMatchTimeout","cancelOvalDrawingTimeout"]},.1:{target:"ovalMatching",cond:"hasFaceMatchedInOval",actions:"setFaceMatchTimeAndStartFace"},1:{target:"ovalMatching",cond:"hasNotFaceMatchedInOval"}}},flashFreshnessColors:{invoke:{src:"flashColors",onDone:[{target:"success",cond:"hasFreshnessColorShown"},{target:"flashFreshnessColors",actions:"updateFreshnessDetails"}]}},success:{entry:["stopRecording"],type:"final"}},onDone:"uploading"},uploading:{initial:"pending",states:{pending:{entry:["sendTimeoutAfterWaitingForDisconnect","pauseVideoStream"],invoke:{src:"stopVideo",onDone:"waitForDisconnectEvent",onError:{target:"#livenessMachine.error",actions:"updateErrorStateForRuntime"}}},waitForDisconnectEvent:{after:{0:{target:"getLivenessResult",cond:"getShouldDisconnect"},100:{target:"waitForDisconnectEvent"}}},getLivenessResult:{entry:["cancelWaitForDisconnectTimeout","freezeStream"],invoke:{src:"getLiveness",onError:{target:"#livenessMachine.error",actions:"updateErrorStateForServer"}}}}},retryableTimeout:{entry:"updateFailedAttempts",always:[{target:"timeout",cond:"shouldTimeoutOnFailedAttempts"},{target:"notRecording"}]},permissionDenied:{entry:"callUserPermissionDeniedCallback",on:{RETRY_CAMERA_CHECK:"cameraCheck"}},mobileLandscapeWarning:{entry:"callMobileLandscapeWarningCallback",always:[{target:"error"}]},timeout:{entry:["cleanUpResources","callUserTimeoutCallback","freezeStream"]},error:{entry:["cleanUpResources","callErrorCallback","cancelOvalDrawingTimeout","cancelWaitForDisconnectTimeout","cancelOvalMatchTimeout","freezeStream"]},userCancel:{entry:["cleanUpResources","callUserCancelCallback","resetContext"],always:[{target:"start"}]}}},{actions:{spawnResponseStreamActor:r.assign({responseStreamActorRef:()=>r.spawn(me)}),updateFailedAttempts:r.assign({failedAttempts:e=>e.failedAttempts+1}),updateVideoMediaStream:r.assign({videoAssociatedParams:(e,t)=>{var a;return Object.assign(Object.assign({},e.videoAssociatedParams),{videoMediaStream:null===(a=t.data)||void 0===a?void 0:a.stream})}}),initializeFaceDetector:r.assign({ovalAssociatedParams:e=>{const{componentProps:t}=e,{faceModelUrl:a,binaryPath:i}=t.config,r=new X(i,a);return r.triggerModelLoading(),Object.assign(Object.assign({},e.ovalAssociatedParams),{faceDetector:r})}}),updateLivenessStreamProvider:r.assign({livenessStreamProvider:(e,t)=>{var a;return null===(a=t.data)||void 0===a?void 0:a.livenessStreamProvider}}),setDOMAndCameraDetails:r.assign({videoAssociatedParams:(e,t)=>{var a,i,r;return Object.assign(Object.assign({},e.videoAssociatedParams),{videoEl:null===(a=t.data)||void 0===a?void 0:a.videoEl,canvasEl:null===(i=t.data)||void 0===i?void 0:i.canvasEl,isMobile:null===(r=t.data)||void 0===r?void 0:r.isMobile})},freshnessColorAssociatedParams:(e,t)=>{var a;return Object.assign(Object.assign({},e.freshnessColorAssociatedParams),{freshnessColorEl:null===(a=t.data)||void 0===a?void 0:a.freshnessColorEl})}}),updateRecordingStartTimestampMs:r.assign({videoAssociatedParams:e=>{const{challengeId:t,videoAssociatedParams:a,ovalAssociatedParams:i,livenessStreamProvider:r}=e,{recordingStartApiTimestamp:n,recorderStartTimestamp:o}=r.videoRecorder,{videoMediaStream:s}=a,{initialFace:c}=i,l=Math.round(.73*(o-n)+n),{width:d,height:h}=s.getTracks()[0].getSettings(),u=d-c.left-c.width;return e.livenessStreamProvider.sendClientInfo({Challenge:{FaceMovementAndLightChallenge:{ChallengeId:t,VideoStartTimestamp:l,InitialFace:{InitialFaceDetectedTimestamp:c.timestampMs,BoundingBox:$({deviceHeight:h,deviceWidth:d,height:c.height,width:c.width,top:c.top,left:u})}}}}),Object.assign(Object.assign({},e.videoAssociatedParams),{recordingStartTimestampMs:l})}}),startRecording:r.assign({videoAssociatedParams:e=>{if(!e.serverSessionInformation)throw new Error("Session information was not received from response stream");return e.livenessStreamProvider.videoRecorder&&"recording"!==e.livenessStreamProvider.videoRecorder.getState()&&e.livenessStreamProvider.startRecordingLivenessVideo(),Object.assign({},e.videoAssociatedParams)}}),stopRecording:e=>{},updateFaceMatchBeforeStartDetails:r.assign({faceMatchStateBeforeStart:(e,t)=>t.data.faceMatchState}),updateFaceDistanceBeforeRecording:r.assign({isFaceFarEnoughBeforeRecording:(e,t)=>t.data.isFaceFarEnoughBeforeRecording}),updateFaceDistanceWhileLoading:r.assign({isFaceFarEnoughBeforeRecording:(e,t)=>t.data.isFaceFarEnoughBeforeRecording,errorState:(e,t)=>{var a;return null===(a=t.data)||void 0===a?void 0:a.error}}),updateOvalAndFaceDetailsPostDraw:r.assign({ovalAssociatedParams:(e,t)=>Object.assign(Object.assign({},e.ovalAssociatedParams),{initialFace:t.data.initialFace,ovalDetails:t.data.ovalDetails,scaleFactor:t.data.scaleFactor}),faceMatchAssociatedParams:(e,t)=>Object.assign(Object.assign({},e.faceMatchAssociatedParams),{faceMatchState:t.data.faceMatchState,illuminationState:t.data.illuminationState})}),updateFaceDetailsPostMatch:r.assign({faceMatchAssociatedParams:(e,t)=>Object.assign(Object.assign({},e.faceMatchAssociatedParams),{faceMatchState:t.data.faceMatchState,faceMatchPercentage:t.data.faceMatchPercentage,illuminationState:t.data.illuminationState,currentDetectedFace:t.data.detectedFace})}),updateEndFaceMatch:r.assign({faceMatchAssociatedParams:e=>Object.assign(Object.assign({},e.faceMatchAssociatedParams),{endFace:e.faceMatchAssociatedParams.currentDetectedFace})}),setFaceMatchTimeAndStartFace:r.assign({faceMatchAssociatedParams:e=>Object.assign(Object.assign({},e.faceMatchAssociatedParams),{startFace:void 0===e.faceMatchAssociatedParams.startFace?e.faceMatchAssociatedParams.currentDetectedFace:e.faceMatchAssociatedParams.startFace,initialFaceMatchTime:void 0===e.faceMatchAssociatedParams.initialFaceMatchTime?Date.now():e.faceMatchAssociatedParams.initialFaceMatchTime})}),resetErrorState:r.assign({errorState:e=>{}}),updateErrorStateForTimeout:r.assign({errorState:(e,t)=>{var a;return(null===(a=t.data)||void 0===a?void 0:a.errorState)||_.TIMEOUT}}),updateErrorStateForRuntime:r.assign({errorState:(e,t)=>{var a;return(null===(a=t.data)||void 0===a?void 0:a.errorState)||_.RUNTIME_ERROR}}),updateErrorStateForServer:r.assign({errorState:e=>_.SERVER_ERROR}),clearErrorState:r.assign({errorState:e=>{}}),updateSessionInfo:r.assign({serverSessionInformation:(e,t)=>t.data.sessionInfo}),updateShouldDisconnect:r.assign({shouldDisconnect:e=>!0}),updateFreshnessDetails:r.assign({freshnessColorAssociatedParams:(e,t)=>Object.assign(Object.assign({},e.freshnessColorAssociatedParams),{freshnessColorsComplete:t.data.freshnessColorsComplete})}),setupFlashFreshnessColors:r.assign({freshnessColorAssociatedParams:e=>{const{serverSessionInformation:t}=e,a=(t.Challenge.FaceMovementAndLightChallenge.ColorSequences||[]).map((({FreshnessColor:e,DownscrollDuration:t,FlatDisplayDuration:a})=>{const i=e.RGB,r=`rgb(${i[0]},${i[1]},${i[2]})`;return void 0!==r&&void 0!==t&&void 0!==a?{color:r,downscrollDuration:t,flatDisplayDuration:a}:void 0})).filter(q);const i=new re(e,a);return Object.assign(Object.assign({},e.freshnessColorAssociatedParams),{freshnessColorDisplay:i})}}),sendTimeoutAfterOvalDrawingDelay:r.actions.send({type:"TIMEOUT"},{delay:5e3,id:"ovalDrawingTimeout"}),cancelOvalDrawingTimeout:r.actions.cancel("ovalDrawingTimeout"),sendTimeoutAfterOvalMatchDelay:r.actions.send({type:"TIMEOUT"},{delay:e=>{var t,a,i,r;return(null===(r=null===(i=null===(a=null===(t=e.serverSessionInformation)||void 0===t?void 0:t.Challenge)||void 0===a?void 0:a.FaceMovementAndLightChallenge)||void 0===i?void 0:i.ChallengeConfig)||void 0===r?void 0:r.OvalFitTimeout)||7e3},id:"ovalMatchTimeout"}),cancelOvalMatchTimeout:r.actions.cancel("ovalMatchTimeout"),sendTimeoutAfterWaitingForDisconnect:r.actions.send({type:"TIMEOUT",data:{errorState:_.SERVER_ERROR}},{delay:2e4,id:"waitForDisconnectTimeout"}),cancelWaitForDisconnectTimeout:r.actions.cancel("waitForDisconnectTimeout"),sendTimeoutAfterFaceDistanceDelay:r.actions.send({type:"RUNTIME_ERROR",data:new Error("Avoid moving closer during countdown and ensure only one face is in front of camera.")},{delay:0,id:"faceDistanceTimeout"}),cancelFaceDistanceTimeout:r.actions.cancel("faceDistanceTimeout"),callUserPermissionDeniedCallback:r.assign({errorState:(e,t)=>{var a,i;let r;r=t.data.message.includes("15 fps")?_.CAMERA_FRAMERATE_ERROR:_.CAMERA_ACCESS_ERROR;const n=t.data.message||t.data.Message,o={state:r,error:new Error(n)};return null===(i=(a=e.componentProps).onError)||void 0===i||i.call(a,o),r}}),callMobileLandscapeWarningCallback:r.assign({errorState:e=>_.MOBILE_LANDSCAPE_ERROR}),callUserCancelCallback:t=>e.__awaiter(void 0,void 0,void 0,(function*(){var e,a;null===(a=(e=t.componentProps).onUserCancel)||void 0===a||a.call(e)})),callUserTimeoutCallback:t=>e.__awaiter(void 0,void 0,void 0,(function*(){var e,a;const i=new Error("Client Timeout");i.name=t.errorState;const r={state:t.errorState,error:i};null===(a=(e=t.componentProps).onError)||void 0===a||a.call(e,r)})),callErrorCallback:(t,a)=>e.__awaiter(void 0,void 0,void 0,(function*(){var e,i,r;const n={state:t.errorState,error:(null===(e=a.data)||void 0===e?void 0:e.error)||a.data};null===(r=(i=t.componentProps).onError)||void 0===r||r.call(i,n)})),cleanUpResources:t=>e.__awaiter(void 0,void 0,void 0,(function*(){var e;const{freshnessColorEl:a}=t.freshnessColorAssociatedParams;a&&(a.style.display="none");let i=O;t.errorState===_.TIMEOUT?i=I:t.errorState===_.RUNTIME_ERROR?i=P:t.errorState===_.FACE_DISTANCE_ERROR||t.errorState===_.MULTIPLE_FACES_ERROR?i=k:void 0===t.errorState&&(i=b),yield null===(e=t.livenessStreamProvider)||void 0===e?void 0:e.endStreamWithCode(i)})),freezeStream:t=>e.__awaiter(void 0,void 0,void 0,(function*(){const{videoMediaStream:e,videoEl:a}=t.videoAssociatedParams;t.isRecordingStopped=!0,null==a||a.pause(),null==e||e.getTracks().forEach((function(e){e.stop()}))})),pauseVideoStream:t=>e.__awaiter(void 0,void 0,void 0,(function*(){const{videoEl:e}=t.videoAssociatedParams;t.isRecordingStopped=!0,e.pause()})),resetContext:r.assign({challengeId:m.nanoid(),maxFailedAttempts:0,failedAttempts:0,componentProps:e=>e.componentProps,serverSessionInformation:e=>{},videoAssociatedParams:e=>({videoConstraints:de}),ovalAssociatedParams:e=>{},errorState:e=>{},livenessStreamProvider:e=>{},responseStreamActorRef:e=>{},shouldDisconnect:!1,faceMatchStateBeforeStart:e=>{},isFaceFarEnoughBeforeRecording:e=>{},isRecordingStopped:!1})},guards:{shouldTimeoutOnFailedAttempts:e=>e.failedAttempts>=e.maxFailedAttempts,hasFaceMatchedInOvalWithMinTime:e=>{const{faceMatchState:t,initialFaceMatchTime:a}=e.faceMatchAssociatedParams,i=Date.now()-a;return t===S.MATCHED&&i>=500},hasFaceMatchedInOval:e=>e.faceMatchAssociatedParams.faceMatchState===S.MATCHED,hasNotFaceMatchedInOval:e=>e.faceMatchAssociatedParams.faceMatchState!==S.MATCHED,hasSingleFace:e=>e.faceMatchAssociatedParams.faceMatchState===S.FACE_IDENTIFIED,hasSingleFaceBeforeStart:e=>e.faceMatchStateBeforeStart===S.FACE_IDENTIFIED,hasEnoughFaceDistanceBeforeRecording:e=>e.isFaceFarEnoughBeforeRecording,hasNotEnoughFaceDistanceBeforeRecording:e=>!e.isFaceFarEnoughBeforeRecording,hasLivenessCheckSucceeded:(e,t,a)=>a.state.event.data.isLive,hasFreshnessColorShown:e=>e.freshnessColorAssociatedParams.freshnessColorsComplete,hasServerSessionInfo:e=>void 0!==e.serverSessionInformation,hasDOMAndCameraDetails:e=>void 0!==e.videoAssociatedParams.videoEl&&void 0!==e.videoAssociatedParams.canvasEl&&void 0!==e.freshnessColorAssociatedParams.freshnessColorEl,getShouldDisconnect:e=>!!e.shouldDisconnect,hasRecordingStarted:e=>void 0!==e.livenessStreamProvider.videoRecorder.firstChunkTimestamp},services:{checkVirtualCameraAndGetStream(t){return e.__awaiter(this,void 0,void 0,(function*(){const{videoConstraints:e}=t.videoAssociatedParams,a=yield navigator.mediaDevices.getUserMedia({video:e,audio:!1}),i=(yield navigator.mediaDevices.enumerateDevices()).filter((e=>"videoinput"===e.kind)).filter((e=>!function(e){return e.label.toLowerCase().includes("virtual")}(e)));if(!i.length)throw new Error("No real video devices found");const r=a.getTracks().filter((e=>e.getSettings().frameRate>=15));if(r.length<1)throw new Error("No camera found with more than 15 fps");const n=r[0].getSettings().deviceId;let o=a;return i.some((e=>e.deviceId===n))||(o=yield navigator.mediaDevices.getUserMedia({video:Object.assign(Object.assign({},e),{deviceId:{exact:i[0].deviceId}}),audio:!1})),{stream:o}}))},openLivenessStreamConnection(t){return e.__awaiter(this,void 0,void 0,(function*(){const{config:e}=t.componentProps,{credentialProvider:a,endpointOverride:i}=e,r=new ae({sessionId:t.componentProps.sessionId,region:t.componentProps.region,stream:t.videoAssociatedParams.videoMediaStream,videoEl:t.videoAssociatedParams.videoEl,credentialProvider:a,endpointOverride:i});return he=r.getResponseStream(),{livenessStreamProvider:r}}))},detectFace(t){return e.__awaiter(this,void 0,void 0,(function*(){const{videoEl:a}=t.videoAssociatedParams,{faceDetector:i}=t.ovalAssociatedParams;try{yield i.modelLoadingPromise}catch(e){console.log({err:e})}const r=yield function(t,a){return e.__awaiter(this,void 0,void 0,(function*(){let e;switch((yield t.detectFaces(a)).length){case 0:e=S.CANT_IDENTIFY;break;case 1:e=S.FACE_IDENTIFIED;break;default:e=S.TOO_MANY}return e}))}(i,a);return{faceMatchState:r}}))},detectFaceDistance(t){return e.__awaiter(this,void 0,void 0,(function*(){const{isFaceFarEnoughBeforeRecording:e}=t,{videoEl:a,videoMediaStream:i,isMobile:r}=t.videoAssociatedParams,{faceDetector:n}=t.ovalAssociatedParams,{width:o,height:s}=i.getTracks()[0].getSettings(),c=B({width:o,height:s}),{isDistanceBelowThreshold:l}=yield Y({faceDetector:n,videoEl:a,ovalDetails:c,reduceThreshold:e,isMobile:r});return{isFaceFarEnoughBeforeRecording:l}}))},detectFaceDistanceWhileLoading(t){return e.__awaiter(this,void 0,void 0,(function*(){const{isFaceFarEnoughBeforeRecording:e}=t,{videoEl:a,videoMediaStream:i,isMobile:r}=t.videoAssociatedParams,{faceDetector:n}=t.ovalAssociatedParams,{width:o,height:s}=i.getTracks()[0].getSettings(),c=B({width:o,height:s}),{isDistanceBelowThreshold:l,error:d}=yield Y({faceDetector:n,videoEl:a,ovalDetails:c,reduceThreshold:e,isMobile:r});return{isFaceFarEnoughBeforeRecording:l,error:d}}))},detectInitialFaceAndDrawOval(t){return e.__awaiter(this,void 0,void 0,(function*(){const{serverSessionInformation:e,livenessStreamProvider:a}=t,{videoEl:i,canvasEl:r,isMobile:n}=t.videoAssociatedParams,{faceDetector:o}=t.ovalAssociatedParams;try{yield o.modelLoadingPromise,yield a.videoRecorder.recorderStarted}catch(e){console.log({err:e})}const s=yield o.detectFaces(i);let c,l,d;switch(s.length){case 0:l=S.CANT_IDENTIFY,d=j(i);break;case 1:l=S.FACE_IDENTIFIED,c=s[0];break;default:l=S.TOO_MANY}if(!c)return{faceMatchState:l,illuminationState:d};const{width:h,height:u}=i.getBoundingClientRect();n?(r.width=window.innerWidth,r.height=window.innerHeight):(r.width=h,r.height=u);const m=h/i.videoWidth,f=function({sessionInformation:e,videoWidth:t}){var a,i;const r=null===(i=null===(a=null==e?void 0:e.Challenge)||void 0===a?void 0:a.FaceMovementAndLightChallenge)||void 0===i?void 0:i.OvalParameters;if(!(r&&r.CenterX&&r.CenterY&&r.Width&&r.Height))throw new Error("Oval parameters not returned from session information.");return{flippedCenterX:t-r.CenterX,centerX:r.CenterX,centerY:r.CenterY,width:r.Width,height:r.Height}}({sessionInformation:e,videoWidth:i.width}),v=V(c,f);return c.top=v.top,c.left=v.left,c.height=v.bottom-v.top,c.width=v.right-v.left,function({canvas:e,oval:t,scaleFactor:a,videoEl:i}){const{flippedCenterX:r,centerY:n,width:o,height:s}=t,{width:c,height:l}=e.getBoundingClientRect(),d=e.getContext("2d");if(!d)throw new Error("Cannot find Canvas.");{d.clearRect(0,0,c,l),d.fillStyle="rgba(255, 255, 255, 1.0)",d.fillRect(0,0,c,l);const e={width:i.videoWidth,height:i.videoHeight},t={x:(c-e.width*a)/2,y:(l-e.height*a)/2};d.setTransform(a,0,0,a,t.x,t.y),d.beginPath(),d.ellipse(r,n,o/2,s/2,0,0,2*Math.PI),d.strokeStyle="#AEB3B7",d.lineWidth=3,d.stroke(),d.clip(),d.setTransform(1,0,0,1,0,0),d.clearRect(0,0,c,l)}}({canvas:r,oval:f,scaleFactor:m,videoEl:i}),{faceMatchState:l,ovalDetails:f,scaleFactor:m,initialFace:c}}))},detectFaceAndMatchOval(t){return e.__awaiter(this,void 0,void 0,(function*(){const{serverSessionInformation:e}=t,{videoEl:a}=t.videoAssociatedParams,{faceDetector:i,ovalDetails:r,initialFace:n}=t.ovalAssociatedParams,o=yield i.detectFaces(a);let s,c,l,d=0;const h=V(n,r),{ovalBoundingBox:u}=N(r),m=H(h,u);switch(o.length){case 0:s=S.CANT_IDENTIFY,l=j(a);break;case 1:{c=o[0];const{faceMatchState:t,faceMatchPercentage:a}=function(e,t,a,i){var r,n;let o;const s=null===(n=null===(r=null==i?void 0:i.Challenge)||void 0===r?void 0:r.FaceMovementAndLightChallenge)||void 0===n?void 0:n.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:c,OvalIouHeightThreshold:l,OvalIouWidthThreshold:d,FaceIouHeightThreshold:h,FaceIouWidthThreshold:u}=s,m=V(e,t),f=m.left,v=m.right,g=m.top,p=m.bottom,{ovalBoundingBox:E,minOvalX:T,minOvalY:C,maxOvalX:y,maxOvalY:x}=N(t),F=H(m,E),R=c,M=t.width*d,w=t.height*l,A=t.width*u,_=t.height*h,D=100*Math.max(Math.min(1,.75*(F-a)/(R-a)+.25),0);return o=F>R&&Math.abs(T-f)<M&&Math.abs(y-v)<M&&Math.abs(x-p)<w?S.MATCHED:C-g>_||p-x>_||T-f>A&&v-y>A?S.TOO_CLOSE:S.TOO_FAR,{faceMatchState:o,faceMatchPercentage:D}}(c,r,m,e);s=t,d=a;break}default:s=S.TOO_MANY}return{faceMatchState:s,faceMatchPercentage:d,illuminationState:l,detectedFace:c}}))},flashColors(t){return e.__awaiter(this,void 0,void 0,(function*(){const{freshnessColorsComplete:e,freshnessColorDisplay:a}=t.freshnessColorAssociatedParams;if(e)return;return{freshnessColorsComplete:yield a.displayColorTick()}}))},stopVideo(t){return e.__awaiter(this,void 0,void 0,(function*(){const{challengeId:e,livenessStreamProvider:a}=t,{videoMediaStream:i}=t.videoAssociatedParams,{initialFace:r,ovalDetails:n}=t.ovalAssociatedParams,{startFace:o,endFace:s}=t.faceMatchAssociatedParams,{width:c,height:l}=i.getTracks()[0].getSettings(),d=c-r.left-r.width;yield a.stopVideo();const h={Challenge:{FaceMovementAndLightChallenge:{ChallengeId:e,InitialFace:{InitialFaceDetectedTimestamp:r.timestampMs,BoundingBox:$({deviceHeight:l,deviceWidth:c,height:r.height,width:r.width,top:r.top,left:d})},TargetFace:{FaceDetectedInTargetPositionStartTimestamp:o.timestampMs,FaceDetectedInTargetPositionEndTimestamp:s.timestampMs,BoundingBox:$({deviceHeight:l,deviceWidth:c,height:n.height,width:n.width,top:n.centerY-n.height/2,left:n.centerX-n.width/2})},VideoEndTimestamp:a.videoRecorder.recorderEndTimestamp}}};if(0===a.videoRecorder.getVideoChunkSize())throw new Error("Video chunks not recorded successfully.");a.sendClientInfo(h),yield a.dispatchStopVideoEvent()}))},getLiveness(t){return e.__awaiter(this,void 0,void 0,(function*(){const{onAnalysisComplete:e}=t.componentProps;yield e()}))}}}),me=t=>e.__awaiter(void 0,void 0,void 0,(function*(){var a,i,r,n,o;try{const d=yield he;try{for(var s,c=!0,l=e.__asyncValues(d);!(a=(s=yield l.next()).done);){n=s.value,c=!1;try{const e=n;(null==(o=e)?void 0:o.ServerSessionInformationEvent)?t({type:"SET_SESSION_INFO",data:{sessionInfo:e.ServerSessionInformationEvent.SessionInformation}}):ne(e)?t({type:"DISCONNECT_EVENT"}):oe(e)?t({type:"SERVER_ERROR",data:{error:Object.assign({},e.ValidationException)}}):se(e)?t({type:"SERVER_ERROR",data:{error:Object.assign({},e.InternalServerException)}}):ce(e)?t({type:"SERVER_ERROR",data:{error:Object.assign({},e.ThrottlingException)}}):le(e)&&t({type:"SERVER_ERROR",data:{error:Object.assign({},e.ServiceQuotaExceededException)}})}finally{c=!0}}}catch(e){i={error:e}}finally{try{c||a||!(r=l.return)||(yield r.call(l))}finally{if(i)throw i.error}}}catch(e){let a=e;(e=>{const{message:t,name:a}=e;return"InvalidSignatureException"===a&&t.includes("valid region")})(e)&&(a=new Error("Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.")),a instanceof Error&&t({type:"SERVER_ERROR",data:{error:a}})}})),fe=y.default.createContext(null);function ve(t){var{children:a}=t,i=e.__rest(t,["children"]);return y.default.createElement(fe.Provider,{value:i},a)}function ge(){const e=y.default.useContext(fe);if(null===e)throw new Error("useFaceLivenessDetector must be used within a FaceLivenessDetectorProvider");return e}function pe(){const{service:e}=ge();return i.useActor(e)}function Ee(e){const{service:t}=ge();return i.useSelector(t,e)}var Te;!function(e){e.CameraModule="amplify-liveness-camera-module",e.CancelContainer="amplify-liveness-cancel-container",e.CancelButton="amplify-liveness-cancel-button",e.CountdownContainer="amplify-liveness-countdown-container",e.DescriptionBullet="amplify-liveness-description-bullet",e.DescriptionBulletIndex="amplify-liveness-description-bullet__index",e.DescriptionBulletIndexText="amplify-liveness-description-bullet__index__text",e.DescriptionBulletMessage="amplify-liveness-description-bullet__message",e.ErrorModal="amplify-liveness-error-modal",e.ErrorModalHeading="amplify-liveness-error-modal__heading",e.FadeOut="amplify-liveness-fade-out",e.FreshnessCanvas="amplify-liveness-freshness-canvas",e.InstructionList="amplify-liveness-instruction-list",e.InstructionOverlay="amplify-liveness-instruction-overlay",e.Figure="amplify-liveness-figure",e.FigureCaption="amplify-liveness-figure__caption",e.FigureIcon="amplify-liveness-figure__icon",e.FigureImage="amplify-liveness-figure__image",e.Figures="amplify-liveness-figures",e.Hint="amplify-liveness-hint",e.HintText="amplify-liveness-hint__text",e.LandscapeErrorModal="amplify-liveness-landscape-error-modal",e.LandscapeErrorModalButton="amplify-liveness-landscape-error-modal__button",e.LandscapeErrorModalHeader="amplify-liveness-landscape-error-modal__header",e.Loader="amplify-liveness-loader",e.MatchIndicator="amplify-liveness-match-indicator",e.OvalCanvas="amplify-liveness-oval-canvas",e.OpaqueOverlay="amplify-liveness-overlay-opaque",e.Overlay="amplify-liveness-overlay",e.Popover="amplify-liveness-popover",e.PopoverContainer="amplify-liveness-popover__container",e.PopoverAnchor="amplify-liveness-popover__anchor",e.PopoverAnchorSecondary="amplify-liveness-popover__anchor-secondary",e.RecordingIconContainer="amplify-liveness-recording-icon-container",e.RecordingIcon="amplify-liveness-recording-icon",e.StartScreenHeader="amplify-liveness-start-screen-header",e.StartScreenHeaderBody="amplify-liveness-start-screen-header__body",e.StartScreenHeaderHeading="amplify-liveness-start-screen-header__heading",e.StartScreenWarning="amplify-liveness-start-screen-warning",e.StartScreenInstructions="amplify-liveness-start-screen-instructions",e.StartScreenInstructionsHeading="amplify-liveness-start-screen-instructions__heading",e.Toast="amplify-liveness-toast",e.ToastContainer="amplify-liveness-toast__container",e.ToastMessage="amplify-liveness-toast__message",e.Video="amplify-liveness-video",e.VideoAnchor="amplify-liveness-video-anchor"}(Te||(Te={}));const Ce=({ariaLabel:e})=>{const[t,a]=pe();return t.done?null:y.default.createElement(f.Button,{autoFocus:!0,variation:"link",onClick:()=>{a({type:"CANCEL"})},size:"large",className:Te.CancelButton,"aria-label":e},y.default.createElement(v.IconClose,{"aria-hidden":"true","data-testid":"close-icon"}))},Se=t=>{var{variation:a="default",size:i="medium",children:r}=t,n=e.__rest(t,["variation","size","children"]);return x.createElement(f.View,Object.assign({className:`${Te.Toast} ${Te.Toast}--${a} ${Te.Toast}--${i}`,maxWidth:{base:"100%",small:"70%"}},n),x.createElement(f.Flex,{className:Te.ToastContainer},x.createElement(f.Flex,{className:Te.ToastMessage},r)))},ye=t=>{var{children:a,anchorOrigin:i={horizontal:"center",vertical:"center"},className:r}=t,n=e.__rest(t,["children","anchorOrigin","className"]);return x.createElement(f.Flex,Object.assign({className:`${Te.Overlay} ${r}`,alignItems:i.horizontal,justifyContent:i.vertical},n),a)},xe=e=>e.context.errorState,Fe=e=>e.context.faceMatchAssociatedParams.faceMatchState,Re=e=>e.context.faceMatchAssociatedParams.illuminationState,Me=e=>e.context.isFaceFarEnoughBeforeRecording,we=e=>e.context.faceMatchStateBeforeStart,Ae=({hintDisplayText:e})=>{const[t]=pe(),a=Ee(xe),i=Ee(Fe),r=Ee(Re),n=Ee(we),o=Ee(Me),s=t.matches("checkFaceDetectedBeforeStart"),c=t.matches("checkFaceDistanceBeforeRecording"),l=t.matches("recording"),d=t.matches("notRecording"),h=t.matches("uploading"),u=t.matches("checkSucceeded"),m=t.matches("checkFailed"),v=t.matches({recording:"flashFreshnessColors"}),g={[S.CANT_IDENTIFY]:e.hintCanNotIdentifyText,[S.FACE_IDENTIFIED]:e.hintTooFarText,[S.TOO_MANY]:e.hintTooManyFacesText,[S.TOO_CLOSE]:e.hintTooCloseText,[S.TOO_FAR]:e.hintTooFarText,[S.MATCHED]:e.hintHoldFaceForFreshnessText},p={[C.BRIGHT]:e.hintIlluminationTooBrightText,[C.DARK]:e.hintIlluminationTooDarkText,[C.NORMAL]:e.hintIlluminationNormalText},E=(()=>{if(!(a||m||u)){if(!l){if(s)return n===S.TOO_MANY?x.createElement(Se,null,g[n]):x.createElement(Se,null,e.hintMoveFaceFrontOfCameraText);if(c&&!1===o)return x.createElement(Se,null,e.hintTooCloseText);if(d)return x.createElement(Se,null,x.createElement(f.Flex,{className:Te.HintText},x.createElement(f.Loader,null),x.createElement(f.View,null,e.hintConnectingText)));if(h)return x.createElement(ye,{className:Te.OpaqueOverlay,anchorOrigin:{horizontal:"center",vertical:"end"}},x.createElement(Se,null,x.createElement(f.Flex,{className:Te.HintText},x.createElement(f.Loader,null),x.createElement(f.View,null,e.hintVerifyingText))));if(r&&r!==C.NORMAL)return x.createElement(Se,null,p[r])}return v?x.createElement(Se,{size:"large",variation:"primary"},e.hintHoldFaceForFreshnessText):l&&!v?x.createElement(Se,{size:"large",variation:i===S.TOO_CLOSE?"error":"primary"},i===S.TOO_CLOSE?g[S.TOO_CLOSE]:g[S.TOO_FAR]):null}})();return E||null},_e=({children:e})=>y.default.createElement(f.Flex,{className:Te.RecordingIcon},y.default.createElement(f.Flex,{"data-testid":"rec-icon",justifyContent:"center"},y.default.createElement(f.Icon,{viewBox:{width:20,height:20},width:"20",height:"20"},y.default.createElement("circle",{cx:"10",cy:"10",r:"8",fill:"red"}))),y.default.createElement(f.Text,{as:"span",fontWeight:"bold"},e)),De=t=>{var{children:a,caption:i,variation:r="default"}=t,n=e.__rest(t,["children","caption","variation"]);return y.default.createElement(f.Flex,Object.assign({as:"figure",className:`${Te.Figure} ${Te.Figure}--${r}`},n),y.default.createElement(f.View,{className:`${Te.FigureImage} ${Te.FigureImage}--${r}`},"success"===r?y.default.createElement("svg",{className:Te.FigureIcon,"aria-hidden":"true",width:"24",height:"24"},y.default.createElement("g",{fill:"none"},y.default.createElement("path",{fill:"#365E3D",d:"M0 0h24v24H0z"}),y.default.createElement("path",{fill:"#FFF",d:"m9.435 15.62-4.054-4.055L4 12.936l5.435 5.435L21.101 6.704l-1.37-1.371z"}))):null,"error"===r?y.default.createElement("svg",{className:Te.FigureIcon,"aria-hidden":"true",width:"24",height:"24"},y.default.createElement("g",{fill:"none"},y.default.createElement("path",{fill:"#600",d:"M0 0h24v24H0z"}),y.default.createElement("path",{fill:"#FFF",d:"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))):null,a),y.default.createElement(f.View,{as:"figcaption",className:`${Te.FigureCaption} ${Te.FigureCaption}--${r}`},i))},Oe=({title:e,testId:t})=>y.default.createElement("svg",{width:"150",height:"150","data-testid":t},y.default.createElement("title",null,e),y.default.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(0 -.001)"},y.default.createElement("path",{fill:"#5B361E",fillRule:"nonzero",d:"M124.655 0c9.173 8.155 9.394 17.812 13.258 32.385l.053.336.108.726.11.796.112.864.114.931.174 1.515.117 1.087.18 1.739.12 1.23.183 1.944.123 1.36.186 2.13.187 2.232.313 3.928.25 3.31.25 3.443.31 4.463.245 3.679.36 5.658.345 5.778.33 5.841.26 4.876.199 3.883.187 3.849.217 4.738.16 3.712.178 4.515.097 2.63v34.977L.519 150 .517 41.97c3-13.353 9.664-29.4 23.841-41.97h100.297Z"}),y.default.createElement("path",{fill:"#FCDDCC",fillRule:"nonzero",stroke:"#000",d:"m50.469 18.849.145.153c9.021 9.393 22.62 16.197 36.089 21.996l2.1.897 1.05.443 2.089.876 8.176 3.385 1.979.825 1.944.82c7.782 3.3 14.617 6.491 19.213 10.006 3.57 2.73 5.793 5.645 5.924 8.999v20.474l-.008.624-.016.669-.04 1.089-.04.777-.047.815-.06.853-.068.887-.08.918-.093.95-.104.978-.057.496-.123 1.016-.066.513-.144 1.049-.076.527-.165 1.077c-.057.36-.116.724-.178 1.086l-.193 1.103-.21 1.116-.11.557-.233 1.13c-.12.564-.247 1.13-.38 1.694l-.275 1.14c-1.037 4.147-2.426 8.3-4.271 11.978-6.17 9.34-12.996 16.035-19.28 20.691l-.8.584-.794.562-.784.539-1.165.77-1.147.724-.755.459c-.249.148-.497.294-.74.434l-.73.416-1.078.588-.702.367-1.033.517-.671.321-.657.303-.643.285-.541.23H68.149a75.81 75.81 0 0 1-.81-.284l-.918-.336a75.953 75.953 0 0 1-.935-.355l-.963-.382a85.513 85.513 0 0 1-1.988-.83l-1.032-.455c-.52-.233-1.05-.475-1.585-.727l-1.087-.517-1.113-.547c-.935-.465-1.893-.959-2.873-1.482l-1.193-.644a141.053 141.053 0 0 1-6.297-3.669l-1.33-.83c-17.11-10.783-22.636-33.458-23.66-49.98l-.071-1.267c-.02-.417-.038-.83-.053-1.235l-.037-1.212a86.317 86.317 0 0 1 .042-5.559l.047-1.002.06-.96.064-.843c1.09-2.51 2.164-4.304 3.296-5.882l.408-.558.415-.545.421-.538 2.026-2.492.481-.597.493-.624.507-.656.518-.69a61.722 61.722 0 0 0 3.769-5.754c4.03-6.917 7.127-14.806 9.544-21.668l.566-1.623.802-2.344 2.077-6.175.416-1.205.395-1.109.373-1.007.267-.682.253-.612c.47-.943.8-1.531 1.06-1.876l-.035.047Z"}),y.default.createElement("path",{fill:"#000",fillRule:"nonzero",d:"m94.566 121.353.722.895c-6.828 5.51-14.13 7.462-21.382 6.447-5.417-.758-10.535-3.2-13.987-6.186l-.318-.282.77-.854c3.285 2.964 8.343 5.434 13.694 6.183 6.797.95 13.632-.819 20.089-5.876l.412-.327Z"}),y.default.createElement("ellipse",{cx:"51.331",cy:"80.698",fill:"#000",fillRule:"nonzero",rx:"4.886",ry:"6.707"}),y.default.createElement("path",{fill:"#000",fillRule:"nonzero",d:"M42.539 63.719c4.453-2.586 11.355-3.268 17.22-.195l.35.19-.556 1.005c-5.437-3.01-11.946-2.479-16.175-.153l-.262.148-.577-.995Z"}),y.default.createElement("ellipse",{cx:"103.281",cy:"80.698",fill:"#000",fillRule:"nonzero",rx:"4.886",ry:"6.707"}),y.default.createElement("path",{fill:"#000",fillRule:"nonzero",d:"M94.492 63.719c4.453-2.586 11.355-3.268 17.22-.195l.35.19-.557 1.005c-5.436-3.01-11.946-2.479-16.174-.153l-.262.148-.577-.995Zm-22.972 32.9c0 4.216 2.006 7.72 5.831 7.48l.232-.018.115 1.144c-4.774.477-7.239-3.571-7.326-8.345l-.003-.26 1.15-.001h.001Z"}),y.default.createElement("path",{fill:"#FFF",fillRule:"nonzero",d:"M75.002.001H0v150h150v-150H75.002Zm0 0c25.627 0 46.402 33.579 46.402 75s-20.775 75-46.402 75c-25.627 0-46.402-33.579-46.402-75s20.775-75 46.402-75Z"}),y.default.createElement("path",{stroke:"#AEB3B7",strokeWidth:"2",d:"M120.921 75.001c0 20.555-5.214 39.117-13.589 52.507-8.386 13.406-19.838 21.493-32.313 21.493-12.476 0-23.928-8.087-32.312-21.493-8.377-13.39-13.59-31.952-13.59-52.507 0-20.555 5.214-39.116 13.589-52.507C51.091 9.09 62.543 1.001 75.018 1.001c12.476 0 23.928 8.088 32.314 21.493 8.375 13.39 13.588 31.952 13.588 52.507h.001Z"}))),Ie=({title:e,testId:t})=>y.default.createElement("svg",{width:"150",height:"150","data-testid":t},y.default.createElement("title",null,e),y.default.createElement("defs",null,y.default.createElement("linearGradient",{id:"a",x1:"50%",x2:"50%",y1:"0%",y2:"100%"},y.default.createElement("stop",{offset:"0%",stopColor:"#C2C2C2"}),y.default.createElement("stop",{offset:"100%",stopColor:"#C2C2C2",stopOpacity:"0"}))),y.default.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(2)"},y.default.createElement("path",{fill:"#FFF",fillRule:"nonzero",d:"M3.997 0h136v150h-136z"}),y.default.createElement("path",{fill:"url(#a)",fillRule:"nonzero",d:"M4.333 0h138v150h-138z"}),y.default.createElement("path",{fill:"#5B361E",fillRule:"nonzero",stroke:"#000",strokeWidth:"1.353",d:"m22.515 58.137-1.895 82.434 98.784-2.343c0-8.798.813-16.271.813-31.497 0-15.748-2.345-55.36-3.766-64.125C108.16 11.338 74.737 5.03 56.707 11.04c-28.425 9.475-33.64 35.095-34.192 47.097Z"}),y.default.createElement("path",{fill:"#EF992A",fillRule:"nonzero",d:"M38.104 138.228c8.339-3.98 5.1-1.525 15.916-3.104H90.5c5.448 0 9.541 3.104 28.904 3.104 6.391 0 5.987 8.988-2.473 8.988-24.315 1.08-66.07 1.08-78.281 0-77.975-6.896-10.97-4.014-.546-8.988Z"}),y.default.createElement("path",{fill:"#FCDDCC",fillRule:"nonzero",stroke:"#000",strokeWidth:"1.353",d:"m54.306 134.26 2.645-21.765h30.498l3.05 21.765c-15.778 14.791-30.703 6.163-36.193 0zm-27.59-54.458C25.42 66.68 33.467 67.18 37.653 69.07l2.837 25.314c-10.328-2.228-13.772-12.961-13.772-14.58zm89.512-.81c4.05-15.067-3.984-15.998-8.506-14.58L105.9 91.75c10.328-8.505 9.113-12.758 10.328-12.758z"}),y.default.createElement("path",{fill:"#FCDDCC",fillRule:"nonzero",stroke:"#000",strokeWidth:"1.353",d:"M53.564 109.804c-14.195-8.986-16.116-30.658-15.302-40.37 2.24-5.21 4.37-5.723 7.958-11.909 6.3-10.86 9.028-25.451 10.579-25.009 14.241 16.008 50.215 20.259 50.649 31.708v13.023c0 4.178-.911 14.358-4.558 21.65-8.986 13.674-20.131 18.612-24.58 19.372-2.334.922-10.55.521-24.746-8.465Z"}),y.default.createElement("path",{fill:"#000",fillRule:"nonzero",d:"m83.935 98.402.85 1.052c-7.974 6.435-17.2 5.243-23.018.18l-.23-.204.905-1.004c5.273 4.756 13.744 5.998 21.175.227l.318-.251Z"}),y.default.createElement("ellipse",{cx:"56.448",cy:"72.613",fill:"#000",fillRule:"nonzero",rx:"3.128",ry:"4.294"}),y.default.createElement("path",{fill:"#000",fillRule:"nonzero",d:"M50.664 61.476c2.917-1.694 7.404-2.147 11.244-.172l.31.165-.655 1.183c-3.348-1.854-7.361-1.545-9.985-.137l-.234.13-.68-1.17Z"}),y.default.createElement("ellipse",{cx:"89.709",cy:"72.613",fill:"#000",fillRule:"nonzero",rx:"3.128",ry:"4.294"}),y.default.createElement("path",{fill:"#000",fillRule:"nonzero",d:"M83.926 61.476c2.917-1.694 7.404-2.147 11.244-.172l.31.165-.655 1.183c-3.348-1.854-7.361-1.545-9.985-.137l-.234.13-.68-1.17Z"}),y.default.createElement("path",{stroke:"#000",strokeWidth:"1.353",d:"M69.005 82.806c0 1.858.859 5.487 4.287 5.144"}),y.default.createElement("path",{fill:"#FFF",d:"M73.004 0H0v150h146V0H73.004Zm.496 0C98.629 0 119 33.579 119 75s-20.371 75-45.5 75S28 116.421 28 75 48.371 0 73.5 0Z"}),y.default.createElement("path",{stroke:"#AEB3B7",strokeWidth:"2",d:"M118.4 75c0 20.555-5.156 39.117-13.441 52.507C96.665 140.913 85.338 149 72.999 149c-12.34 0-23.667-8.087-31.961-21.493C32.753 114.117 27.597 95.555 27.597 75c0-20.555 5.156-39.117 13.44-52.507C49.333 9.087 60.66 1 72.999 1c12.34 0 23.667 8.087 31.961 21.493C113.244 35.883 118.4 54.445 118.4 75Z"}))),be=({children:e})=>{const t=v.useThemeBreakpoint(),[a,i]=x.useState(!1),r=x.useRef(null),n="base"===t;return x.useEffect((()=>{function e(e){a&&r.current&&!r.current.contains(e.target)&&i(!1)}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[r,a]),x.createElement(f.Flex,{className:Te.Popover,onClick:()=>i(!a),ref:r,testId:"popover-icon"},x.createElement(v.AlertIcon,{ariaHidden:!0,variation:"info"}),a&&x.createElement(x.Fragment,null,x.createElement(f.Flex,{className:Te.PopoverAnchor}),x.createElement(f.Flex,{className:Te.PopoverAnchorSecondary}),x.createElement(f.Flex,{className:Te.PopoverContainer,left:n?-190:-108,"data-testid":"popover-text"},e)))};be.displayName="LivenessIconWithPopover";const Pe=({headingText:e,bodyText:t})=>y.default.createElement(f.View,{className:Te.StartScreenHeader},y.default.createElement(f.View,{className:Te.StartScreenHeaderHeading},e),y.default.createElement(f.View,{className:Te.StartScreenHeaderBody},t)),ke=({headingText:e,bodyText:t,infoText:a})=>y.default.createElement(f.Flex,{className:`${f.ComponentClassNames.Alert} ${Te.StartScreenWarning}`},y.default.createElement(f.View,{flex:"1"},y.default.createElement(f.View,{className:f.ComponentClassNames.AlertHeading},e),y.default.createElement(f.View,{className:f.ComponentClassNames.AlertBody},t)),y.default.createElement(be,null,a)),Le=({headingText:e,goodFitCaptionText:t,goodFitAltText:a,tooFarCaptionText:i,tooFarAltText:r,steps:n})=>y.default.createElement(f.Flex,{direction:"column"},y.default.createElement(f.Text,{className:Te.StartScreenInstructionsHeading},e),y.default.createElement(f.Flex,{className:Te.Figures},y.default.createElement(De,{variation:"success",caption:t},y.default.createElement(Oe,{title:a})),y.default.createElement(De,{variation:"error",caption:i},y.default.createElement(Ie,{title:r}))),y.default.createElement(f.Flex,{as:"ol",className:Te.InstructionList},n.map(((e,t)=>y.default.createElement(f.Flex,{as:"li",key:t+1},y.default.createElement(f.Text,{as:"span","aria-hidden":"true"},t+1,"."),y.default.createElement(f.Text,{as:"span"},e)))))),Ne="liveness-detector-start";function He(e){const{beginLivenessCheck:t,components:a,instructionDisplayText:i}=e;return x.createElement(f.Card,{className:Ne,"data-testid":Ne},x.createElement(f.Flex,{direction:"column"},(null==a?void 0:a.Header)?x.createElement(a.Header,null):x.createElement(Pe,{headingText:i.instructionsHeaderHeadingText,bodyText:i.instructionsHeaderBodyText}),(null==a?void 0:a.PhotosensitiveWarning)?x.createElement(a.PhotosensitiveWarning,null):x.createElement(ke,{headingText:i.photosensitivyWarningHeadingText,bodyText:i.photosensitivyWarningBodyText,infoText:i.photosensitivyWarningInfoText}),(null==a?void 0:a.Instructions)?x.createElement(a.Instructions,null):x.createElement(Le,{headingText:i.instructionListHeadingText,goodFitCaptionText:i.goodFitCaptionText,goodFitAltText:i.goodFitAltText,tooFarCaptionText:i.tooFarCaptionText,tooFarAltText:i.tooFarAltText,steps:[i.instructionListStepOneText,i.instructionListStepTwoText,i.instructionListStepThreeText,i.instructionListStepFourText]}),x.createElement(f.Flex,{justifyContent:"center"},x.createElement(f.Button,{variation:"primary",type:"button",onClick:t},i.instructionsBeginCheckText))))}const Be={timeoutHeaderText:"Time out",timeoutMessageText:"Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",faceDistanceHeaderText:"Forward movement detected",faceDistanceMessageText:"Avoid moving closer when connecting.",multipleFacesHeaderText:"Multiple faces detected",multipleFacesMessageText:"Ensure only one face is present in front of the camera when connecting.",clientHeaderText:"Client error",clientMessageText:"Check failed due to client issue",serverHeaderText:"Server issue",serverMessageText:"Cannot complete check due to server issue",landscapeHeaderText:"Landscape orientation not supported",landscapeMessageText:"Rotate your device to portrait (vertical) orientation.",portraitMessageText:"Ensure your device remains in portrait (vertical) orientation for the check’s duration.",tryAgainText:"Try again"},We=Object.assign({instructionsHeaderHeadingText:"Liveness check",instructionsHeaderBodyText:"You will go through a face verification process to prove that you are a real person.",instructionsBeginCheckText:"Begin check",photosensitivyWarningHeadingText:"Photosensitivity warning",photosensitivyWarningBodyText:"This check displays colored lights. Use caution if you are photosensitive.",photosensitivyWarningInfoText:"A small percentage of individuals may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.",instructionListHeadingText:"Follow the instructions to complete the check:",goodFitCaptionText:"Good fit",goodFitAltText:"Ilustration of a person's face, perfectly fitting inside of an oval.",tooFarCaptionText:"Too far",tooFarAltText:"Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",instructionListStepOneText:"When an oval appears, follow the instructions to fit your face in it.",instructionListStepTwoText:"Maximize your screen's brightness.",instructionListStepThreeText:"Make sure your face is not covered with sunglasses or a mask.",instructionListStepFourText:"Move to a well-lit place that is not in direct sunlight.",cameraMinSpecificationsHeadingText:"Camera does not meet minimum specifications",cameraMinSpecificationsMessageText:"Camera must support at least 320*240 resolution and 15 frames per second.",cameraNotFoundHeadingText:"Camera not accessible.",cameraNotFoundMessageText:"Check that camera is connected and camera permissions are enabled in settings before retrying.",retryCameraPermissionsText:"Retry",cancelLivenessCheckText:"Cancel Liveness check",recordingIndicatorText:"Rec",hintMoveFaceFrontOfCameraText:"Move face in front of camera",hintTooManyFacesText:"Ensure only one face is in front of camera",hintFaceDetectedText:"Face detected",hintCanNotIdentifyText:"Move face in front of camera",hintTooCloseText:"Move back",hintTooFarText:"Move closer",hintHoldFacePositionCountdownText:"Hold face position during countdown",hintConnectingText:"Connecting...",hintVerifyingText:"Verifying...",hintIlluminationTooBrightText:"Move to dimmer area",hintIlluminationTooDarkText:"Move to brighter area",hintIlluminationNormalText:"Lighting conditions normal",hintHoldFaceForFreshnessText:"Hold still"},Be),Ve=({errorState:e,overrideErrorDisplayText:t})=>{const a=Object.assign(Object.assign({},Be),t);return e===_.CAMERA_ACCESS_ERROR||e===_.CAMERA_FRAMERATE_ERROR||e===_.MOBILE_LANDSCAPE_ERROR?null:(e=>{const{error:t,displayText:a}=e,{timeoutHeaderText:i,timeoutMessageText:r,faceDistanceHeaderText:n,faceDistanceMessageText:o,multipleFacesHeaderText:s,multipleFacesMessageText:c,clientHeaderText:l,clientMessageText:d,serverHeaderText:h,serverMessageText:u}=a;let m,g;switch(t){case _.TIMEOUT:m=i,g=r;break;case _.FACE_DISTANCE_ERROR:m=n,g=o;break;case _.MULTIPLE_FACES_ERROR:m=s,g=c;break;case _.RUNTIME_ERROR:m=l,g=d;break;case _.SERVER_ERROR:default:m=h,g=u}return y.default.createElement(y.default.Fragment,null,y.default.createElement(f.Flex,{className:Te.ErrorModal},y.default.createElement(v.AlertIcon,{ariaHidden:!0,variation:"error"}),y.default.createElement(f.Text,{className:Te.ErrorModalHeading},m)),g)})({error:e,displayText:a})},je=e=>{const{children:t,onRetry:a,displayText:i}=e,r=Object.assign(Object.assign({},Be),i),{tryAgainText:n}=r;return y.default.createElement(ye,{className:Te.OpaqueOverlay},y.default.createElement(Se,null,t,y.default.createElement(f.Flex,{justifyContent:"center"},y.default.createElement(f.Button,{variation:"primary",type:"button",onClick:a},n))))},ze=e=>{var t;return null===(t=e.context.videoAssociatedParams)||void 0===t?void 0:t.videoMediaStream},qe=e=>e.context.faceMatchAssociatedParams.faceMatchPercentage,Ue=e=>e.context.faceMatchAssociatedParams.faceMatchState,Ye=y.default.createElement(f.Loader,{size:"large",className:Te.Loader,"data-testid":"centered-loader"}),$e=y.default.memo((({percentage:e,initialPercentage:t=25,testId:a})=>{const[i,r]=y.default.useState(t);y.default.useEffect((()=>{r(e<0?0:e>100?100:e)}),[e]);const n={"--percentage":`${i}%`};return y.default.createElement("div",{className:Te.MatchIndicator,"data-testid":a},y.default.createElement("div",{className:`${Te.MatchIndicator}__bar`,style:n}))})),Ge=e=>{const{isMobileScreen:a,isRecordingStopped:i,streamDisplayText:r,hintDisplayText:n,errorDisplayText:o,components:s,testId:c}=e,{cancelLivenessCheckText:l,recordingIndicatorText:d}=r,{ErrorView:h=je}=null!=s?s:{},[u,m]=pe(),v=Ee(ze),p=Ee(qe),E=Ee(Ue),T=Ee(xe),C=[S.TOO_FAR,S.CANT_IDENTIFY,S.FACE_IDENTIFIED,S.MATCHED],{videoRef:x,videoWidth:F,videoHeight:R}=function(e){const a=de.height.ideal,i=de.width.ideal,r=t.useRef(null),[n,o]=t.useState(a),[s,c]=t.useState(i);return t.useEffect((()=>{if(e){g.isObject(r.current)&&(r.current.srcObject=e);const{height:t,width:a}=e.getTracks()[0].getSettings();o(t),c(a)}return()=>{e&&e.getTracks().forEach((t=>{e.removeTrack(t),t.stop()}))}}),[e]),{videoRef:r,videoHeight:n,videoWidth:s}}(v),M=t.useRef(null),A=t.useRef(null),[_,D]=t.useState(!1),O=u.matches("cameraCheck"),I=u.matches("recording"),b=u.matches("checkSucceeded"),P=u.matches({recording:"flashFreshnessColors"}),[k,L]=t.useState(F),[N,H]=t.useState(R),[B,W]=t.useState((()=>F&&R?F/R:0));y.default.useLayoutEffect((()=>{_&&m({type:"SET_DOM_AND_CAMERA_DETAILS",data:{videoEl:x.current,canvasEl:M.current,freshnessColorEl:A.current,isMobile:a}}),x.current&&(L(x.current.videoWidth),H(x.current.videoHeight),W(x.current.videoWidth/x.current.videoHeight))}),[m,x,_,a]);return O?y.default.createElement(f.Flex,{height:R,width:"100%",position:"relative"},Ye):y.default.createElement(f.Flex,{className:w.default(Te.CameraModule,a&&`${Te.CameraModule}--mobile`),"data-testid":c},!_&&Ye,y.default.createElement(f.View,{as:"canvas",ref:A,className:Te.FreshnessCanvas,hidden:!0}),y.default.createElement(f.View,{className:Te.VideoAnchor,style:{aspectRatio:`${B}`}},y.default.createElement("video",{ref:x,muted:!0,autoPlay:!0,playsInline:!0,style:{transform:"scaleX(-1)"},width:k,height:N,onCanPlay:()=>{D(!0)},"data-testid":"video",className:Te.Video}),y.default.createElement(f.Flex,{className:w.default(Te.OvalCanvas,a&&`${Te.OvalCanvas}--mobile`,i&&Te.FadeOut)},y.default.createElement(f.View,{as:"canvas",width:"100%",height:"100%",ref:M})),I&&y.default.createElement(f.View,{className:Te.RecordingIconContainer},y.default.createElement(_e,null,d)),!b&&y.default.createElement(f.View,{className:Te.CancelContainer},y.default.createElement(Ce,{ariaLabel:l})),y.default.createElement(ye,{anchorOrigin:{horizontal:"center",vertical:I&&!P?"start":"space-between"},className:Te.InstructionOverlay},y.default.createElement(Ae,{hintDisplayText:n}),T&&y.default.createElement(h,{onRetry:()=>{m({type:"CANCEL"})}},Ve({errorState:T,overrideErrorDisplayText:o})),I&&!P&&C.includes(E)?y.default.createElement($e,{percentage:Math.ceil(p)}):null)))};function Xe(){return/Android|iPhone|iPad/i.test(navigator.userAgent)||/Macintosh/i.test(navigator.userAgent)&&!!navigator.maxTouchPoints&&navigator.maxTouchPoints>1}function Ze(){return window.matchMedia("(orientation: landscape)")}const Ke=e=>{const{onRetry:t,header:a,portraitMessage:i,landscapeMessage:r,tryAgainText:n}=e,[o,s]=x.useState(!0);return x.useLayoutEffect((()=>{const e=Ze();return s(e.matches),e.addEventListener("change",(e=>{s(e.matches)})),()=>{e.removeEventListener("change",(e=>s(e.matches)))}}),[]),x.createElement(f.Flex,{className:Te.LandscapeErrorModal,height:o?"auto":480},x.createElement(f.Text,{className:Te.LandscapeErrorModalHeader},a),x.createElement(f.Text,null,o?r:i),o?null:x.createElement(f.Flex,{className:Te.LandscapeErrorModalButton},x.createElement(f.Button,{variation:"primary",type:"button",onClick:t},n)))},Qe="liveness-detector-check",Je=e=>e.context.isRecordingStopped,et=({hintDisplayText:e,cameraDisplayText:t,streamDisplayText:a,errorDisplayText:i,components:r})=>{const[n,o]=pe(),s=Ee(xe),c=Ee(Je),l=n.matches("permissionDenied"),d=Xe(),h=()=>{o({type:"RETRY_CAMERA_CHECK"})},{cameraMinSpecificationsHeadingText:u,cameraMinSpecificationsMessageText:m,cameraNotFoundHeadingText:v,cameraNotFoundMessageText:g,retryCameraPermissionsText:p}=t,{cancelLivenessCheckText:E}=a;x.useLayoutEffect((()=>{if(d){const e=e=>{e&&o({type:"MOBILE_LANDSCAPE_WARNING"})},t=Ze();return e(t.matches),t.addEventListener("change",(t=>{e(t.matches)})),()=>{t.removeEventListener("change",(t=>e(t.matches)))}}}),[d,o]);return x.createElement(f.Flex,{direction:"column",position:"relative",testId:Qe,className:Qe},(()=>{if(s===_.MOBILE_LANDSCAPE_ERROR){const e=Object.assign(Object.assign({},Be),i),{landscapeHeaderText:t,portraitMessageText:a,landscapeMessageText:r,tryAgainText:n}=e;return x.createElement(f.Flex,{backgroundColor:"background.primary",direction:"column",textAlign:"center",alignItems:"center",justifyContent:"center",position:"absolute",width:"100%"},x.createElement(Ke,{header:t,portraitMessage:a,landscapeMessage:r,tryAgainText:n,onRetry:()=>{o({type:"CANCEL"})}}))}return l?x.createElement(f.Flex,{backgroundColor:"background.primary",direction:"column",textAlign:"center",alignItems:"center",justifyContent:"center",width:"100%",height:480},x.createElement(f.Text,{fontSize:"large",fontWeight:"bold"},s===_.CAMERA_FRAMERATE_ERROR?u:v),x.createElement(f.Text,{maxWidth:300},s===_.CAMERA_FRAMERATE_ERROR?m:g),x.createElement(f.Button,{variation:"primary",type:"button",onClick:h},p),x.createElement(f.View,{position:"absolute",top:"medium",right:"medium"},x.createElement(Ce,{ariaLabel:E}))):x.createElement(Ge,{isMobileScreen:d,isRecordingStopped:c,streamDisplayText:a,hintDisplayText:e,errorDisplayText:i,components:r})})())};const tt="liveness-detector";function at(e){const{disableInstructionScreen:t=!1,components:a,config:r,displayText:n}=e,o=x.useRef(null),{hintDisplayText:s,cameraDisplayText:c,instructionDisplayText:l,streamDisplayText:d,errorDisplayText:h}=function(e){const t=Object.assign(Object.assign({},We),e),{instructionsHeaderHeadingText:a,instructionsHeaderBodyText:i,instructionsBeginCheckText:r,photosensitivyWarningHeadingText:n,photosensitivyWarningBodyText:o,photosensitivyWarningInfoText:s,instructionListHeadingText:c,goodFitCaptionText:l,goodFitAltText:d,tooFarCaptionText:h,tooFarAltText:u,instructionListStepOneText:m,instructionListStepTwoText:f,instructionListStepThreeText:v,instructionListStepFourText:g,cameraMinSpecificationsHeadingText:p,cameraMinSpecificationsMessageText:E,cameraNotFoundHeadingText:T,cameraNotFoundMessageText:C,retryCameraPermissionsText:S,cancelLivenessCheckText:y,recordingIndicatorText:x,hintMoveFaceFrontOfCameraText:F,hintTooManyFacesText:R,hintFaceDetectedText:M,hintCanNotIdentifyText:w,hintTooCloseText:A,hintTooFarText:_,hintHoldFacePositionCountdownText:D,hintConnectingText:O,hintVerifyingText:I,hintIlluminationTooBrightText:b,hintIlluminationTooDarkText:P,hintIlluminationNormalText:k,hintHoldFaceForFreshnessText:L,timeoutHeaderText:N,timeoutMessageText:H,faceDistanceHeaderText:B,faceDistanceMessageText:W,multipleFacesHeaderText:V,multipleFacesMessageText:j,clientHeaderText:z,clientMessageText:q,serverHeaderText:U,serverMessageText:Y,landscapeHeaderText:$,landscapeMessageText:G,portraitMessageText:X,tryAgainText:Z}=t;return{hintDisplayText:{hintMoveFaceFrontOfCameraText:F,hintTooManyFacesText:R,hintFaceDetectedText:M,hintCanNotIdentifyText:w,hintTooCloseText:A,hintTooFarText:_,hintHoldFacePositionCountdownText:D,hintConnectingText:O,hintVerifyingText:I,hintIlluminationTooBrightText:b,hintIlluminationTooDarkText:P,hintIlluminationNormalText:k,hintHoldFaceForFreshnessText:L},cameraDisplayText:{cameraMinSpecificationsHeadingText:p,cameraMinSpecificationsMessageText:E,cameraNotFoundHeadingText:T,cameraNotFoundMessageText:C,retryCameraPermissionsText:S},instructionDisplayText:{instructionsHeaderHeadingText:a,instructionsHeaderBodyText:i,instructionsBeginCheckText:r,photosensitivyWarningHeadingText:n,photosensitivyWarningBodyText:o,photosensitivyWarningInfoText:s,instructionListHeadingText:c,goodFitCaptionText:l,goodFitAltText:d,tooFarCaptionText:h,tooFarAltText:u,instructionListStepOneText:m,instructionListStepTwoText:f,instructionListStepThreeText:v,instructionListStepFourText:g},streamDisplayText:{cancelLivenessCheckText:y,recordingIndicatorText:x},errorDisplayText:{timeoutHeaderText:N,timeoutMessageText:H,faceDistanceHeaderText:B,faceDistanceMessageText:W,multipleFacesHeaderText:V,multipleFacesMessageText:j,clientHeaderText:z,clientMessageText:q,serverHeaderText:U,serverMessageText:Y,landscapeHeaderText:$,landscapeMessageText:G,portraitMessageText:X,tryAgainText:Z}}}(n),u=i.useInterpret(ue,{devTools:"development"===process.env.NODE_ENV,context:{componentProps:Object.assign(Object.assign({},e),{config:null!=r?r:{}})}}),[m,v]=i.useActor(u),g=m.matches("start")||m.matches("userCancel"),p=x.useCallback((()=>{v({type:"BEGIN"})}),[v]);return x.useLayoutEffect((()=>{t&&g&&p()}),[p,t,g]),x.createElement(f.View,{className:tt,testId:tt},x.createElement(ve,{componentProps:e,service:u},x.createElement(f.Flex,{direction:"column",ref:o},g?x.createElement(He,{beginLivenessCheck:p,components:a,instructionDisplayText:l}):x.createElement(et,{hintDisplayText:s,cameraDisplayText:c,streamDisplayText:d,errorDisplayText:h,components:a}))))}const it=()=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield a.Credentials.get()}));exports.FaceLivenessDetector=function(t){const{config:a}=t,i=e.__rest(t,["config"]);return x.createElement(at,Object.assign({},i,{config:Object.assign({credentialProvider:it},a)}))},exports.FaceLivenessDetectorCore=at;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var auth = require('aws-amplify/auth');
+var react = require('@xstate/react');
+var xstate = require('xstate');
+var tfjsCore = require('@tensorflow/tfjs-core');
+var faceDetection = require('@tensorflow-models/face-detection');
+var tfjsBackendWasm = require('@tensorflow/tfjs-backend-wasm');
+require('@tensorflow/tfjs-backend-cpu');
+var utils = require('@aws-amplify/core/internals/utils');
+var clientRekognitionstreaming = require('@aws-sdk/client-rekognitionstreaming');
+var utilFormatUrl = require('@aws-sdk/util-format-url');
+var eventstreamSerdeBrowser = require('@smithy/eventstream-serde-browser');
+var fetchHttpHandler = require('@smithy/fetch-http-handler');
+var protocolHttp = require('@smithy/protocol-http');
+var nanoid = require('nanoid');
+var uiReact = require('@aws-amplify/ui-react');
+var ui = require('@aws-amplify/ui');
+var internal = require('@aws-amplify/ui-react/internal');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * The abstract class representing FaceDetection
+ * to be implemented for different libraries.
+ */
+class FaceDetection {
+    /**
+     * Triggers the `loadModels` method and stores
+     * the corresponding promise to be awaited later.
+     */
+    triggerModelLoading() {
+        this.modelLoadingPromise = this.loadModels();
+    }
+}
+
+/**
+ * The illumination states
+ */
+var IlluminationState;
+(function (IlluminationState) {
+    IlluminationState["DARK"] = "dark";
+    IlluminationState["BRIGHT"] = "bright";
+    IlluminationState["NORMAL"] = "normal";
+})(IlluminationState || (IlluminationState = {}));
+/**
+ * The detected face states with respect to the liveness oval
+ */
+var FaceMatchState;
+(function (FaceMatchState) {
+    FaceMatchState["MATCHED"] = "MATCHED";
+    FaceMatchState["TOO_FAR"] = "TOO FAR";
+    FaceMatchState["TOO_CLOSE"] = "TOO CLOSE";
+    FaceMatchState["CANT_IDENTIFY"] = "CANNOT IDENTIFY";
+    FaceMatchState["FACE_IDENTIFIED"] = "ONE FACE IDENTIFIED";
+    FaceMatchState["TOO_MANY"] = "TOO MANY FACES";
+})(FaceMatchState || (FaceMatchState = {}));
+
+/**
+ * The liveness error states
+ */
+const LivenessErrorState = {
+    TIMEOUT: 'TIMEOUT',
+    RUNTIME_ERROR: 'RUNTIME_ERROR',
+    FRESHNESS_TIMEOUT: 'FRESHNESS_TIMEOUT',
+    SERVER_ERROR: 'SERVER_ERROR',
+    CAMERA_FRAMERATE_ERROR: 'CAMERA_FRAMERATE_ERROR',
+    CAMERA_ACCESS_ERROR: 'CAMERA_ACCESS_ERROR',
+    FACE_DISTANCE_ERROR: 'FACE_DISTANCE_ERROR',
+    MOBILE_LANDSCAPE_ERROR: 'MOBILE_LANDSCAPE_ERROR',
+    MULTIPLE_FACES_ERROR: 'MULTIPLE_FACES_ERROR',
+};
+
+// Face distance is calculated as pupilDistance / ovalWidth.
+// The further away you are from the camera the distance between your pupils will decrease, thus lowering the threshold values.
+// These FACE_DISTNACE_THRESHOLD values are determined by the science team and should only be changed with their approval.
+// We want to ensure at the start of a  check that the user's pupilDistance/ovalWidth is below FACE_DISTANCE_THRESHOLD to ensure that they are starting
+//  a certain distance away from the camera.
+const FACE_DISTANCE_THRESHOLD = 0.32;
+const REDUCED_THRESHOLD = 0.4;
+const REDUCED_THRESHOLD_MOBILE = 0.37;
+const WS_CLOSURE_CODE = {
+    SUCCESS_CODE: 1000,
+    DEFAULT_ERROR_CODE: 4000,
+    FACE_FIT_TIMEOUT: 4001,
+    USER_CANCEL: 4003,
+    RUNTIME_ERROR: 4005,
+    USER_ERROR_DURING_CONNECTION: 4007,
+};
+
+/* 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,
+    };
+}
+
+/**
+ * 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;
+    }
+}
+
+const BLAZEFACE_VERSION = '1.0.2';
+/**
+ *   WARNING: When updating these links,
+ *   also make sure to update documentation and the link in the canary/e2e test "canary/e2e/features/liveness/face-detect.feature"
+ */
+const DEFAULT_BLAZEFACE_URL = `https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow-models/blazeface/${BLAZEFACE_VERSION}/model/model.json`;
+const DEFAULT_TFJS_WASM_URL = `https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/${tfjsBackendWasm.version_wasm}/`;
+/**
+ * The BlazeFace implementation of the FaceDetection interface.
+ */
+class BlazeFaceFaceDetection extends FaceDetection {
+    constructor(binaryPath, faceModelUrl) {
+        super();
+        this.faceModelUrl = faceModelUrl ?? DEFAULT_BLAZEFACE_URL;
+        this.binaryPath = binaryPath ?? DEFAULT_TFJS_WASM_URL;
+    }
+    async loadModels() {
+        if (isWebAssemblySupported()) {
+            await this._loadWebAssemblyBackend();
+        }
+        else {
+            await this._loadCPUBackend();
+        }
+        try {
+            await tfjsCore.ready();
+            this._model = await faceDetection.createDetector(faceDetection.SupportedModels.MediaPipeFaceDetector, {
+                runtime: 'tfjs',
+                detectorModelUrl: this.faceModelUrl,
+            });
+        }
+        catch (e) {
+            throw new Error('There was an error loading the blazeface model. If you are using a custom blazeface model url ensure that it is a fully qualified url that returns a json file.');
+        }
+    }
+    async detectFaces(videoEl) {
+        const flipHorizontal = true;
+        const predictions = await this._model.estimateFaces(videoEl, {
+            flipHorizontal,
+        });
+        const timestampMs = Date.now();
+        const faces = predictions.map((prediction) => {
+            const { box, keypoints } = prediction;
+            const { xMin: left, yMin: top, width, height } = box;
+            const rightEye = this._getCoordinate(keypoints, 'rightEye');
+            const leftEye = this._getCoordinate(keypoints, 'leftEye');
+            const nose = this._getCoordinate(keypoints, 'noseTip');
+            const mouth = this._getCoordinate(keypoints, 'mouthCenter');
+            const rightEar = this._getCoordinate(keypoints, 'rightEarTragion');
+            const leftEar = this._getCoordinate(keypoints, 'leftEarTragion');
+            const probability = [90];
+            return {
+                top,
+                left,
+                width,
+                height,
+                timestampMs,
+                probability: probability[0],
+                rightEye,
+                leftEye,
+                mouth,
+                nose,
+                rightEar,
+                leftEar,
+            };
+        });
+        return faces;
+    }
+    _getCoordinate(keypoints, name) {
+        const keypoint = keypoints.find((k) => k.name === name);
+        return [keypoint.x, keypoint.y];
+    }
+    async _loadWebAssemblyBackend() {
+        try {
+            tfjsBackendWasm.setWasmPaths(this.binaryPath);
+            await utils.jitteredExponentialRetry(async () => {
+                const success = await tfjsCore.setBackend('wasm');
+                if (!success) {
+                    throw new Error(`Initialization of backend wasm failed`);
+                }
+            }, []);
+            this.modelBackend = 'wasm';
+        }
+        catch (e) {
+            throw new Error('There was an error loading the TFJS WASM backend. If you are using a custom WASM path ensure that it ends with "/" and that it is not the full URL as @tensorflow/tfjs-backend-wasm will append the wasm binary file name. Read more: https://github.com/tensorflow/tfjs/blob/master/tfjs-backend-wasm/src/backend_wasm.ts#L475.');
+        }
+    }
+    async _loadCPUBackend() {
+        await tfjsCore.setBackend('cpu');
+        this.modelBackend = 'cpu';
+    }
+}
+
+/**
+ * Helper wrapper class over the native MediaRecorder.
+ */
+class VideoRecorder {
+    constructor(stream, options = {}) {
+        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();
+    }
+    getState() {
+        return this._recorder.state;
+    }
+    start(timeSlice) {
+        this.clearRecordedData();
+        this.recordingStartApiTimestamp = Date.now();
+        this._recorder.start(timeSlice);
+    }
+    async stop() {
+        if (this.getState() === 'recording') {
+            this._recorder.stop();
+        }
+        return this._recorderStopped;
+    }
+    pause() {
+        this._recorder.pause();
+    }
+    clearRecordedData() {
+        this._chunks = [];
+    }
+    dispatch(event) {
+        this._recorder.dispatchEvent(event);
+    }
+    getVideoChunkSize() {
+        return this._chunks.length;
+    }
+    _setupCallbacks() {
+        // Creates a Readablestream of video chunks. Waits to receive a clientSessionInfo event before pushing
+        //  a livenessActionDocument to the ReadableStream and finally closing the ReadableStream
+        this.videoStream = new ReadableStream({
+            start: (controller) => {
+                if (!this._recorder) {
+                    return;
+                }
+                this._recorder.ondataavailable = (e) => {
+                    if (e.data && e.data.size > 0) {
+                        if (this._chunks.length === 0) {
+                            this.firstChunkTimestamp = Date.now();
+                        }
+                        this._chunks.push(e.data);
+                        controller.enqueue(e.data);
+                    }
+                };
+                this._recorder.addEventListener('clientSesssionInfo', (e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                    controller.enqueue(e.data.clientInfo);
+                });
+                this._recorder.addEventListener('stopVideo', () => {
+                    controller.enqueue('stopVideo');
+                });
+                this._recorder.addEventListener('endStream', () => {
+                    controller.close();
+                });
+                this._recorder.addEventListener('endStreamWithCode', (e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                    controller.enqueue({
+                        type: 'endStreamWithCode',
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                        code: e.data.code,
+                    });
+                });
+            },
+        });
+        this.recorderStarted = new Promise((resolve) => {
+            this._recorder.onstart = () => {
+                this.recorderStartTimestamp = Date.now();
+                resolve();
+            };
+        });
+        this._recorderStopped = new Promise((resolve) => {
+            this._recorder.onstop = () => {
+                this.recorderEndTimestamp = Date.now();
+                resolve();
+            };
+        });
+        this._recorder.onerror = () => {
+            if (this.getState() !== 'stopped') {
+                this.stop();
+            }
+        };
+    }
+}
+
+const VERSION = '3.0.0';
+
+const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
+const getLivenessUserAgent = () => {
+    return BASE_USER_AGENT;
+};
+
+/**
+ * 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
+ * Because of this the file is not fully typed at this time but we should eventually work on fully typing this file.
+ */
+const DEFAULT_WS_CONNECTION_TIMEOUT_MS = 2000;
+const isWebSocketRequest = (request) => request.protocol === 'ws:' || request.protocol === 'wss:';
+const isReadableStream = (payload) => typeof ReadableStream === 'function' && payload instanceof ReadableStream;
+/**
+ * Transfer payload data to an AsyncIterable.
+ * When the ReadableStream API is available in the runtime(e.g. browser), and
+ * the request body is ReadableStream, so we need to transfer it to AsyncIterable
+ * to make the stream consumable by WebSocket.
+ */
+const getIterator = (stream) => {
+    // Noop if stream is already an async iterable
+    if (stream[Symbol.asyncIterator]) {
+        return stream;
+    }
+    if (isReadableStream(stream)) {
+        //If stream is a ReadableStream, transfer the ReadableStream to async iterable.
+        return eventstreamSerdeBrowser.readableStreamtoIterable(stream);
+    }
+    //For other types, just wrap them with an async iterable.
+    return {
+        [Symbol.asyncIterator]: async function* () {
+            yield stream;
+        },
+    };
+};
+/**
+ * Convert async iterable to a ReadableStream when ReadableStream API
+ * is available(browsers). Otherwise, leave as it is(ReactNative).
+ */
+const toReadableStream = (asyncIterable) => typeof ReadableStream === 'function'
+    ? eventstreamSerdeBrowser.iterableToReadableStream(asyncIterable)
+    : asyncIterable;
+/**
+ * Base handler for websocket requests and HTTP request. By default, the request input and output
+ * body will be in a ReadableStream, because of interface consistency among middleware.
+ * If ReadableStream is not available, like in React-Native, the response body
+ * will be an async iterable.
+ */
+class CustomWebSocketFetchHandler {
+    constructor(options, httpHandler = new fetchHttpHandler.FetchHttpHandler()) {
+        this.metadata = {
+            handlerProtocol: 'websocket/h1.1',
+        };
+        this.sockets = {};
+        this.utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'
+        this.httpHandler = httpHandler;
+        if (typeof options === 'function') {
+            this.configPromise = options().then((opts) => opts ?? {});
+        }
+        else {
+            this.configPromise = Promise.resolve(options ?? {});
+        }
+    }
+    /**
+     * Destroys the WebSocketHandler.
+     * Closes all sockets from the socket pool.
+     */
+    destroy() {
+        for (const [key, sockets] of Object.entries(this.sockets)) {
+            for (const socket of sockets) {
+                socket.close(1000, `Socket closed through destroy() call`);
+            }
+            delete this.sockets[key];
+        }
+    }
+    async handle(request) {
+        if (!isWebSocketRequest(request)) {
+            return this.httpHandler.handle(request);
+        }
+        const url = utilFormatUrl.formatUrl(request);
+        const socket = new WebSocket(url);
+        // Add socket to sockets pool
+        if (!this.sockets[url]) {
+            this.sockets[url] = [];
+        }
+        this.sockets[url].push(socket);
+        socket.binaryType = 'arraybuffer';
+        const { connectionTimeout = DEFAULT_WS_CONNECTION_TIMEOUT_MS } = await this
+            .configPromise;
+        await this.waitForReady(socket, connectionTimeout);
+        const { body } = request;
+        const bodyStream = getIterator(body);
+        const asyncIterable = this.connect(socket, bodyStream);
+        const outputPayload = toReadableStream(asyncIterable);
+        return {
+            response: new protocolHttp.HttpResponse({
+                statusCode: 200,
+                body: outputPayload,
+            }),
+        };
+    }
+    /**
+     * Removes all closing/closed sockets from the socket pool for URL.
+     */
+    removeNotUsableSockets(url) {
+        this.sockets[url] = (this.sockets[url] ?? []).filter((socket) => ![WebSocket.CLOSING, WebSocket.CLOSED].includes(socket.readyState));
+    }
+    waitForReady(socket, connectionTimeout) {
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                this.removeNotUsableSockets(socket.url);
+                reject({
+                    $metadata: {
+                        httpStatusCode: 500,
+                    },
+                });
+            }, connectionTimeout);
+            socket.onopen = () => {
+                clearTimeout(timeout);
+                resolve();
+            };
+        });
+    }
+    connect(socket, data) {
+        // To notify output stream any error thrown after response
+        // is returned while data keeps streaming.
+        let streamError = undefined;
+        // To notify onclose event that error has occurred.
+        let socketErrorOccurred = false;
+        // initialize as no-op.
+        let reject = () => { };
+        let resolve = () => { };
+        socket.onmessage = (event) => {
+            resolve({
+                done: false,
+                value: new Uint8Array(event.data),
+            });
+        };
+        socket.onerror = (error) => {
+            socketErrorOccurred = true;
+            socket.close();
+            reject(error);
+        };
+        socket.onclose = () => {
+            this.removeNotUsableSockets(socket.url);
+            if (socketErrorOccurred)
+                return;
+            if (streamError) {
+                reject(streamError);
+            }
+            else {
+                resolve({
+                    done: true,
+                    value: undefined, // unchecked because done=true.
+                });
+            }
+        };
+        const outputStream = {
+            [Symbol.asyncIterator]: () => ({
+                next: () => {
+                    return new Promise((_resolve, _reject) => {
+                        resolve = _resolve;
+                        reject = _reject;
+                    });
+                },
+            }),
+        };
+        const send = async () => {
+            try {
+                for await (const inputChunk of data) {
+                    const decodedString = this.utf8decoder.decode(inputChunk);
+                    if (decodedString.includes('closeCode')) {
+                        const match = decodedString.match(/"closeCode":([0-9]*)/);
+                        if (match) {
+                            const closeCode = match[1];
+                            socket.close(parseInt(closeCode));
+                        }
+                        continue;
+                    }
+                    socket.send(inputChunk);
+                }
+            }
+            catch (err) {
+                // We don't throw the error here because the send()'s returned
+                // would already be settled by the time sending chunk throws error.
+                // Instead, the notify the output stream to throw if there's
+                // exceptions
+                streamError = err;
+            }
+            finally {
+                // WS status code: https://tools.ietf.org/html/rfc6455#section-7.4
+                socket.close(WS_CLOSURE_CODE.SUCCESS_CODE);
+            }
+        };
+        send();
+        return outputStream;
+    }
+}
+
+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 auth.fetchAuthSession()).credentials;
+        if (!credentials) {
+            throw new Error('No credentials');
+        }
+        const clientconfig = {
+            credentials,
+            region: this.region,
+            customUserAgent: `${utils.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 clientRekognitionstreaming.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 clientRekognitionstreaming.StartFaceLivenessSessionCommand({
+            ChallengeVersions: 'FaceMovementAndLightChallenge_1.0.0',
+            SessionId: this.sessionId,
+            LivenessRequestStream: livenessRequestGenerator,
+            VideoWidth: this.videoEl.videoWidth.toString(),
+            VideoHeight: this.videoEl.videoHeight.toString(),
+        }));
+        return response.LivenessResponseStream;
+    }
+}
+
+const TICK_RATE = 10; // ms -- the rate at which we will render/check colors
+var COLOR_STAGE;
+(function (COLOR_STAGE) {
+    COLOR_STAGE["SCROLLING"] = "SCROLLING";
+    COLOR_STAGE["FLAT"] = "FLAT";
+})(COLOR_STAGE || (COLOR_STAGE = {}));
+class FreshnessColorDisplay {
+    constructor(context, freshnessColorsSequence) {
+        this.context = context;
+        this.freshnessColorsSequence = freshnessColorsSequence;
+        this.isFirstTick = true;
+    }
+    async displayColorTick() {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                this.displayNextColorTick(resolve, reject);
+            }, Math.min(TICK_RATE));
+        });
+    }
+    init() {
+        this.stageIndex = 0;
+        this.currColorIndex = 0;
+        this.currColorSequence = this.freshnessColorsSequence[0];
+        this.prevColorSequence = this.freshnessColorsSequence[0];
+        this.stage = COLOR_STAGE.FLAT;
+        this.timeLastFlatOrScrollChange = Date.now();
+        this.timeLastFaceMatchChecked = Date.now();
+    }
+    displayNextColorTick(resolve, _) {
+        const { freshnessColorEl } = this.context.freshnessColorAssociatedParams;
+        const { ovalDetails, scaleFactor } = this.context.ovalAssociatedParams;
+        const { videoEl } = this.context.videoAssociatedParams;
+        const tickStartTime = Date.now();
+        // Send a colorStart time only for the first tick of the first color
+        if (this.isFirstTick) {
+            this.init();
+            this.isFirstTick = false;
+            this.sendColorStartTime({
+                tickStartTime: tickStartTime,
+                currColor: this.currColorSequence.color,
+                prevColor: this.currColorSequence.color,
+                currColorIndex: this.stageIndex,
+            });
+        }
+        let timeSinceLastColorChange = tickStartTime - this.timeLastFlatOrScrollChange;
+        freshnessColorEl.style.display = 'block';
+        // Every 10 ms tick we will check if the threshold for flat or scrolling, if so we will try to go to the next stage
+        if ((this.stage === COLOR_STAGE.FLAT &&
+            timeSinceLastColorChange >=
+                this.currColorSequence.flatDisplayDuration) ||
+            (this.stage === COLOR_STAGE.SCROLLING &&
+                timeSinceLastColorChange >= this.currColorSequence.downscrollDuration)) {
+            this.incrementStageIndex(tickStartTime);
+            timeSinceLastColorChange = 0;
+        }
+        // Every 10 ms tick we will update the colors displayed
+        if (this.currColorIndex < this.freshnessColorsSequence.length) {
+            const heightFraction = timeSinceLastColorChange /
+                (this.stage === COLOR_STAGE.SCROLLING
+                    ? this.currColorSequence.downscrollDuration
+                    : this.currColorSequence.flatDisplayDuration);
+            fillOverlayCanvasFractional({
+                overlayCanvas: freshnessColorEl,
+                prevColor: this.prevColorSequence.color,
+                nextColor: this.currColorSequence.color,
+                videoEl: videoEl,
+                ovalDetails: ovalDetails,
+                heightFraction,
+                scaleFactor: scaleFactor,
+            });
+            resolve(false);
+        }
+        else {
+            freshnessColorEl.style.display = 'none';
+            resolve(true);
+        }
+    }
+    // FLAT - prev = 0, curr = 0
+    // SCROLL - prev = 0, curr = 1
+    // FLAT - prev = 1, curr = 1
+    // SCROLL - prev = 1, curr = 2
+    // SCROLL - prev = 2, curr = 3
+    incrementStageIndex(tickStartTime) {
+        this.stageIndex += 1;
+        this.prevColorSequence = this.freshnessColorsSequence[this.currColorIndex];
+        if (this.stage === COLOR_STAGE.FLAT) {
+            this.currColorIndex += 1;
+            this.stage = COLOR_STAGE.SCROLLING;
+        }
+        else if (this.stage === COLOR_STAGE.SCROLLING) {
+            const nextFlatColor = this.freshnessColorsSequence[this.currColorIndex];
+            if (nextFlatColor.flatDisplayDuration > 0) {
+                this.stage = COLOR_STAGE.FLAT;
+            }
+            else {
+                this.stage = COLOR_STAGE.SCROLLING;
+                this.currColorIndex += 1;
+            }
+        }
+        this.currColorSequence = this.freshnessColorsSequence[this.currColorIndex];
+        this.timeLastFlatOrScrollChange = Date.now();
+        if (this.currColorSequence) {
+            this.sendColorStartTime({
+                tickStartTime: tickStartTime,
+                currColor: this.currColorSequence.color,
+                prevColor: this.prevColorSequence.color,
+                currColorIndex: this.stageIndex,
+            });
+        }
+    }
+    sendColorStartTime({ tickStartTime, currColor, prevColor, currColorIndex, }) {
+        const { livenessStreamProvider, challengeId } = this.context;
+        livenessStreamProvider.sendClientInfo({
+            Challenge: {
+                FaceMovementAndLightChallenge: {
+                    ChallengeId: challengeId,
+                    ColorDisplayed: {
+                        CurrentColor: { RGB: getRGBArrayFromColorString(currColor) },
+                        PreviousColor: { RGB: getRGBArrayFromColorString(prevColor) },
+                        SequenceNumber: currColorIndex,
+                        CurrentColorStartTimestamp: tickStartTime,
+                    },
+                },
+            },
+        });
+    }
+}
+
+const isServerSesssionInformationEvent = (value) => {
+    return !!value
+        ?.ServerSessionInformationEvent;
+};
+const isDisconnectionEvent = (value) => {
+    return !!value
+        ?.DisconnectionEvent;
+};
+const isValidationExceptionEvent = (value) => {
+    return !!value
+        ?.ValidationException;
+};
+const isInternalServerExceptionEvent = (value) => {
+    return !!value
+        ?.InternalServerException;
+};
+const isThrottlingExceptionEvent = (value) => {
+    return !!value
+        ?.ThrottlingException;
+};
+const isServiceQuotaExceededExceptionEvent = (value) => {
+    return !!value
+        ?.ServiceQuotaExceededException;
+};
+const isInvalidSignatureRegionException = (error) => {
+    const { message, name } = error;
+    return (name === 'InvalidSignatureException' && message.includes('valid region'));
+};
+
+const STATIC_VIDEO_CONSTRAINTS = {
+    width: {
+        min: 320,
+        ideal: 640,
+    },
+    height: {
+        min: 240,
+        ideal: 480,
+    },
+    frameRate: { min: 15, ideal: 30, max: 30 },
+    facingMode: 'user',
+};
+
+/* eslint-disable */
+const MIN_FACE_MATCH_TIME = 1000;
+const DEFAULT_FACE_FIT_TIMEOUT = 7000;
+let responseStream;
+const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
+function getLastSelectedCameraId() {
+    return localStorage.getItem(CAMERA_ID_KEY);
+}
+function setLastSelectedCameraId(deviceId) {
+    localStorage.setItem(CAMERA_ID_KEY, deviceId);
+}
+const livenessMachine = xstate.createMachine({
+    id: 'livenessMachine',
+    initial: 'cameraCheck',
+    predictableActionArguments: true,
+    context: {
+        challengeId: nanoid.nanoid(),
+        maxFailedAttempts: 0,
+        failedAttempts: 0,
+        componentProps: undefined,
+        serverSessionInformation: undefined,
+        videoAssociatedParams: {
+            videoConstraints: STATIC_VIDEO_CONSTRAINTS,
+            selectableDevices: [],
+        },
+        ovalAssociatedParams: undefined,
+        faceMatchAssociatedParams: {
+            illuminationState: undefined,
+            faceMatchState: undefined,
+            /**
+             * faceMatchPercentage is a starting point we set as a baseline
+             * for what we want our progress bar to visually start at. This correlates
+             * to the formula we use to calculate the faceMatchPercentage
+             * in getFaceMatchStateInLivenessOval
+             */
+            faceMatchPercentage: 25,
+            currentDetectedFace: undefined,
+            startFace: undefined,
+            endFace: undefined,
+            initialFaceMatchTime: undefined,
+        },
+        freshnessColorAssociatedParams: {
+            freshnessColorEl: undefined,
+            freshnessColors: [],
+            freshnessColorsComplete: false,
+            freshnessColorDisplay: undefined,
+        },
+        errorState: undefined,
+        livenessStreamProvider: undefined,
+        responseStreamActorRef: undefined,
+        shouldDisconnect: false,
+        faceMatchStateBeforeStart: undefined,
+        isFaceFarEnoughBeforeRecording: undefined,
+        isRecordingStopped: false,
+    },
+    on: {
+        CANCEL: 'userCancel',
+        TIMEOUT: {
+            target: 'retryableTimeout',
+            actions: 'updateErrorStateForTimeout',
+        },
+        SET_SESSION_INFO: {
+            internal: true,
+            actions: 'updateSessionInfo',
+        },
+        DISCONNECT_EVENT: {
+            internal: true,
+            actions: 'updateShouldDisconnect',
+        },
+        SET_DOM_AND_CAMERA_DETAILS: {
+            actions: 'setDOMAndCameraDetails',
+        },
+        UPDATE_DEVICE_AND_STREAM: {
+            actions: 'updateDeviceAndStream',
+        },
+        SERVER_ERROR: {
+            target: 'error',
+            actions: 'updateErrorStateForServer',
+        },
+        RUNTIME_ERROR: {
+            target: 'error',
+        },
+        MOBILE_LANDSCAPE_WARNING: {
+            target: 'mobileLandscapeWarning',
+            actions: 'updateErrorStateForServer',
+        },
+    },
+    states: {
+        cameraCheck: {
+            entry: ['resetErrorState'],
+            invoke: {
+                src: 'checkVirtualCameraAndGetStream',
+                onDone: {
+                    target: 'waitForDOMAndCameraDetails',
+                    actions: ['updateVideoMediaStream'],
+                },
+                onError: {
+                    target: 'permissionDenied',
+                },
+            },
+        },
+        waitForDOMAndCameraDetails: {
+            after: {
+                0: {
+                    target: 'start',
+                    cond: 'hasDOMAndCameraDetails',
+                },
+                10: { target: 'waitForDOMAndCameraDetails' },
+            },
+        },
+        start: {
+            entry: ['drawStaticOval', 'initializeFaceDetector'],
+            always: [
+                {
+                    target: 'detectFaceBeforeStart',
+                    cond: 'shouldSkipStartScreen',
+                },
+            ],
+            on: {
+                BEGIN: 'detectFaceBeforeStart',
+            },
+        },
+        detectFaceBeforeStart: {
+            invoke: {
+                src: 'detectFace',
+                onDone: {
+                    target: 'checkFaceDetectedBeforeStart',
+                    actions: ['updateFaceMatchBeforeStartDetails'],
+                },
+            },
+        },
+        checkFaceDetectedBeforeStart: {
+            after: {
+                0: {
+                    target: 'detectFaceDistanceBeforeRecording',
+                    cond: 'hasSingleFaceBeforeStart',
+                },
+                100: { target: 'detectFaceBeforeStart' },
+            },
+        },
+        detectFaceDistanceBeforeRecording: {
+            invoke: {
+                src: 'detectFaceDistance',
+                onDone: {
+                    target: 'checkFaceDistanceBeforeRecording',
+                    actions: ['updateFaceDistanceBeforeRecording'],
+                },
+            },
+        },
+        checkFaceDistanceBeforeRecording: {
+            after: {
+                0: {
+                    target: 'initializeLivenessStream',
+                    cond: 'hasEnoughFaceDistanceBeforeRecording',
+                },
+                100: { target: 'detectFaceDistanceBeforeRecording' },
+            },
+        },
+        initializeLivenessStream: {
+            invoke: {
+                src: 'openLivenessStreamConnection',
+                onDone: {
+                    target: 'notRecording',
+                    actions: [
+                        'updateLivenessStreamProvider',
+                        'spawnResponseStreamActor',
+                    ],
+                },
+            },
+        },
+        notRecording: {
+            initial: 'waitForSessionInfo',
+            states: {
+                waitForSessionInfo: {
+                    after: {
+                        0: {
+                            target: '#livenessMachine.recording',
+                            cond: 'hasServerSessionInfo',
+                        },
+                        100: { target: 'waitForSessionInfo' },
+                    },
+                },
+            },
+        },
+        recording: {
+            entry: ['clearErrorState', 'startRecording'],
+            initial: 'ovalDrawing',
+            states: {
+                ovalDrawing: {
+                    entry: ['sendTimeoutAfterOvalDrawingDelay'],
+                    invoke: {
+                        src: 'detectInitialFaceAndDrawOval',
+                        onDone: {
+                            target: 'checkFaceDetected',
+                            actions: [
+                                'updateOvalAndFaceDetailsPostDraw',
+                                'sendTimeoutAfterOvalMatchDelay',
+                            ],
+                        },
+                        onError: {
+                            target: '#livenessMachine.error',
+                            actions: 'updateErrorStateForRuntime',
+                        },
+                    },
+                },
+                checkFaceDetected: {
+                    after: {
+                        0: {
+                            target: 'checkRecordingStarted',
+                            cond: 'hasSingleFace',
+                        },
+                        100: { target: 'ovalDrawing' },
+                    },
+                },
+                checkRecordingStarted: {
+                    after: {
+                        0: {
+                            target: 'ovalMatching',
+                            cond: 'hasRecordingStarted',
+                            actions: ['updateRecordingStartTimestampMs'],
+                        },
+                        100: { target: 'checkRecordingStarted' },
+                    },
+                },
+                ovalMatching: {
+                    entry: ['cancelOvalDrawingTimeout'],
+                    invoke: {
+                        src: 'detectFaceAndMatchOval',
+                        onDone: {
+                            target: 'checkMatch',
+                            actions: 'updateFaceDetailsPostMatch',
+                        },
+                    },
+                },
+                checkMatch: {
+                    after: {
+                        0: {
+                            target: 'flashFreshnessColors',
+                            cond: 'hasFaceMatchedInOvalWithMinTime',
+                            actions: [
+                                'updateEndFaceMatch',
+                                'setupFlashFreshnessColors',
+                                'cancelOvalMatchTimeout',
+                                'cancelOvalDrawingTimeout',
+                            ],
+                        },
+                        0.1: {
+                            target: 'ovalMatching',
+                            cond: 'hasFaceMatchedInOval',
+                            actions: 'setFaceMatchTimeAndStartFace',
+                        },
+                        1: {
+                            target: 'ovalMatching',
+                            cond: 'hasNotFaceMatchedInOval',
+                        },
+                    },
+                },
+                flashFreshnessColors: {
+                    invoke: {
+                        src: 'flashColors',
+                        onDone: [
+                            {
+                                target: 'success',
+                                cond: 'hasFreshnessColorShown',
+                            },
+                            {
+                                target: 'flashFreshnessColors',
+                                actions: 'updateFreshnessDetails',
+                            },
+                        ],
+                    },
+                },
+                success: {
+                    entry: ['stopRecording'],
+                    type: 'final',
+                },
+            },
+            onDone: 'uploading',
+        },
+        uploading: {
+            initial: 'pending',
+            states: {
+                pending: {
+                    entry: ['sendTimeoutAfterWaitingForDisconnect', 'pauseVideoStream'],
+                    invoke: {
+                        src: 'stopVideo',
+                        onDone: 'waitForDisconnectEvent',
+                        onError: {
+                            target: '#livenessMachine.error',
+                            actions: 'updateErrorStateForRuntime',
+                        },
+                    },
+                },
+                waitForDisconnectEvent: {
+                    after: {
+                        0: {
+                            target: 'getLivenessResult',
+                            cond: 'getShouldDisconnect',
+                        },
+                        100: { target: 'waitForDisconnectEvent' },
+                    },
+                },
+                getLivenessResult: {
+                    entry: ['cancelWaitForDisconnectTimeout', 'freezeStream'],
+                    invoke: {
+                        src: 'getLiveness',
+                        onError: {
+                            target: '#livenessMachine.error',
+                            actions: 'updateErrorStateForServer',
+                        },
+                    },
+                },
+            },
+        },
+        retryableTimeout: {
+            entry: 'updateFailedAttempts',
+            always: [
+                {
+                    target: 'timeout',
+                    cond: 'shouldTimeoutOnFailedAttempts',
+                },
+                { target: 'notRecording' },
+            ],
+        },
+        permissionDenied: {
+            entry: 'callUserPermissionDeniedCallback',
+            on: {
+                RETRY_CAMERA_CHECK: 'cameraCheck',
+            },
+        },
+        mobileLandscapeWarning: {
+            entry: 'callMobileLandscapeWarningCallback',
+            always: [{ target: 'error' }],
+        },
+        timeout: {
+            entry: ['cleanUpResources', 'callUserTimeoutCallback', 'freezeStream'],
+        },
+        error: {
+            entry: [
+                'cleanUpResources',
+                'callErrorCallback',
+                'cancelOvalDrawingTimeout',
+                'cancelWaitForDisconnectTimeout',
+                'cancelOvalMatchTimeout',
+                'freezeStream',
+            ],
+        },
+        userCancel: {
+            entry: ['cleanUpResources', 'callUserCancelCallback', 'resetContext'],
+            always: [{ target: 'cameraCheck' }],
+        },
+    },
+}, {
+    actions: {
+        spawnResponseStreamActor: xstate.assign({
+            responseStreamActorRef: () => xstate.spawn(responseStreamActor),
+        }),
+        updateFailedAttempts: xstate.assign({
+            failedAttempts: (context) => {
+                return context.failedAttempts + 1;
+            },
+        }),
+        updateVideoMediaStream: xstate.assign({
+            videoAssociatedParams: (context, event) => ({
+                ...context.videoAssociatedParams,
+                videoMediaStream: event.data?.stream,
+                selectedDeviceId: event.data?.selectedDeviceId,
+                selectableDevices: event.data?.selectableDevices,
+            }),
+        }),
+        initializeFaceDetector: xstate.assign({
+            ovalAssociatedParams: (context) => {
+                const { componentProps } = context;
+                const { faceModelUrl, binaryPath } = componentProps.config;
+                const faceDetector = new BlazeFaceFaceDetection(binaryPath, faceModelUrl);
+                faceDetector.triggerModelLoading();
+                return {
+                    ...context.ovalAssociatedParams,
+                    faceDetector,
+                };
+            },
+        }),
+        updateLivenessStreamProvider: xstate.assign({
+            livenessStreamProvider: (context, event) => {
+                return event.data?.livenessStreamProvider;
+            },
+        }),
+        setDOMAndCameraDetails: xstate.assign({
+            videoAssociatedParams: (context, event) => {
+                return {
+                    ...context.videoAssociatedParams,
+                    videoEl: event.data?.videoEl,
+                    canvasEl: event.data?.canvasEl,
+                    isMobile: event.data?.isMobile,
+                };
+            },
+            freshnessColorAssociatedParams: (context, event) => ({
+                ...context.freshnessColorAssociatedParams,
+                freshnessColorEl: event.data?.freshnessColorEl,
+            }),
+        }),
+        updateDeviceAndStream: xstate.assign({
+            videoAssociatedParams: (context, event) => {
+                setLastSelectedCameraId(event.data?.newDeviceId);
+                return {
+                    ...context.videoAssociatedParams,
+                    selectedDeviceId: event.data?.newDeviceId,
+                    videoMediaStream: event.data?.newStream,
+                };
+            },
+        }),
+        drawStaticOval: (context) => {
+            const { canvasEl, videoEl, videoMediaStream } = context.videoAssociatedParams;
+            drawStaticOval(canvasEl, videoEl, videoMediaStream);
+        },
+        updateRecordingStartTimestampMs: xstate.assign({
+            videoAssociatedParams: (context) => {
+                const { challengeId, videoAssociatedParams, ovalAssociatedParams, livenessStreamProvider, } = context;
+                const { recordingStartApiTimestamp, recorderStartTimestamp } = livenessStreamProvider.videoRecorder;
+                const { videoMediaStream } = videoAssociatedParams;
+                const { initialFace } = ovalAssociatedParams;
+                /**
+                 * This calculation is provided by Science team after doing analysis
+                 * of unreliable .onstart() (recorderStartTimestamp) timestamp that is
+                 * returned from mediaRecorder.
+                 */
+                const timestamp = Math.round(0.73 * (recorderStartTimestamp - recordingStartApiTimestamp) +
+                    recordingStartApiTimestamp);
+                // Send client info for initial face position
+                const { width, height } = videoMediaStream
+                    .getTracks()[0]
+                    .getSettings();
+                const flippedInitialFaceLeft = width - initialFace.left - initialFace.width;
+                context.livenessStreamProvider.sendClientInfo({
+                    Challenge: {
+                        FaceMovementAndLightChallenge: {
+                            ChallengeId: challengeId,
+                            VideoStartTimestamp: timestamp,
+                            InitialFace: {
+                                InitialFaceDetectedTimestamp: initialFace.timestampMs,
+                                BoundingBox: getBoundingBox({
+                                    deviceHeight: height,
+                                    deviceWidth: width,
+                                    height: initialFace.height,
+                                    width: initialFace.width,
+                                    top: initialFace.top,
+                                    left: flippedInitialFaceLeft,
+                                }),
+                            },
+                        },
+                    },
+                });
+                return {
+                    ...context.videoAssociatedParams,
+                    recordingStartTimestampMs: timestamp,
+                };
+            },
+        }),
+        startRecording: xstate.assign({
+            videoAssociatedParams: (context) => {
+                if (!context.serverSessionInformation) {
+                    throw new Error('Session information was not received from response stream');
+                }
+                if (context.livenessStreamProvider.videoRecorder &&
+                    context.livenessStreamProvider.videoRecorder.getState() !==
+                        'recording') {
+                    context.livenessStreamProvider.startRecordingLivenessVideo();
+                }
+                return {
+                    ...context.videoAssociatedParams,
+                };
+            },
+        }),
+        stopRecording: (context) => { },
+        updateFaceMatchBeforeStartDetails: xstate.assign({
+            faceMatchStateBeforeStart: (_, event) => {
+                return event.data.faceMatchState;
+            },
+        }),
+        updateFaceDistanceBeforeRecording: xstate.assign({
+            isFaceFarEnoughBeforeRecording: (_, event) => {
+                return event.data.isFaceFarEnoughBeforeRecording;
+            },
+        }),
+        updateFaceDistanceWhileLoading: xstate.assign({
+            isFaceFarEnoughBeforeRecording: (_, event) => {
+                return event.data.isFaceFarEnoughBeforeRecording;
+            },
+            errorState: (_, event) => {
+                return event.data?.error;
+            },
+        }),
+        updateOvalAndFaceDetailsPostDraw: xstate.assign({
+            ovalAssociatedParams: (context, event) => ({
+                ...context.ovalAssociatedParams,
+                initialFace: event.data.initialFace,
+                ovalDetails: event.data.ovalDetails,
+                scaleFactor: event.data.scaleFactor,
+            }),
+            faceMatchAssociatedParams: (context, event) => ({
+                ...context.faceMatchAssociatedParams,
+                faceMatchState: event.data.faceMatchState,
+                illuminationState: event.data.illuminationState,
+            }),
+        }),
+        updateFaceDetailsPostMatch: xstate.assign({
+            faceMatchAssociatedParams: (context, event) => ({
+                ...context.faceMatchAssociatedParams,
+                faceMatchState: event.data.faceMatchState,
+                faceMatchPercentage: event.data.faceMatchPercentage,
+                illuminationState: event.data.illuminationState,
+                currentDetectedFace: event.data.detectedFace,
+            }),
+        }),
+        updateEndFaceMatch: xstate.assign({
+            faceMatchAssociatedParams: (context) => ({
+                ...context.faceMatchAssociatedParams,
+                endFace: context.faceMatchAssociatedParams.currentDetectedFace,
+            }),
+        }),
+        setFaceMatchTimeAndStartFace: xstate.assign({
+            faceMatchAssociatedParams: (context) => {
+                return {
+                    ...context.faceMatchAssociatedParams,
+                    startFace: context.faceMatchAssociatedParams.startFace === undefined
+                        ? context.faceMatchAssociatedParams.currentDetectedFace
+                        : context.faceMatchAssociatedParams.startFace,
+                    initialFaceMatchTime: context.faceMatchAssociatedParams.initialFaceMatchTime ===
+                        undefined
+                        ? Date.now()
+                        : context.faceMatchAssociatedParams.initialFaceMatchTime,
+                };
+            },
+        }),
+        resetErrorState: xstate.assign({
+            errorState: (_) => undefined,
+        }),
+        updateErrorStateForTimeout: xstate.assign({
+            errorState: (_, event) => {
+                return event.data?.errorState || LivenessErrorState.TIMEOUT;
+            },
+        }),
+        updateErrorStateForRuntime: xstate.assign({
+            errorState: (_, event) => {
+                return event.data?.errorState || LivenessErrorState.RUNTIME_ERROR;
+            },
+        }),
+        updateErrorStateForServer: xstate.assign({
+            errorState: (_) => LivenessErrorState.SERVER_ERROR,
+        }),
+        clearErrorState: xstate.assign({
+            errorState: (_) => undefined,
+        }),
+        updateSessionInfo: xstate.assign({
+            serverSessionInformation: (context, event) => {
+                return event.data.sessionInfo;
+            },
+        }),
+        updateShouldDisconnect: xstate.assign({
+            shouldDisconnect: (context) => {
+                return true;
+            },
+        }),
+        updateFreshnessDetails: xstate.assign({
+            freshnessColorAssociatedParams: (context, event) => {
+                return {
+                    ...context.freshnessColorAssociatedParams,
+                    freshnessColorsComplete: event.data.freshnessColorsComplete,
+                };
+            },
+        }),
+        setupFlashFreshnessColors: xstate.assign({
+            freshnessColorAssociatedParams: (context) => {
+                const { serverSessionInformation } = context;
+                const freshnessColors = getColorsSequencesFromSessionInformation(serverSessionInformation);
+                const freshnessColorDisplay = new FreshnessColorDisplay(context, freshnessColors);
+                return {
+                    ...context.freshnessColorAssociatedParams,
+                    freshnessColorDisplay,
+                };
+            },
+        }),
+        // timeouts
+        sendTimeoutAfterOvalDrawingDelay: xstate.actions.send({ type: 'TIMEOUT' }, {
+            delay: 5000,
+            id: 'ovalDrawingTimeout',
+        }),
+        cancelOvalDrawingTimeout: xstate.actions.cancel('ovalDrawingTimeout'),
+        sendTimeoutAfterOvalMatchDelay: xstate.actions.send({ type: 'TIMEOUT' }, {
+            delay: (context) => {
+                return (context.serverSessionInformation?.Challenge
+                    ?.FaceMovementAndLightChallenge?.ChallengeConfig
+                    ?.OvalFitTimeout || DEFAULT_FACE_FIT_TIMEOUT);
+            },
+            id: 'ovalMatchTimeout',
+        }),
+        cancelOvalMatchTimeout: xstate.actions.cancel('ovalMatchTimeout'),
+        sendTimeoutAfterWaitingForDisconnect: xstate.actions.send({
+            type: 'TIMEOUT',
+            data: { errorState: LivenessErrorState.SERVER_ERROR },
+        }, {
+            delay: 20000,
+            id: 'waitForDisconnectTimeout',
+        }),
+        cancelWaitForDisconnectTimeout: xstate.actions.cancel('waitForDisconnectTimeout'),
+        sendTimeoutAfterFaceDistanceDelay: xstate.actions.send({
+            type: 'RUNTIME_ERROR',
+            data: new Error('Avoid moving closer during countdown and ensure only one face is in front of camera.'),
+        }, {
+            delay: 0,
+            id: 'faceDistanceTimeout',
+        }),
+        cancelFaceDistanceTimeout: xstate.actions.cancel('faceDistanceTimeout'),
+        // callbacks
+        callUserPermissionDeniedCallback: xstate.assign({
+            errorState: (context, event) => {
+                let errorState;
+                if (event.data.message.includes('15 fps')) {
+                    errorState = LivenessErrorState.CAMERA_FRAMERATE_ERROR;
+                }
+                else {
+                    errorState = LivenessErrorState.CAMERA_ACCESS_ERROR;
+                }
+                const errorMessage = event.data.message || event.data.Message;
+                const error = new Error(errorMessage);
+                const livenessError = {
+                    state: errorState,
+                    error: error,
+                };
+                context.componentProps.onError?.(livenessError);
+                return errorState;
+            },
+        }),
+        callMobileLandscapeWarningCallback: xstate.assign({
+            errorState: (context) => {
+                return LivenessErrorState.MOBILE_LANDSCAPE_ERROR;
+            },
+        }),
+        callUserCancelCallback: async (context) => {
+            context.componentProps.onUserCancel?.();
+        },
+        callUserTimeoutCallback: async (context) => {
+            const error = new Error('Client Timeout');
+            error.name = context.errorState;
+            const livenessError = {
+                state: context.errorState,
+                error: error,
+            };
+            context.componentProps.onError?.(livenessError);
+        },
+        callErrorCallback: async (context, event) => {
+            const livenessError = {
+                state: context.errorState,
+                error: event.data?.error || event.data,
+            };
+            context.componentProps.onError?.(livenessError);
+        },
+        cleanUpResources: async (context) => {
+            const { freshnessColorEl } = context.freshnessColorAssociatedParams;
+            if (freshnessColorEl) {
+                freshnessColorEl.style.display = 'none';
+            }
+            let closureCode = WS_CLOSURE_CODE.DEFAULT_ERROR_CODE;
+            if (context.errorState === LivenessErrorState.TIMEOUT) {
+                closureCode = WS_CLOSURE_CODE.FACE_FIT_TIMEOUT;
+            }
+            else if (context.errorState === LivenessErrorState.RUNTIME_ERROR) {
+                closureCode = WS_CLOSURE_CODE.RUNTIME_ERROR;
+            }
+            else if (context.errorState === LivenessErrorState.FACE_DISTANCE_ERROR ||
+                context.errorState === LivenessErrorState.MULTIPLE_FACES_ERROR) {
+                closureCode = WS_CLOSURE_CODE.USER_ERROR_DURING_CONNECTION;
+            }
+            else if (context.errorState === undefined) {
+                closureCode = WS_CLOSURE_CODE.USER_CANCEL;
+            }
+            await context.livenessStreamProvider?.endStreamWithCode(closureCode);
+        },
+        freezeStream: async (context) => {
+            const { videoMediaStream, videoEl } = context.videoAssociatedParams;
+            context.isRecordingStopped = true;
+            videoEl?.pause();
+            videoMediaStream?.getTracks().forEach(function (track) {
+                track.stop();
+            });
+        },
+        pauseVideoStream: async (context) => {
+            const { videoEl } = context.videoAssociatedParams;
+            context.isRecordingStopped = true;
+            videoEl.pause();
+        },
+        resetContext: xstate.assign({
+            challengeId: nanoid.nanoid(),
+            maxFailedAttempts: 0,
+            failedAttempts: 0,
+            componentProps: (context) => context.componentProps,
+            serverSessionInformation: (_) => undefined,
+            videoAssociatedParams: (_) => {
+                return {
+                    videoConstraints: STATIC_VIDEO_CONSTRAINTS,
+                };
+            },
+            ovalAssociatedParams: (_) => undefined,
+            errorState: (_) => undefined,
+            livenessStreamProvider: (_) => undefined,
+            responseStreamActorRef: (_) => undefined,
+            shouldDisconnect: false,
+            faceMatchStateBeforeStart: (_) => undefined,
+            isFaceFarEnoughBeforeRecording: (_) => undefined,
+            isRecordingStopped: false,
+        }),
+    },
+    guards: {
+        shouldTimeoutOnFailedAttempts: (context) => context.failedAttempts >= context.maxFailedAttempts,
+        hasFaceMatchedInOvalWithMinTime: (context) => {
+            const { faceMatchState, initialFaceMatchTime } = context.faceMatchAssociatedParams;
+            const timeSinceInitialFaceMatch = Date.now() - initialFaceMatchTime;
+            const hasMatched = faceMatchState === FaceMatchState.MATCHED &&
+                timeSinceInitialFaceMatch >= MIN_FACE_MATCH_TIME;
+            return hasMatched;
+        },
+        hasFaceMatchedInOval: (context) => {
+            return (context.faceMatchAssociatedParams.faceMatchState ===
+                FaceMatchState.MATCHED);
+        },
+        hasNotFaceMatchedInOval: (context) => {
+            return (context.faceMatchAssociatedParams.faceMatchState !==
+                FaceMatchState.MATCHED);
+        },
+        hasSingleFace: (context) => {
+            return (context.faceMatchAssociatedParams.faceMatchState ===
+                FaceMatchState.FACE_IDENTIFIED);
+        },
+        hasSingleFaceBeforeStart: (context) => {
+            return (context.faceMatchStateBeforeStart === FaceMatchState.FACE_IDENTIFIED);
+        },
+        hasEnoughFaceDistanceBeforeRecording: (context) => {
+            return context.isFaceFarEnoughBeforeRecording;
+        },
+        hasNotEnoughFaceDistanceBeforeRecording: (context) => {
+            return !context.isFaceFarEnoughBeforeRecording;
+        },
+        hasLivenessCheckSucceeded: (_, __, meta) => meta.state.event.data.isLive,
+        hasFreshnessColorShown: (context) => context.freshnessColorAssociatedParams.freshnessColorsComplete,
+        hasServerSessionInfo: (context) => {
+            return context.serverSessionInformation !== undefined;
+        },
+        hasDOMAndCameraDetails: (context) => {
+            return (context.videoAssociatedParams.videoEl !== undefined &&
+                context.videoAssociatedParams.canvasEl !== undefined &&
+                context.freshnessColorAssociatedParams.freshnessColorEl !== undefined);
+        },
+        getShouldDisconnect: (context) => {
+            return !!context.shouldDisconnect;
+        },
+        hasRecordingStarted: (context) => {
+            return (context.livenessStreamProvider.videoRecorder.firstChunkTimestamp !==
+                undefined);
+        },
+        shouldSkipStartScreen: (context) => {
+            return !!context.componentProps?.disableStartScreen;
+        },
+    },
+    services: {
+        async checkVirtualCameraAndGetStream(context) {
+            const { videoConstraints } = context.videoAssociatedParams;
+            // Get initial stream to enumerate devices with non-empty labels
+            const existingDeviceId = getLastSelectedCameraId();
+            const initialStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    ...videoConstraints,
+                    ...(existingDeviceId ? { deviceId: existingDeviceId } : {}),
+                },
+                audio: false,
+            });
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const realVideoDevices = devices
+                .filter((device) => device.kind === 'videoinput')
+                .filter((device) => !isCameraDeviceVirtual(device));
+            if (!realVideoDevices.length) {
+                throw new Error('No real video devices found');
+            }
+            // Ensure that at least one of the cameras is capable of at least 15 fps
+            const tracksWithMoreThan15Fps = initialStream
+                .getTracks()
+                .filter((track) => {
+                const settings = track.getSettings();
+                return settings.frameRate >= 15;
+            });
+            if (tracksWithMoreThan15Fps.length < 1) {
+                throw new Error('No camera found with more than 15 fps');
+            }
+            // If the initial stream is of real camera, use it otherwise use the first real camera
+            const initialStreamDeviceId = tracksWithMoreThan15Fps[0].getSettings().deviceId;
+            const isInitialStreamFromRealDevice = realVideoDevices.some((device) => device.deviceId === initialStreamDeviceId);
+            let deviceId = initialStreamDeviceId;
+            let realVideoDeviceStream = initialStream;
+            if (!isInitialStreamFromRealDevice) {
+                deviceId = realVideoDevices[0].deviceId;
+                realVideoDeviceStream = await navigator.mediaDevices.getUserMedia({
+                    video: {
+                        ...videoConstraints,
+                        deviceId: { exact: realVideoDevices[0].deviceId },
+                    },
+                    audio: false,
+                });
+            }
+            setLastSelectedCameraId(deviceId);
+            return {
+                stream: realVideoDeviceStream,
+                selectedDeviceId: initialStreamDeviceId,
+                selectableDevices: realVideoDevices,
+            };
+        },
+        async openLivenessStreamConnection(context) {
+            const { config } = context.componentProps;
+            const { credentialProvider, endpointOverride } = config;
+            const livenessStreamProvider = new LivenessStreamProvider({
+                sessionId: context.componentProps.sessionId,
+                region: context.componentProps.region,
+                stream: context.videoAssociatedParams.videoMediaStream,
+                videoEl: context.videoAssociatedParams.videoEl,
+                credentialProvider: credentialProvider,
+                endpointOverride: endpointOverride,
+            });
+            responseStream = livenessStreamProvider.getResponseStream();
+            return { livenessStreamProvider };
+        },
+        async detectFace(context) {
+            const { videoEl } = context.videoAssociatedParams;
+            const { faceDetector } = context.ovalAssociatedParams;
+            // initialize models
+            try {
+                await faceDetector.modelLoadingPromise;
+            }
+            catch (err) {
+                console.log({ err });
+            }
+            // detect face
+            const faceMatchState = await getFaceMatchState(faceDetector, videoEl);
+            return { faceMatchState };
+        },
+        async detectFaceDistance(context) {
+            const { isFaceFarEnoughBeforeRecording: faceDistanceCheckBeforeRecording, } = context;
+            const { videoEl, videoMediaStream, isMobile } = context.videoAssociatedParams;
+            const { faceDetector } = context.ovalAssociatedParams;
+            const { width, height } = videoMediaStream
+                .getTracks()[0]
+                .getSettings();
+            const ovalDetails = getStaticLivenessOvalDetails({
+                width: width,
+                height: height,
+            });
+            const { isDistanceBelowThreshold: isFaceFarEnoughBeforeRecording } = await isFaceDistanceBelowThreshold({
+                faceDetector: faceDetector,
+                videoEl: videoEl,
+                ovalDetails,
+                reduceThreshold: faceDistanceCheckBeforeRecording,
+                isMobile,
+            });
+            return { isFaceFarEnoughBeforeRecording };
+        },
+        async detectFaceDistanceWhileLoading(context) {
+            const { isFaceFarEnoughBeforeRecording: faceDistanceCheckBeforeRecording, } = context;
+            const { videoEl, videoMediaStream, isMobile } = context.videoAssociatedParams;
+            const { faceDetector } = context.ovalAssociatedParams;
+            const { width, height } = videoMediaStream
+                .getTracks()[0]
+                .getSettings();
+            const ovalDetails = getStaticLivenessOvalDetails({
+                width: width,
+                height: height,
+            });
+            const { isDistanceBelowThreshold: isFaceFarEnoughBeforeRecording, error, } = await isFaceDistanceBelowThreshold({
+                faceDetector: faceDetector,
+                videoEl: videoEl,
+                ovalDetails,
+                reduceThreshold: faceDistanceCheckBeforeRecording,
+                isMobile,
+            });
+            return { isFaceFarEnoughBeforeRecording, error };
+        },
+        async detectInitialFaceAndDrawOval(context) {
+            const { serverSessionInformation, livenessStreamProvider } = context;
+            const { videoEl, canvasEl, isMobile } = context.videoAssociatedParams;
+            const { faceDetector } = context.ovalAssociatedParams;
+            // initialize models
+            try {
+                await faceDetector.modelLoadingPromise;
+                await livenessStreamProvider.videoRecorder.recorderStarted;
+            }
+            catch (err) {
+                console.log({ err });
+            }
+            // detect face
+            const detectedFaces = await faceDetector.detectFaces(videoEl);
+            let initialFace;
+            let faceMatchState;
+            let illuminationState;
+            switch (detectedFaces.length) {
+                case 0: {
+                    // no face detected;
+                    faceMatchState = FaceMatchState.CANT_IDENTIFY;
+                    illuminationState = estimateIllumination(videoEl);
+                    break;
+                }
+                case 1: {
+                    faceMatchState = FaceMatchState.FACE_IDENTIFIED;
+                    initialFace = detectedFaces[0];
+                    break;
+                }
+                default: {
+                    //more than one face detected ;
+                    faceMatchState = FaceMatchState.TOO_MANY;
+                    break;
+                }
+            }
+            if (!initialFace) {
+                return { faceMatchState, illuminationState };
+            }
+            // Get width/height of video element so we can compute scaleFactor
+            // and set canvas width/height.
+            const { width: videoScaledWidth, height: videoScaledHeight } = videoEl.getBoundingClientRect();
+            if (isMobile) {
+                canvasEl.width = window.innerWidth;
+                canvasEl.height = window.innerHeight;
+            }
+            else {
+                canvasEl.width = videoScaledWidth;
+                canvasEl.height = videoScaledHeight;
+            }
+            // Compute scaleFactor which is how much our video element is scaled
+            // vs the intrinsic video resolution
+            const scaleFactor = videoScaledWidth / videoEl.videoWidth;
+            // generate oval details from initialFace and video dimensions
+            const ovalDetails = getOvalDetailsFromSessionInformation({
+                sessionInformation: serverSessionInformation,
+                videoWidth: videoEl.width,
+            });
+            // renormalize initial face
+            const renormalizedFace = generateBboxFromLandmarks(initialFace, ovalDetails);
+            initialFace.top = renormalizedFace.top;
+            initialFace.left = renormalizedFace.left;
+            initialFace.height = renormalizedFace.bottom - renormalizedFace.top;
+            initialFace.width = renormalizedFace.right - renormalizedFace.left;
+            // Draw oval in canvas using ovalDetails and scaleFactor
+            drawLivenessOvalInCanvas({
+                canvas: canvasEl,
+                oval: ovalDetails,
+                scaleFactor,
+                videoEl: videoEl,
+            });
+            return {
+                faceMatchState,
+                ovalDetails,
+                scaleFactor,
+                initialFace,
+            };
+        },
+        async detectFaceAndMatchOval(context) {
+            const { serverSessionInformation } = context;
+            const { videoEl } = context.videoAssociatedParams;
+            const { faceDetector, ovalDetails, initialFace } = context.ovalAssociatedParams;
+            // detect face
+            const detectedFaces = await faceDetector.detectFaces(videoEl);
+            let faceMatchState;
+            let faceMatchPercentage = 0;
+            let detectedFace;
+            let illuminationState;
+            const initialFaceBoundingBox = generateBboxFromLandmarks(initialFace, ovalDetails);
+            const { ovalBoundingBox } = getOvalBoundingBox(ovalDetails);
+            const initialFaceIntersection = getIntersectionOverUnion(initialFaceBoundingBox, ovalBoundingBox);
+            switch (detectedFaces.length) {
+                case 0: {
+                    //no face detected;
+                    faceMatchState = FaceMatchState.CANT_IDENTIFY;
+                    illuminationState = estimateIllumination(videoEl);
+                    break;
+                }
+                case 1: {
+                    //exactly one face detected, match face with oval;
+                    detectedFace = detectedFaces[0];
+                    const { faceMatchState: faceMatchStateInLivenessOval, faceMatchPercentage: faceMatchPercentageInLivenessOval, } = getFaceMatchStateInLivenessOval(detectedFace, ovalDetails, initialFaceIntersection, serverSessionInformation);
+                    faceMatchState = faceMatchStateInLivenessOval;
+                    faceMatchPercentage = faceMatchPercentageInLivenessOval;
+                    break;
+                }
+                default: {
+                    //more than one face detected ;
+                    faceMatchState = FaceMatchState.TOO_MANY;
+                    break;
+                }
+            }
+            return {
+                faceMatchState,
+                faceMatchPercentage,
+                illuminationState,
+                detectedFace,
+            };
+        },
+        async flashColors(context) {
+            const { freshnessColorsComplete, freshnessColorDisplay } = context.freshnessColorAssociatedParams;
+            if (freshnessColorsComplete) {
+                return;
+            }
+            const completed = await freshnessColorDisplay.displayColorTick();
+            return { freshnessColorsComplete: completed };
+        },
+        async stopVideo(context) {
+            const { challengeId, livenessStreamProvider } = context;
+            const { videoMediaStream } = context.videoAssociatedParams;
+            const { initialFace, ovalDetails } = context.ovalAssociatedParams;
+            const { startFace, endFace } = context.faceMatchAssociatedParams;
+            const { width, height } = videoMediaStream
+                .getTracks()[0]
+                .getSettings();
+            const flippedInitialFaceLeft = width - initialFace.left - initialFace.width;
+            await livenessStreamProvider.stopVideo();
+            const livenessActionDocument = {
+                Challenge: {
+                    FaceMovementAndLightChallenge: {
+                        ChallengeId: challengeId,
+                        InitialFace: {
+                            InitialFaceDetectedTimestamp: initialFace.timestampMs,
+                            BoundingBox: getBoundingBox({
+                                deviceHeight: height,
+                                deviceWidth: width,
+                                height: initialFace.height,
+                                width: initialFace.width,
+                                top: initialFace.top,
+                                left: flippedInitialFaceLeft,
+                            }),
+                        },
+                        TargetFace: {
+                            FaceDetectedInTargetPositionStartTimestamp: startFace.timestampMs,
+                            FaceDetectedInTargetPositionEndTimestamp: endFace.timestampMs,
+                            BoundingBox: getBoundingBox({
+                                deviceHeight: height,
+                                deviceWidth: width,
+                                height: ovalDetails.height,
+                                width: ovalDetails.width,
+                                top: ovalDetails.centerY - ovalDetails.height / 2,
+                                left: ovalDetails.centerX - ovalDetails.width / 2,
+                            }),
+                        },
+                        VideoEndTimestamp: livenessStreamProvider.videoRecorder.recorderEndTimestamp,
+                    },
+                },
+            };
+            if (livenessStreamProvider.videoRecorder.getVideoChunkSize() === 0) {
+                throw new Error('Video chunks not recorded successfully.');
+            }
+            livenessStreamProvider.sendClientInfo(livenessActionDocument);
+            await livenessStreamProvider.dispatchStopVideoEvent();
+        },
+        async getLiveness(context) {
+            const { onAnalysisComplete } = context.componentProps;
+            // Get liveness result
+            await onAnalysisComplete();
+        },
+    },
+});
+const responseStreamActor = async (callback) => {
+    try {
+        const stream = await responseStream;
+        for await (const event of stream) {
+            if (isServerSesssionInformationEvent(event)) {
+                callback({
+                    type: 'SET_SESSION_INFO',
+                    data: {
+                        sessionInfo: event.ServerSessionInformationEvent.SessionInformation,
+                    },
+                });
+            }
+            else if (isDisconnectionEvent(event)) {
+                callback({ type: 'DISCONNECT_EVENT' });
+            }
+            else if (isValidationExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.ValidationException } },
+                });
+            }
+            else if (isInternalServerExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.InternalServerException } },
+                });
+            }
+            else if (isThrottlingExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.ThrottlingException } },
+                });
+            }
+            else if (isServiceQuotaExceededExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.ServiceQuotaExceededException } },
+                });
+            }
+        }
+    }
+    catch (error) {
+        let returnedError = error;
+        if (isInvalidSignatureRegionException(error)) {
+            returnedError = new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.');
+        }
+        if (returnedError instanceof Error) {
+            callback({
+                type: 'SERVER_ERROR',
+                data: { error: returnedError },
+            });
+        }
+    }
+};
+
+const FaceLivenessDetectorContext = React__default["default"].createContext(null);
+function FaceLivenessDetectorProvider({ children, ...props }) {
+    return (React__default["default"].createElement(FaceLivenessDetectorContext.Provider, { value: props }, children));
+}
+function useFaceLivenessDetector() {
+    const props = React__default["default"].useContext(FaceLivenessDetectorContext);
+    if (props === null) {
+        throw new Error('useFaceLivenessDetector must be used within a FaceLivenessDetectorProvider');
+    }
+    return props;
+}
+
+// TODO: Add type annotations. Currently typing the actors returned from Xstate is difficult
+// because the interpreter and state can not be used to form a type.
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function useLivenessActor() {
+    const { service } = useFaceLivenessDetector();
+    const actor = react.useActor(service);
+    return actor;
+}
+
+function createLivenessSelector(selector) {
+    return selector;
+}
+function useLivenessSelector(selector) {
+    const { service } = useFaceLivenessDetector();
+    return react.useSelector(service, selector);
+}
+
+function useMediaStreamInVideo(stream) {
+    const height = STATIC_VIDEO_CONSTRAINTS.height.ideal;
+    const width = STATIC_VIDEO_CONSTRAINTS.width.ideal;
+    const videoRef = React.useRef(null);
+    const [videoHeight, setVideoHeight] = React.useState(height);
+    const [videoWidth, setVideoWidth] = React.useState(width);
+    React.useEffect(() => {
+        if (stream) {
+            if (ui.isObject(videoRef.current)) {
+                videoRef.current.srcObject = stream;
+            }
+            const { height: streamHeight, width: streamWidth } = stream
+                .getTracks()[0]
+                .getSettings();
+            setVideoHeight(streamHeight);
+            setVideoWidth(streamWidth);
+        }
+        return () => {
+            if (stream) {
+                stream.getTracks().forEach((track) => {
+                    stream.removeTrack(track);
+                    track.stop();
+                });
+            }
+        };
+    }, [stream]);
+    return {
+        videoRef,
+        videoHeight,
+        videoWidth,
+    };
+}
+
+var LivenessClassNames;
+(function (LivenessClassNames) {
+    LivenessClassNames["CameraModule"] = "amplify-liveness-camera-module";
+    LivenessClassNames["CancelContainer"] = "amplify-liveness-cancel-container";
+    LivenessClassNames["CancelButton"] = "amplify-liveness-cancel-button";
+    LivenessClassNames["CountdownContainer"] = "amplify-liveness-countdown-container";
+    LivenessClassNames["DescriptionBullet"] = "amplify-liveness-description-bullet";
+    LivenessClassNames["DescriptionBulletIndex"] = "amplify-liveness-description-bullet__index";
+    LivenessClassNames["DescriptionBulletIndexText"] = "amplify-liveness-description-bullet__index__text";
+    LivenessClassNames["DescriptionBulletMessage"] = "amplify-liveness-description-bullet__message";
+    LivenessClassNames["ErrorModal"] = "amplify-liveness-error-modal";
+    LivenessClassNames["ErrorModalHeading"] = "amplify-liveness-error-modal__heading";
+    LivenessClassNames["FadeOut"] = "amplify-liveness-fade-out";
+    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";
+    LivenessClassNames["LandscapeErrorModalButton"] = "amplify-liveness-landscape-error-modal__button";
+    LivenessClassNames["LandscapeErrorModalHeader"] = "amplify-liveness-landscape-error-modal__header";
+    LivenessClassNames["Loader"] = "amplify-liveness-loader";
+    LivenessClassNames["MatchIndicator"] = "amplify-liveness-match-indicator";
+    LivenessClassNames["OvalCanvas"] = "amplify-liveness-oval-canvas";
+    LivenessClassNames["OpaqueOverlay"] = "amplify-liveness-overlay-opaque";
+    LivenessClassNames["Overlay"] = "amplify-liveness-overlay";
+    LivenessClassNames["Popover"] = "amplify-liveness-popover";
+    LivenessClassNames["PopoverContainer"] = "amplify-liveness-popover__container";
+    LivenessClassNames["PopoverAnchor"] = "amplify-liveness-popover__anchor";
+    LivenessClassNames["PopoverAnchorSecondary"] = "amplify-liveness-popover__anchor-secondary";
+    LivenessClassNames["RecordingIconContainer"] = "amplify-liveness-recording-icon-container";
+    LivenessClassNames["RecordingIcon"] = "amplify-liveness-recording-icon";
+    LivenessClassNames["StartScreenCameraSelect"] = "amplify-liveness-start-screen-camera-select";
+    LivenessClassNames["StartScreenCameraSelectContainer"] = "amplify-liveness-start-screen-camera-select__container";
+    LivenessClassNames["StartScreenCameraWaiting"] = "amplify-liveness-start-screen-camera-waiting";
+    LivenessClassNames["StartScreenHeader"] = "amplify-liveness-start-screen-header";
+    LivenessClassNames["StartScreenHeaderBody"] = "amplify-liveness-start-screen-header__body";
+    LivenessClassNames["StartScreenHeaderHeading"] = "amplify-liveness-start-screen-header__heading";
+    LivenessClassNames["StartScreenWarning"] = "amplify-liveness-start-screen-warning";
+    LivenessClassNames["StartScreenInstructions"] = "amplify-liveness-start-screen-instructions";
+    LivenessClassNames["StartScreenInstructionsHeading"] = "amplify-liveness-start-screen-instructions__heading";
+    LivenessClassNames["Toast"] = "amplify-liveness-toast";
+    LivenessClassNames["ToastContainer"] = "amplify-liveness-toast__container";
+    LivenessClassNames["ToastMessage"] = "amplify-liveness-toast__message";
+    LivenessClassNames["Video"] = "amplify-liveness-video";
+    LivenessClassNames["VideoAnchor"] = "amplify-liveness-video-anchor";
+})(LivenessClassNames || (LivenessClassNames = {}));
+
+const CancelButton = ({ ariaLabel }) => {
+    const [state, send] = useLivenessActor();
+    const isFinalState = state.done;
+    const handleClick = () => {
+        send({
+            type: 'CANCEL',
+        });
+    };
+    if (isFinalState)
+        return null;
+    return (React__default["default"].createElement(uiReact.Button, { autoFocus: true, variation: "link", onClick: handleClick, size: "large", className: LivenessClassNames.CancelButton, "aria-label": ariaLabel },
+        React__default["default"].createElement(internal.IconClose, { "aria-hidden": "true", "data-testid": "close-icon" })));
+};
+
+const Toast = ({ variation = 'default', size = 'medium', children, isInitial = false, ...rest }) => {
+    const { tokens } = uiReact.useTheme();
+    return (React__namespace.createElement(uiReact.View, { className: `${LivenessClassNames.Toast} ${LivenessClassNames.Toast}--${variation} ${LivenessClassNames.Toast}--${size}`, ...(isInitial && { backgroundColor: tokens.colors.background.primary }), ...rest },
+        React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.ToastContainer },
+            React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.ToastMessage, ...(isInitial ? { color: tokens.colors.font.primary } : {}) }, children))));
+};
+
+const selectErrorState = createLivenessSelector((state) => state.context.errorState);
+const selectFaceMatchState$1 = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.faceMatchState);
+const selectIlluminationState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams.illuminationState);
+const selectIsFaceFarEnoughBeforeRecording = createLivenessSelector((state) => state.context.isFaceFarEnoughBeforeRecording);
+const selectFaceMatchStateBeforeStart = createLivenessSelector((state) => state.context.faceMatchStateBeforeStart);
+const Hint = ({ hintDisplayText }) => {
+    const [state] = useLivenessActor();
+    // NOTE: Do not change order of these selectors as the unit tests depend on this order
+    const errorState = useLivenessSelector(selectErrorState);
+    const faceMatchState = useLivenessSelector(selectFaceMatchState$1);
+    const illuminationState = useLivenessSelector(selectIlluminationState);
+    const faceMatchStateBeforeStart = useLivenessSelector(selectFaceMatchStateBeforeStart);
+    const isFaceFarEnoughBeforeRecordingState = useLivenessSelector(selectIsFaceFarEnoughBeforeRecording);
+    const isCheckFaceDetectedBeforeStart = state.matches('checkFaceDetectedBeforeStart');
+    const isCheckFaceDistanceBeforeRecording = state.matches('checkFaceDistanceBeforeRecording');
+    const isStartView = state.matches('start') || state.matches('userCancel');
+    const isRecording = state.matches('recording');
+    const isNotRecording = state.matches('notRecording');
+    const isUploading = state.matches('uploading');
+    const isCheckSuccessful = state.matches('checkSucceeded');
+    const isCheckFailed = state.matches('checkFailed');
+    const isFlashingFreshness = state.matches({
+        recording: 'flashFreshnessColors',
+    });
+    const FaceMatchStateStringMap = {
+        [FaceMatchState.CANT_IDENTIFY]: hintDisplayText.hintCanNotIdentifyText,
+        [FaceMatchState.FACE_IDENTIFIED]: hintDisplayText.hintTooFarText,
+        [FaceMatchState.TOO_MANY]: hintDisplayText.hintTooManyFacesText,
+        [FaceMatchState.TOO_CLOSE]: hintDisplayText.hintTooCloseText,
+        [FaceMatchState.TOO_FAR]: hintDisplayText.hintTooFarText,
+        [FaceMatchState.MATCHED]: hintDisplayText.hintHoldFaceForFreshnessText,
+    };
+    const IlluminationStateStringMap = {
+        [IlluminationState.BRIGHT]: hintDisplayText.hintIlluminationTooBrightText,
+        [IlluminationState.DARK]: hintDisplayText.hintIlluminationTooDarkText,
+        [IlluminationState.NORMAL]: hintDisplayText.hintIlluminationNormalText,
+    };
+    const getInstructionContent = () => {
+        if (isStartView) {
+            return (React__namespace.createElement(Toast, { size: "large", variation: "primary", isInitial: true }, hintDisplayText.hintCenterFaceText));
+        }
+        if (errorState ?? (isCheckFailed || isCheckSuccessful)) {
+            return;
+        }
+        if (!isRecording) {
+            if (isCheckFaceDetectedBeforeStart) {
+                if (faceMatchStateBeforeStart === FaceMatchState.TOO_MANY) {
+                    return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, FaceMatchStateStringMap[faceMatchStateBeforeStart]));
+                }
+                return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintMoveFaceFrontOfCameraText));
+            }
+            // Specifically checking for false here because initially the value is undefined and we do not want to show the instruction
+            if (isCheckFaceDistanceBeforeRecording &&
+                isFaceFarEnoughBeforeRecordingState === false) {
+                return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintTooCloseText));
+            }
+            if (isNotRecording) {
+                return (React__namespace.createElement(Toast, null,
+                    React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.HintText },
+                        React__namespace.createElement(uiReact.Loader, null),
+                        React__namespace.createElement(uiReact.View, null, hintDisplayText.hintConnectingText))));
+            }
+            if (isUploading) {
+                return (React__namespace.createElement(Toast, null,
+                    React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.HintText },
+                        React__namespace.createElement(uiReact.Loader, null),
+                        React__namespace.createElement(uiReact.View, null, hintDisplayText.hintVerifyingText))));
+            }
+            if (illuminationState && illuminationState !== IlluminationState.NORMAL) {
+                return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, IlluminationStateStringMap[illuminationState]));
+            }
+        }
+        if (isFlashingFreshness) {
+            return (React__namespace.createElement(Toast, { size: "large", variation: "primary" }, hintDisplayText.hintHoldFaceForFreshnessText));
+        }
+        if (isRecording && !isFlashingFreshness) {
+            // During face matching, we want to only show the TOO_CLOSE or
+            // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
+            // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
+            // we are defaulting to the TOO_FAR text (for now). For MATCHED state,
+            // we don't want to show any toasts.
+            return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' }, faceMatchState === FaceMatchState.TOO_CLOSE
+                ? FaceMatchStateStringMap[FaceMatchState.TOO_CLOSE]
+                : FaceMatchStateStringMap[FaceMatchState.TOO_FAR]));
+        }
+        return null;
+    };
+    const instructionContent = getInstructionContent();
+    return instructionContent ? instructionContent : null;
+};
+
+const MatchIndicator = ({ percentage, initialPercentage = 25, testId, }) => {
+    const [matchPercentage, setMatchPercentage] = React__default["default"].useState(initialPercentage);
+    React__default["default"].useEffect(() => {
+        if (percentage < 0) {
+            setMatchPercentage(0);
+        }
+        else if (percentage > 100) {
+            setMatchPercentage(100);
+        }
+        else {
+            setMatchPercentage(percentage);
+        }
+    }, [percentage]);
+    const percentageStyles = {
+        '--percentage': `${matchPercentage}%`,
+    };
+    return (React__default["default"].createElement("div", { className: LivenessClassNames.MatchIndicator, "data-testid": testId },
+        React__default["default"].createElement("div", { className: `${LivenessClassNames.MatchIndicator}__bar`, style: percentageStyles })));
+};
+
+const Overlay = ({ children, horizontal = 'center', vertical = 'center', className, ...rest }) => {
+    return (React__namespace.createElement(uiReact.Flex, { className: `${LivenessClassNames.Overlay} ${className}`, alignItems: horizontal, justifyContent: vertical, ...rest }, children));
+};
+
+const RecordingIcon = ({ children }) => {
+    return (React__default["default"].createElement(uiReact.Flex, { className: LivenessClassNames.RecordingIcon },
+        React__default["default"].createElement(uiReact.Flex, { "data-testid": "rec-icon", justifyContent: "center" },
+            React__default["default"].createElement(uiReact.Icon, { viewBox: { width: 20, height: 20 }, width: "20", height: "20" },
+                React__default["default"].createElement("circle", { cx: "10", cy: "10", r: "8", fill: "red" }))),
+        React__default["default"].createElement(uiReact.Text, { as: "span", fontWeight: "bold" }, children)));
+};
+
+const defaultErrorDisplayText = {
+    timeoutHeaderText: 'Time out',
+    timeoutMessageText: "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
+    faceDistanceHeaderText: 'Forward movement detected',
+    faceDistanceMessageText: 'Avoid moving closer when connecting.',
+    multipleFacesHeaderText: 'Multiple faces detected',
+    multipleFacesMessageText: 'Ensure only one face is present in front of the camera when connecting.',
+    clientHeaderText: 'Client error',
+    clientMessageText: 'Check failed due to client issue',
+    serverHeaderText: 'Server issue',
+    serverMessageText: 'Cannot complete check due to server issue',
+    landscapeHeaderText: 'Landscape orientation not supported',
+    landscapeMessageText: 'Rotate your device to portrait (vertical) orientation.',
+    portraitMessageText: 'Ensure your device remains in portrait (vertical) orientation for the check’s duration.',
+    tryAgainText: 'Try again',
+};
+const defaultLivenessDisplayText = {
+    hintCenterFaceText: 'Center your face',
+    startScreenBeginCheckText: 'Start video check',
+    photosensitivyWarningHeadingText: 'Photosensitivity warning',
+    photosensitivyWarningBodyText: 'This check flashes different colors. Use caution if you are photosensitive.',
+    photosensitivyWarningInfoText: 'Some people may experience may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+    goodFitCaptionText: 'Good fit',
+    goodFitAltText: "Ilustration of a person's face, perfectly fitting inside of an oval.",
+    tooFarCaptionText: 'Too far',
+    tooFarAltText: "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
+    cameraMinSpecificationsHeadingText: 'Camera does not meet minimum specifications',
+    cameraMinSpecificationsMessageText: 'Camera must support at least 320*240 resolution and 15 frames per second.',
+    cameraNotFoundHeadingText: 'Camera is not accessible.',
+    cameraNotFoundMessageText: 'Check that a camera is connected and there is not another application using the camera. You may have to go into settings to grant camera permissions and close out all instances of your browser and retry.',
+    retryCameraPermissionsText: 'Retry',
+    waitingCameraPermissionText: 'Waiting for you to allow camera permission.',
+    cancelLivenessCheckText: 'Cancel Liveness check',
+    recordingIndicatorText: 'Rec',
+    hintMoveFaceFrontOfCameraText: 'Move face in front of camera',
+    hintTooManyFacesText: 'Ensure only one face is in front of camera',
+    hintFaceDetectedText: 'Face detected',
+    hintCanNotIdentifyText: 'Move face in front of camera',
+    hintTooCloseText: 'Move back',
+    hintTooFarText: 'Move closer',
+    hintConnectingText: 'Connecting...',
+    hintVerifyingText: 'Verifying...',
+    hintIlluminationTooBrightText: 'Move to dimmer area',
+    hintIlluminationTooDarkText: 'Move to brighter area',
+    hintIlluminationNormalText: 'Lighting conditions normal',
+    hintHoldFaceForFreshnessText: 'Hold still',
+    ...defaultErrorDisplayText,
+};
+
+const renderToastErrorModal = (props) => {
+    const { error: errorState, displayText } = props;
+    const { timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
+    let heading;
+    let message;
+    switch (errorState) {
+        case LivenessErrorState.TIMEOUT:
+            heading = timeoutHeaderText;
+            message = timeoutMessageText;
+            break;
+        case LivenessErrorState.FACE_DISTANCE_ERROR:
+            heading = faceDistanceHeaderText;
+            message = faceDistanceMessageText;
+            break;
+        case LivenessErrorState.MULTIPLE_FACES_ERROR:
+            heading = multipleFacesHeaderText;
+            message = multipleFacesMessageText;
+            break;
+        case LivenessErrorState.RUNTIME_ERROR:
+            heading = clientHeaderText;
+            message = clientMessageText;
+            break;
+        case LivenessErrorState.SERVER_ERROR:
+        default:
+            heading = serverHeaderText;
+            message = serverMessageText;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(uiReact.Flex, { className: LivenessClassNames.ErrorModal },
+            React__default["default"].createElement(internal.AlertIcon, { ariaHidden: true, variation: "error" }),
+            React__default["default"].createElement(uiReact.Text, { className: LivenessClassNames.ErrorModalHeading }, heading)),
+        message));
+};
+const renderErrorModal = ({ errorState, overrideErrorDisplayText, }) => {
+    const displayText = {
+        ...defaultErrorDisplayText,
+        ...overrideErrorDisplayText,
+    };
+    if (errorState === LivenessErrorState.CAMERA_ACCESS_ERROR ||
+        errorState === LivenessErrorState.CAMERA_FRAMERATE_ERROR ||
+        errorState === LivenessErrorState.MOBILE_LANDSCAPE_ERROR) {
+        return null;
+    }
+    else {
+        return renderToastErrorModal({
+            error: errorState,
+            displayText,
+        });
+    }
+};
+const FaceLivenessErrorModal = (props) => {
+    const { children, onRetry, displayText: overrideErrorDisplayText } = props;
+    const displayText = {
+        ...defaultErrorDisplayText,
+        ...overrideErrorDisplayText,
+    };
+    const { tryAgainText } = displayText;
+    return (React__default["default"].createElement(Overlay, { className: LivenessClassNames.OpaqueOverlay },
+        React__default["default"].createElement(Toast, null,
+            children,
+            React__default["default"].createElement(uiReact.Flex, { justifyContent: "center" },
+                React__default["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText)))));
+};
+
+/**
+ * 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.
+ */
+const LivenessIconWithPopover = ({ children }) => {
+    const breakpoint = internal.useThemeBreakpoint();
+    const [shouldShowPopover, setShouldShowPopover] = React__namespace.useState(false);
+    const wrapperRef = React__namespace.useRef(null);
+    const isMobileScreen = breakpoint === 'base';
+    React__namespace.useEffect(() => {
+        function handleClickOutside(event) {
+            if (shouldShowPopover &&
+                wrapperRef.current &&
+                !wrapperRef.current.contains(event.target)) {
+                setShouldShowPopover(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [wrapperRef, shouldShowPopover]);
+    return (React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.Popover, onClick: () => setShouldShowPopover(!shouldShowPopover), ref: wrapperRef, testId: "popover-icon" },
+        React__namespace.createElement(internal.AlertIcon, { ariaHidden: true, variation: "info" }),
+        shouldShowPopover && (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.PopoverAnchor }),
+            React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.PopoverAnchorSecondary }),
+            React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.PopoverContainer, left: isMobileScreen ? -190 : -108, "data-testid": "popover-text" }, children)))));
+};
+LivenessIconWithPopover.displayName = 'LivenessIconWithPopover';
+
+const DefaultPhotosensitiveWarning = ({ headingText, bodyText, infoText, }) => {
+    return (React__default["default"].createElement(uiReact.Flex, { className: `${ui.ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`, style: { zIndex: '3' } },
+        React__default["default"].createElement(uiReact.View, { flex: "1" },
+            React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.AlertHeading }, headingText),
+            React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.AlertBody }, bodyText)),
+        React__default["default"].createElement(LivenessIconWithPopover, null, infoText)));
+};
+const DefaultRecordingIcon = ({ recordingIndicatorText, }) => {
+    return (React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.RecordingIconContainer },
+        React__default["default"].createElement(RecordingIcon, null, recordingIndicatorText)));
+};
+const DefaultCancelButton = ({ cancelLivenessCheckText, }) => {
+    return (React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.CancelContainer },
+        React__default["default"].createElement(CancelButton, { ariaLabel: cancelLivenessCheckText })));
+};
+
+const selectVideoConstraints = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoConstraints);
+const selectVideoStream = createLivenessSelector((state) => state.context.videoAssociatedParams?.videoMediaStream);
+const selectFaceMatchPercentage = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchPercentage);
+const selectFaceMatchState = createLivenessSelector((state) => state.context.faceMatchAssociatedParams?.faceMatchState);
+const selectSelectedDeviceId = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectedDeviceId);
+const selectSelectableDevices = createLivenessSelector((state) => state.context.videoAssociatedParams?.selectableDevices);
+const centeredLoader = (React__default["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader" }));
+const showMatchIndicatorStates = [
+    FaceMatchState.TOO_FAR,
+    FaceMatchState.CANT_IDENTIFY,
+    FaceMatchState.FACE_IDENTIFIED,
+    FaceMatchState.MATCHED,
+];
+/**
+ * For now we want to memoize the HOC for MatchIndicator because to optimize renders
+ * The LivenessCameraModule still needs to be optimized for re-renders and at that time
+ * we should be able to remove this memoization
+ */
+const MemoizedMatchIndicator = React__default["default"].memo(MatchIndicator);
+const LivenessCameraModule = (props) => {
+    const { isMobileScreen, isRecordingStopped, instructionDisplayText, streamDisplayText, hintDisplayText, errorDisplayText, cameraDisplayText, components: customComponents, testId, } = props;
+    const { cancelLivenessCheckText, recordingIndicatorText } = streamDisplayText;
+    const { ErrorView = FaceLivenessErrorModal } = customComponents ?? {};
+    const [state, send] = useLivenessActor();
+    const videoStream = useLivenessSelector(selectVideoStream);
+    const videoConstraints = useLivenessSelector(selectVideoConstraints);
+    const selectedDeviceId = useLivenessSelector(selectSelectedDeviceId);
+    const selectableDevices = useLivenessSelector(selectSelectableDevices);
+    const faceMatchPercentage = useLivenessSelector(selectFaceMatchPercentage);
+    const faceMatchState = useLivenessSelector(selectFaceMatchState);
+    const errorState = useLivenessSelector(selectErrorState);
+    const colorMode = internal.useColorMode();
+    const { videoRef, videoWidth, videoHeight } = useMediaStreamInVideo(videoStream);
+    const canvasRef = React.useRef(null);
+    const freshnessColorRef = React.useRef(null);
+    const [isCameraReady, setIsCameraReady] = React.useState(false);
+    const isCheckingCamera = state.matches('cameraCheck');
+    const isWaitingForCamera = state.matches('waitForDOMAndCameraDetails');
+    const isStartView = state.matches('start') || state.matches('userCancel');
+    const isRecording = state.matches('recording');
+    const isCheckSucceeded = state.matches('checkSucceeded');
+    const isFlashingFreshness = state.matches({
+        recording: 'flashFreshnessColors',
+    });
+    // Android/Firefox and iOS flip the values of width/height returned from
+    // getUserMedia, so we'll reset these in useLayoutEffect with the videoRef
+    // element's intrinsic videoWidth and videoHeight attributes
+    const [mediaWidth, setMediaWidth] = React.useState(videoWidth);
+    const [mediaHeight, setMediaHeight] = React.useState(videoHeight);
+    const [aspectRatio, setAspectRatio] = React.useState(() => videoWidth && videoHeight ? videoWidth / videoHeight : 0);
+    React__default["default"].useEffect(() => {
+        if (canvasRef &&
+            videoRef &&
+            canvasRef.current &&
+            videoRef.current &&
+            videoStream &&
+            isStartView) {
+            drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+        }
+    }, [canvasRef, videoRef, videoStream, colorMode, isStartView]);
+    React__default["default"].useEffect(() => {
+        const updateColorModeHandler = (e) => {
+            if (e.matches &&
+                canvasRef &&
+                videoRef &&
+                canvasRef.current &&
+                videoRef.current &&
+                videoStream &&
+                isStartView) {
+                drawStaticOval(canvasRef.current, videoRef.current, videoStream);
+            }
+        };
+        const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)');
+        const lightModePreference = window.matchMedia('(prefers-color-scheme: light)');
+        darkModePreference.addEventListener('change', updateColorModeHandler);
+        lightModePreference.addEventListener('change', updateColorModeHandler);
+        return () => {
+            darkModePreference.removeEventListener('change', updateColorModeHandler);
+            lightModePreference.addEventListener('change', updateColorModeHandler);
+        };
+    }, [canvasRef, videoRef, videoStream, isStartView]);
+    React__default["default"].useLayoutEffect(() => {
+        if (isCameraReady) {
+            send({
+                type: 'SET_DOM_AND_CAMERA_DETAILS',
+                data: {
+                    videoEl: videoRef.current,
+                    canvasEl: canvasRef.current,
+                    freshnessColorEl: freshnessColorRef.current,
+                    isMobile: isMobileScreen,
+                },
+            });
+        }
+        if (videoRef.current) {
+            setMediaWidth(videoRef.current.videoWidth);
+            setMediaHeight(videoRef.current.videoHeight);
+            setAspectRatio(videoRef.current.videoWidth / videoRef.current.videoHeight);
+        }
+    }, [send, videoRef, isCameraReady, isMobileScreen]);
+    const photoSensitivtyWarning = React__default["default"].useMemo(() => {
+        return (React__default["default"].createElement(uiReact.View, { style: { visibility: isStartView ? 'visible' : 'hidden' } },
+            React__default["default"].createElement(DefaultPhotosensitiveWarning, { headingText: instructionDisplayText.photosensitivyWarningHeadingText, bodyText: instructionDisplayText.photosensitivyWarningBodyText, infoText: instructionDisplayText.photosensitivyWarningInfoText })));
+    }, [instructionDisplayText, isStartView]);
+    const handleMediaPlay = () => {
+        setIsCameraReady(true);
+    };
+    const beginLivenessCheck = React__default["default"].useCallback(() => {
+        send({
+            type: 'BEGIN',
+        });
+    }, [send]);
+    const onCameraChange = React__default["default"].useCallback((e) => {
+        const newDeviceId = e.target.value;
+        const changeCamera = async () => {
+            const newStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    ...videoConstraints,
+                    deviceId: { exact: newDeviceId },
+                },
+                audio: false,
+            });
+            send({
+                type: 'UPDATE_DEVICE_AND_STREAM',
+                data: { newDeviceId, newStream },
+            });
+        };
+        changeCamera();
+    }, [videoConstraints, send]);
+    if (isCheckingCamera) {
+        return (React__default["default"].createElement(uiReact.Flex, { justifyContent: 'center', className: LivenessClassNames.StartScreenCameraWaiting },
+            React__default["default"].createElement(uiReact.Loader, { size: "large", className: LivenessClassNames.Loader, "data-testid": "centered-loader", position: "unset" }),
+            React__default["default"].createElement(uiReact.Text, { fontSize: "large", fontWeight: "bold", "data-testid": "waiting-camera-permission", className: `${LivenessClassNames.StartScreenCameraWaiting}__text` }, cameraDisplayText.waitingCameraPermissionText)));
+    }
+    const isRecordingOnMobile = isMobileScreen && !isStartView && !isWaitingForCamera && isRecording;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        photoSensitivtyWarning,
+        React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.CameraModule, isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`), "data-testid": testId, gap: "zero" },
+            !isCameraReady && centeredLoader,
+            React__default["default"].createElement(uiReact.View, { as: "canvas", ref: freshnessColorRef, className: LivenessClassNames.FreshnessCanvas, hidden: true }),
+            React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.VideoAnchor, style: {
+                    aspectRatio: `${aspectRatio}`,
+                } },
+                React__default["default"].createElement("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, width: mediaWidth, height: mediaHeight, onCanPlay: handleMediaPlay, "data-testid": "video", className: LivenessClassNames.Video }),
+                React__default["default"].createElement(uiReact.Flex, { className: ui.classNames(LivenessClassNames.OvalCanvas, isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`, isRecordingStopped && LivenessClassNames.FadeOut) },
+                    React__default["default"].createElement(uiReact.View, { as: "canvas", ref: canvasRef })),
+                isRecording && (React__default["default"].createElement(DefaultRecordingIcon, { recordingIndicatorText: recordingIndicatorText })),
+                !isStartView && !isWaitingForCamera && !isCheckSucceeded && (React__default["default"].createElement(DefaultCancelButton, { cancelLivenessCheckText: cancelLivenessCheckText })),
+                React__default["default"].createElement(Overlay, { horizontal: "center", vertical: isRecording && !isFlashingFreshness ? 'start' : 'space-between', className: LivenessClassNames.InstructionOverlay },
+                    React__default["default"].createElement(Hint, { hintDisplayText: hintDisplayText }),
+                    errorState && (React__default["default"].createElement(ErrorView, { onRetry: () => {
+                            send({ type: 'CANCEL' });
+                        } }, renderErrorModal({
+                        errorState,
+                        overrideErrorDisplayText: errorDisplayText,
+                    }))),
+                    isRecording &&
+                        !isFlashingFreshness &&
+                        showMatchIndicatorStates.includes(faceMatchState) ? (React__default["default"].createElement(MemoizedMatchIndicator, { percentage: Math.ceil(faceMatchPercentage) })) : null),
+                isStartView &&
+                    !isMobileScreen &&
+                    selectableDevices &&
+                    selectableDevices.length > 1 && (React__default["default"].createElement(uiReact.Flex, { className: LivenessClassNames.StartScreenCameraSelect },
+                    React__default["default"].createElement(uiReact.View, { className: LivenessClassNames.StartScreenCameraSelectContainer },
+                        React__default["default"].createElement(uiReact.Label, { htmlFor: "amplify-liveness-camera-select", className: `${LivenessClassNames.StartScreenCameraSelect}__label` }, "Camera:"),
+                        React__default["default"].createElement(uiReact.SelectField, { id: "amplify-liveness-camera-select", label: "Camera", labelHidden: true, value: selectedDeviceId, onChange: onCameraChange }, selectableDevices?.map((device) => (React__default["default"].createElement("option", { value: device.deviceId, key: device.deviceId }, device.label))))))))),
+        isStartView && (React__default["default"].createElement(uiReact.Flex, { justifyContent: "center" },
+            React__default["default"].createElement(uiReact.Button, { variation: "primary", type: "button", onClick: beginLivenessCheck }, instructionDisplayText.startScreenBeginCheckText)))));
+};
+
+function isNewerIpad() {
+    // iPads on iOS13+ return as if a desktop Mac
+    // so check for maxTouchPoints also.
+    return (/Macintosh/i.test(navigator.userAgent) &&
+        !!navigator.maxTouchPoints &&
+        navigator.maxTouchPoints > 1);
+}
+function isMobileScreen() {
+    const isMobileDevice = 
+    // Test Android/iPhone/iPad
+    /Android|iPhone|iPad/i.test(navigator.userAgent) || isNewerIpad();
+    return isMobileDevice;
+}
+/**
+ * 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
+ */
+function getLandscapeMediaQuery() {
+    return window.matchMedia('(orientation: landscape)');
+}
+
+const LandscapeErrorModal = (props) => {
+    const { onRetry, header, portraitMessage, landscapeMessage, tryAgainText } = props;
+    const [isLandscape, setIsLandscape] = React__namespace.useState(true);
+    React__namespace.useLayoutEffect(() => {
+        // Get orientation: landscape media query
+        const landscapeMediaQuery = getLandscapeMediaQuery();
+        // Set ui state for initial orientation
+        setIsLandscape(landscapeMediaQuery.matches);
+        // Listen for future orientation changes
+        landscapeMediaQuery.addEventListener('change', (e) => {
+            setIsLandscape(e.matches);
+        });
+        // Remove matchMedia event listener
+        return () => {
+            landscapeMediaQuery.removeEventListener('change', (e) => setIsLandscape(e.matches));
+        };
+    }, []);
+    return (React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.LandscapeErrorModal, height: isLandscape ? 'auto' : 480 },
+        React__namespace.createElement(uiReact.Text, { className: LivenessClassNames.LandscapeErrorModalHeader }, header),
+        React__namespace.createElement(uiReact.Text, null, isLandscape ? landscapeMessage : portraitMessage),
+        !isLandscape ? (React__namespace.createElement(uiReact.Flex, { className: LivenessClassNames.LandscapeErrorModalButton },
+            React__namespace.createElement(uiReact.Button, { variation: "primary", type: "button", onClick: onRetry }, tryAgainText))) : null));
+};
+
+const CHECK_CLASS_NAME = 'liveness-detector-check';
+const CAMERA_ERROR_TEXT_WIDTH = 420;
+const selectIsRecordingStopped = createLivenessSelector((state) => state.context.isRecordingStopped);
+const LivenessCheck = ({ instructionDisplayText, hintDisplayText, cameraDisplayText, streamDisplayText, errorDisplayText, components, }) => {
+    const [state, send] = useLivenessActor();
+    const errorState = useLivenessSelector(selectErrorState);
+    const isRecordingStopped = useLivenessSelector(selectIsRecordingStopped);
+    const isPermissionDenied = state.matches('permissionDenied');
+    const isMobile = isMobileScreen();
+    const recheckCameraPermissions = () => {
+        send({ type: 'RETRY_CAMERA_CHECK' });
+    };
+    const { cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, } = cameraDisplayText;
+    const { cancelLivenessCheckText } = streamDisplayText;
+    React__namespace.useLayoutEffect(() => {
+        if (isMobile) {
+            const sendLandscapeWarning = (isLandscapeMatched) => {
+                if (isLandscapeMatched) {
+                    send({ type: 'MOBILE_LANDSCAPE_WARNING' });
+                }
+            };
+            // Get orientation: landscape media query
+            const landscapeMediaQuery = getLandscapeMediaQuery();
+            // Send warning based on initial orientation
+            sendLandscapeWarning(landscapeMediaQuery.matches);
+            // Listen for future orientation changes and send warning
+            landscapeMediaQuery.addEventListener('change', (e) => {
+                sendLandscapeWarning(e.matches);
+            });
+            // Remove matchMedia event listener
+            return () => {
+                landscapeMediaQuery.removeEventListener('change', (e) => sendLandscapeWarning(e.matches));
+            };
+        }
+    }, [isMobile, send]);
+    const renderCheck = () => {
+        if (errorState === LivenessErrorState.MOBILE_LANDSCAPE_ERROR) {
+            const displayText = {
+                ...defaultErrorDisplayText,
+                ...errorDisplayText,
+            };
+            const { landscapeHeaderText, portraitMessageText, landscapeMessageText, tryAgainText, } = displayText;
+            return (React__namespace.createElement(uiReact.Flex, { backgroundColor: "background.primary", direction: "column", textAlign: "center", alignItems: "center", justifyContent: "center", position: "absolute", width: "100%" },
+                React__namespace.createElement(LandscapeErrorModal, { header: landscapeHeaderText, portraitMessage: portraitMessageText, landscapeMessage: landscapeMessageText, tryAgainText: tryAgainText, onRetry: () => {
+                        send({
+                            type: 'CANCEL',
+                        });
+                    } })));
+        }
+        else if (isPermissionDenied) {
+            return (React__namespace.createElement(uiReact.Flex, { backgroundColor: "background.primary", direction: "column", textAlign: "center", alignItems: "center", justifyContent: "center", width: "100%", height: 480 },
+                React__namespace.createElement(uiReact.Text, { fontSize: "large", fontWeight: "bold" }, errorState === LivenessErrorState.CAMERA_FRAMERATE_ERROR
+                    ? cameraMinSpecificationsHeadingText
+                    : cameraNotFoundHeadingText),
+                React__namespace.createElement(uiReact.Text, { maxWidth: CAMERA_ERROR_TEXT_WIDTH }, errorState === LivenessErrorState.CAMERA_FRAMERATE_ERROR
+                    ? cameraMinSpecificationsMessageText
+                    : cameraNotFoundMessageText),
+                React__namespace.createElement(uiReact.Button, { variation: "primary", type: "button", onClick: recheckCameraPermissions }, retryCameraPermissionsText),
+                React__namespace.createElement(uiReact.View, { position: "absolute", top: "medium", right: "medium" },
+                    React__namespace.createElement(CancelButton, { ariaLabel: cancelLivenessCheckText }))));
+        }
+        else {
+            return (React__namespace.createElement(LivenessCameraModule, { isMobileScreen: isMobile, isRecordingStopped: isRecordingStopped, instructionDisplayText: instructionDisplayText, streamDisplayText: streamDisplayText, hintDisplayText: hintDisplayText, errorDisplayText: errorDisplayText, cameraDisplayText: cameraDisplayText, components: components }));
+        }
+    };
+    return (React__namespace.createElement(uiReact.Flex, { direction: "column", position: "relative", testId: CHECK_CLASS_NAME, className: CHECK_CLASS_NAME, gap: "xl" }, renderCheck()));
+};
+
+/**
+ * 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
+ */
+function getDisplayText(overrideDisplayText) {
+    const displayText = {
+        ...defaultLivenessDisplayText,
+        ...overrideDisplayText,
+    };
+    const { photosensitivyWarningHeadingText, photosensitivyWarningBodyText, photosensitivyWarningInfoText, goodFitCaptionText, goodFitAltText, tooFarCaptionText, tooFarAltText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, retryCameraPermissionsText, waitingCameraPermissionText, cancelLivenessCheckText, recordingIndicatorText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintFaceDetectedText, hintCanNotIdentifyText, hintTooCloseText, hintTooFarText, hintConnectingText, hintVerifyingText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintIlluminationNormalText, hintHoldFaceForFreshnessText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, landscapeHeaderText, landscapeMessageText, portraitMessageText, tryAgainText, startScreenBeginCheckText, hintCenterFaceText, } = displayText;
+    const hintDisplayText = {
+        hintMoveFaceFrontOfCameraText,
+        hintTooManyFacesText,
+        hintFaceDetectedText,
+        hintCanNotIdentifyText,
+        hintTooCloseText,
+        hintTooFarText,
+        hintConnectingText,
+        hintVerifyingText,
+        hintIlluminationTooBrightText,
+        hintIlluminationTooDarkText,
+        hintIlluminationNormalText,
+        hintHoldFaceForFreshnessText,
+        hintCenterFaceText,
+    };
+    const cameraDisplayText = {
+        cameraMinSpecificationsHeadingText,
+        cameraMinSpecificationsMessageText,
+        cameraNotFoundHeadingText,
+        cameraNotFoundMessageText,
+        retryCameraPermissionsText,
+        waitingCameraPermissionText,
+    };
+    const instructionDisplayText = {
+        photosensitivyWarningHeadingText,
+        photosensitivyWarningBodyText,
+        photosensitivyWarningInfoText,
+        goodFitCaptionText,
+        goodFitAltText,
+        tooFarCaptionText,
+        tooFarAltText,
+        startScreenBeginCheckText,
+    };
+    const streamDisplayText = {
+        cancelLivenessCheckText,
+        recordingIndicatorText,
+    };
+    const errorDisplayText = {
+        timeoutHeaderText,
+        timeoutMessageText,
+        faceDistanceHeaderText,
+        faceDistanceMessageText,
+        multipleFacesHeaderText,
+        multipleFacesMessageText,
+        clientHeaderText,
+        clientMessageText,
+        serverHeaderText,
+        serverMessageText,
+        landscapeHeaderText,
+        landscapeMessageText,
+        portraitMessageText,
+        tryAgainText,
+    };
+    return {
+        hintDisplayText,
+        cameraDisplayText,
+        instructionDisplayText,
+        streamDisplayText,
+        errorDisplayText,
+    };
+}
+
+const DETECTOR_CLASS_NAME = 'liveness-detector';
+function FaceLivenessDetectorCore(props) {
+    const { components, config, displayText } = props;
+    const currElementRef = React__namespace.useRef(null);
+    const { hintDisplayText, cameraDisplayText, instructionDisplayText, streamDisplayText, errorDisplayText, } = getDisplayText(displayText);
+    const service = react.useInterpret(livenessMachine, {
+        devTools: process.env.NODE_ENV === 'development',
+        context: {
+            componentProps: {
+                ...props,
+                config: config ?? {},
+            },
+        },
+    });
+    return (React__namespace.createElement(uiReact.View, { className: DETECTOR_CLASS_NAME, testId: DETECTOR_CLASS_NAME },
+        React__namespace.createElement(FaceLivenessDetectorProvider, { componentProps: props, service: service },
+            React__namespace.createElement(uiReact.Flex, { direction: "column", ref: currElementRef },
+                React__namespace.createElement(LivenessCheck, { instructionDisplayText: instructionDisplayText, hintDisplayText: hintDisplayText, cameraDisplayText: cameraDisplayText, streamDisplayText: streamDisplayText, errorDisplayText: errorDisplayText, components: components })))));
+}
+
+const credentialProvider = async () => {
+    const { credentials } = await auth.fetchAuthSession();
+    if (!credentials) {
+        throw new Error('No credentials provided');
+    }
+    return credentials;
+};
+function FaceLivenessDetector(props) {
+    const { config, ...rest } = props;
+    return (React__namespace.createElement(FaceLivenessDetectorCore, { ...rest, config: { credentialProvider, ...config } }));
+}
+
+exports.FaceLivenessDetector = FaceLivenessDetector;
+exports.FaceLivenessDetectorCore = FaceLivenessDetectorCore;