Camera remains in use even after unmounting the FaceLiveness component.

[rishabhgupta1234]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Liveness

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

Which region are you seeing the problem in?

No response

Please describe your bug.

I am encountering an issue with FaceLivenessDetectorCore while implementing face liveness detection for users. After the face liveness process is completed, the camera light remains on, indicating that the camera is not being released properly.

It seems that FaceLivenessDetectorCore continues to access the user's camera permissions and does not release the camera resource once the face liveness process is finished.

What's the expected behaviour?

After the face liveness process is completed, the camera should be released, and the camera light should turn off.

Help us reproduce the bug!

1. Run FaceLivenessDetectorCore independently, and it will request camera permissions.
2. Complete the face liveness check.
3. After the process is completed, the camera light remains on.

Code Snippet

import { FaceLivenessDetectorCore } from '@aws-amplify/ui-react-liveness'

<FaceLivenessDetectorCore
    sessionId={sessionId}
    region={AWS_AMPLIFY_REGION}
    onAnalysisComplete={handleAnalysisComplete}
    onError={handleLivenessComponentError}
    config={getLivenessConfig()}
/>

Console log output

No response

Additional information and screenshots

No response

[cwomack]

Hello, @rishabhgupta1234 and thank you for opening this issue. We'll investigate this further and reproduce on our side, but for further clarity are we talking about the webcam light that shows the camera is in use? Can you clarify what version and OS you're using as well?

[rishabhgupta1234]

Hi @cwomack thanks for replying

Please find the details below

1. Yes, about webcam light
2. @aws-amplify/ui-react-liveness version is 3.1.1
3. Ubuntu 24.04.1

[dindjarinjs]

@rishabhgupta1234 What are you rendering once the analysis is complete? It's the responsibility of the developer to render another screen using onAnalysisComplete, at which point the video will no longer be rendered in the DOM.

[rishabhgupta1234]

@dindjarinjs I'm rendering the Faceliveness component based on a toggle condition. After this step is completed, the video is not rendered in the DOM, but the webcam light remains on.

[cwomack]

@rishabhgupta1234, we've been unable to reproduce on our side. Do you have a sample repo you can share where this is easily reproducible? Or could you share more of the code related to the toggle condition for us to have a better idea of how to reproduce? Thanks.

[rishabhgupta1234]

Thanks for replying @cwomack
Sharing my code below:

1. AWSFaceLivenessCheckComponent.tsx
   This component renders the FaceLivenessDetectorCore and handles the onComplete event to indicate the face liveness check is finished.

import React from 'react';
import { FaceLivenessDetectorCore } from 'aws-sdk';

const AWSFaceLivenessCheckComponent = ({ onComplete }: { onComplete: () => void }) => {
   const handleAnalysisComplete = () => {
      onComplete();
   };

 // Other functionalities

   return (
      <FaceLivenessDetectorCore
         sessionId={sessionId}
         region={AWS_AMPLIFY_REGION}
         onAnalysisComplete={handleAnalysisComplete}
         onError={handleLivenessComponentError}
         config={getLivenessConfig()}
      />
   );
};

export default AWSFaceLivenessCheckComponent;

2. AWSFaceRekognitionAuth.tsx
   This component conditionally renders components based on the current face authentication step (currentFaceAuthStep) and ensures the modal is displayed when FACE_LIVENESS_CHECK is active.

import React, { useState } from 'react';
import AWSFaceLivenessCheckComponent from './AWSFaceLivenessCheckComponent';

enum FaceAuthStepsEnum {
   INITIAL_INTRODUCTION = 'INITIAL_INTRODUCTION',
   FACE_COMPARE = 'FACE_COMPARE',
   FACE_LIVENESS_CHECK = 'FACE_LIVENESS_CHECK',
}

const AWSFaceRekognitionAuth = () => {
   const [currentFaceAuthStep, setCurrentFaceAuthStep] = useState<FaceAuthStepsEnum>(
      FaceAuthStepsEnum.INITIAL_INTRODUCTION
   );

   const onCompleteFaceLivenessCheck = () => {
      // Move to the next step or handle completion logic
      setCurrentFaceAuthStep(FaceAuthStepsEnum.COMPLETED);
   };

   const renderAWSFaceLivenessCheckComponent = () => (
      <React.Modal>
         <AWSFaceLivenessCheckComponent onComplete={onCompleteFaceLivenessCheck} />
      </React.Modal>
   );

   const renderEnrollAuthFlow = () => {
      switch (currentFaceAuthStep) {
         case FaceAuthStepsEnum.INITIAL_INTRODUCTION:
            return renderInitialInstructionComponent();
         case FaceAuthStepsEnum.FACE_COMPARE:
            return renderAWSFaceCompareComponent();
         case FaceAuthStepsEnum.FACE_LIVENESS_CHECK:
            return renderAWSFaceLivenessCheckComponent();
         default:
            return <></>;
      }
   };

   return <>{renderEnrollAuthFlow()}</>;
};

export default AWSFaceRekognitionAuth;

3. App.tsx
   This is the main app component. It ensures that the AWSFaceRekognitionAuth component (responsible for face auth flow) and the rest of the app render in parallel.

import React from 'react';
import AWSFaceRekognitionAuth from './AWSFaceRekognitionAuth';

const App = () => {
   const renderApp = () => {
      // Main app rendering logic
      return <div>Your App Content</div>;
   };

   return (
      <>
         {/* Render the face auth flow */}
         <AWSFaceRekognitionAuth />

         {/* Render the rest of the app */}
         {renderApp()}
      </>
   );
};

export default App;

Explanation: The app and face authentication are rendered in parallel, face authentication is rendered inside a modal. The user can only interact with the app once the check is complete. After the check finishes, the modal is removed, and the next step is shown. The currentFaceAuthStep state controls the flow. While authentication runs, the app continues in parallel, and interaction is enabled once the process completes.

[cwomack]

@rishabhgupta1234, we've tried to reproduce this on our side but have had no luck. Do you have minimal sample repo that can reliably reproduce the issue that you can share?