diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx index a3f4196d99a..36faeb1cefe 100644 --- a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx +++ b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx @@ -291,8 +291,9 @@ export const LivenessCameraModule = ( ); } - const isRecordingOnMobile = - isMobileScreen && !isStartView && !isWaitingForCamera && isRecording; + // We don't show full screen camera on the pre check screen (isStartView/isWaitingForCamera) + const shouldShowFullScreenCamera = + isMobileScreen && !isStartView && !isWaitingForCamera; return ( <> @@ -301,7 +302,8 @@ export const LivenessCameraModule = ( diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts index 416c3f7262d..86b5ff8f04f 100644 --- a/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts +++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts @@ -31,6 +31,7 @@ import { isCameraDeviceVirtual, FreshnessColorDisplay, drawStaticOval, + clearOvalCanvas, } from '../utils'; import { nanoid } from 'nanoid'; import { getStaticLivenessOvalDetails } from '../utils/liveness'; @@ -183,6 +184,7 @@ export const livenessMachine = createMachine( }, }, detectFaceBeforeStart: { + entry: ['hideOvalCanvas'], invoke: { src: 'detectFace', onDone: { @@ -249,7 +251,7 @@ export const livenessMachine = createMachine( initial: 'ovalDrawing', states: { ovalDrawing: { - entry: ['sendTimeoutAfterOvalDrawingDelay'], + entry: ['showOvalCanvas', 'sendTimeoutAfterOvalDrawingDelay'], invoke: { src: 'detectInitialFaceAndDrawOval', onDone: { @@ -483,6 +485,17 @@ export const livenessMachine = createMachine( drawStaticOval(canvasEl!, videoEl!, videoMediaStream!); }, + hideOvalCanvas: (context) => { + const { canvasEl } = context.videoAssociatedParams!; + + clearOvalCanvas({ canvas: canvasEl! }); + canvasEl!.style.display = 'none'; + }, + showOvalCanvas: (context) => { + const { canvasEl } = context.videoAssociatedParams!; + + canvasEl!.style.display = 'unset'; + }, updateRecordingStartTimestampMs: assign({ videoAssociatedParams: (context) => { const { diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts index aaff3c3908d..05c8f835e67 100644 --- a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts +++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts @@ -296,6 +296,21 @@ export function drawLivenessOvalInCanvas({ } } +export function clearOvalCanvas({ + canvas, +}: { + canvas: HTMLCanvasElement; +}): void { + const ctx = canvas.getContext('2d'); + + if (ctx) { + ctx.restore(); + ctx.clearRect(0, 0, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER); + } else { + throw new Error('Cannot find Canvas.'); + } +} + interface FaceMatchStateInLivenessOval { faceMatchState: FaceMatchState; faceMatchPercentage: number;