fix(liveness): fix styling when no face on screen by not showing oval…

… canvas and ensuring full screen camera
aws-amplify · Jan 5, 2024 · 4fabf1e · 4fabf1e
1 parent 936243f
commit 4fabf1e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/...react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx b/...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 = (
       <Flex
         className={classNames(
           LivenessClassNames.CameraModule,
-          isRecordingOnMobile && `${LivenessClassNames.CameraModule}--mobile`
+          shouldShowFullScreenCamera &&
+            `${LivenessClassNames.CameraModule}--mobile`
         )}
         data-testid={testId}
         gap="zero"
@@ -335,7 +337,8 @@ export const LivenessCameraModule = (
           <Flex
             className={classNames(
               LivenessClassNames.OvalCanvas,
-              isRecordingOnMobile && `${LivenessClassNames.OvalCanvas}--mobile`,
+              shouldShowFullScreenCamera &&
+                `${LivenessClassNames.OvalCanvas}--mobile`,
               isRecordingStopped && LivenessClassNames.FadeOut
             )}
           >

diff --git 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<LivenessContext, LivenessEvent>(
         },
       },
       detectFaceBeforeStart: {
+        entry: ['hideOvalCanvas'],
         invoke: {
           src: 'detectFace',
           onDone: {
@@ -249,7 +251,7 @@ export const livenessMachine = createMachine<LivenessContext, LivenessEvent>(
         initial: 'ovalDrawing',
         states: {
           ovalDrawing: {
-            entry: ['sendTimeoutAfterOvalDrawingDelay'],
+            entry: ['showOvalCanvas', 'sendTimeoutAfterOvalDrawingDelay'],
             invoke: {
               src: 'detectInitialFaceAndDrawOval',
               onDone: {
@@ -483,6 +485,17 @@ export const livenessMachine = createMachine<LivenessContext, LivenessEvent>(
 
         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
@@ -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;