Amplify Liveness intermitently does not ask for Camera Permission on FireFox mobile (iOS & Android)

[paternina]

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?

Vite

What browsers are you seeing the problem on?

Firefox

Which region are you seeing the problem in?

us-east-1

Please describe your bug.

Sometimes the package does not ask for camera permission on Firefox mobile, and keep on an infinite loop displaying the waitingCameraPermissionText.

Please note that it is intermittent, sometimes works, sometimes does not but it fails in most cases. It works fine on Firefox for desktop and other browsers, the issue is only on Firefox mobile.

What's the expected behaviour?

We should see a pop up requesting the camera access permission or display the component on the screen.

Help us reproduce the bug!

• Create a vite react app
• Install amplify liveness as described in the documentation
• Use the example provided in the documentation to create a sessions ID

Code Snippet

// Put your code below this line.
import React, { useEffect, useState } from "react";
import { FaceLivenessDetector } from "@aws-amplify/ui-react-liveness";
import { Loader, ThemeProvider, Button, Flex } from "@aws-amplify/ui-react";
import CancelIcon from "../components/icons/CancelIcon";
import CheckIcon from "../components/icons/CheckIcon";
import { API_URL } from "../data/constants";
import { FaceLivenessDictionary } from "../data/translations";
import { useTranslation } from "react-i18next";
import { extractLanguageCode } from "../utils/common";

const FaceLiveness = ({ handleNextStep, dispatch, acessToken }) => {
  const { t, i18n } = useTranslation();
  const [language, setLanguage] = useState("");
  const [loading, setLoading] = useState(true);
  const [createLivenessApiData, setCreateLivenessApiData] = useState(null);
  const [result, setResult] = useState({
    completed: false,
    ok: false,
  });

  const handleError = (error) => {
    dispatch({
      type: "awsLivenessError",
      value: error,
    });
  };

  const fetchCreateLiveness = async () => {
    try {
      const response = await fetch(`${API_URL}/create_face_liveness_response`, {
        headers: new Headers({
          Authorization: `Bearer ${acessToken}`,
        }),
      });
      const json = await response.json();
      setCreateLivenessApiData(json);
      setLoading(false);
    } catch (error) {
      handleError({
        state: "SERVER_ERROR",
        message: "Failed to fetch when createliveness",
      });
    }
  };

  useEffect(() => {
    const language = i18n.language;
    setLanguage(extractLanguageCode(language));
    fetchCreateLiveness();
  }, []);

  const handleSuccess = (data) => {
    setResult({
      completed: true,
      ok: true,
    });

    dispatch({ type: "awsLiveness", value: data });

    setTimeout(() => {
      handleNextStep();
    }, 2000);
  };

  const handleFailure = () => {
    setResult({
      completed: true,
      ok: false,
    });

    fetchCreateLiveness();

    setTimeout(() => {
      setResult({
        completed: false,
        ok: false,
      });
    }, 2000);
  };

  const fetchApi = async () => {
    try {
      const response = await fetch(
        `${API_URL}/get_face_liveness_response/${createLivenessApiData.SessionId}`,
        {
          headers: new Headers({
            Authorization: `Bearer ${acessToken}`,
          }),
        }
      );

      return response;
    } catch (error) {
      handleError({
        state: "SERVER_ERROR",
        message: "Failed to fetch when getting liveness",
      });
      return false;
    }
  };

  const handleResponse = async (response) => {
    const data = await response.json();

    return data;
  };

  const handleAnalysisComplete = async () => {
    const response = await fetchApi();

    if (!response) {
      handleFailure();
      return;
    }

    const data = await handleResponse(response);

    if (data.Confidence < 75) {
      handleFailure();
    } else {
      handleSuccess(data);
    }
  };

  const handleRetry = () => {
    fetchCreateLiveness();
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };

  return (
    <div className="w-full flex flex-col align-center justify-between flex-grow text-center lg:px-20 z-10">
      {result.completed ? (
        <>
          <p className="text-lg md:text-xl">{t("result")}</p>
          {result.ok ? (
            <>
              <CheckIcon />
              <p className="text-lg md:text-xl">{t("redirectMessage")}...</p>
            </>
          ) : (
            <>
              <CancelIcon />
              <p className="text-lg md:text-xl">{t("retryMessage")}...</p>
            </>
          )}
        </>
      ) : loading ? (
        <Loader className="self-center" />
      ) : (
        <ThemeProvider>
          <FaceLivenessDetector
            sessionId={createLivenessApiData.SessionId}
            region="us-east-1"
            onAnalysisComplete={handleAnalysisComplete}
            displayText={FaceLivenessDictionary[language]}
            onError={handleError}
            components={{
              ErrorView: ({ children }) => {
                return (
                  <Flex
                    justifyContent="center"
                    alignItems="center"
                    width="100%"
                    height="100%"
                  >
                    <Flex
                      backgroundColor="white"
                      direction="column"
                      justifyContent="center"
                      padding="32px"
                    >
                      {children}
                      <Button
                        maxWidth="120px"
                        alignSelf="center"
                        onClick={handleRetry}
                      >
                        {t("retry")}?
                      </Button>
                    </Flex>
                  </Flex>
                );
              },
            }}
          />
        </ThemeProvider>
      )}
    </div>
  );
};

export default FaceLiveness;

Console log output

No console error, the request to create the session ID is OK.

Additional information and screenshots

[reesscot]

@paternina What version of Firefox mobile are you using and what's your OS version?

[Tyg0th]

@paternina What version of Firefox mobile are you using and what's your OS version?

Is Firefox Mobile 130.0.1 and we used iOS 18 but we have the same behavior in Android 13

[reesscot]

When you say FireFox Mobile, you mean Firefox for iOS and Firefox for Android, right?

[Tyg0th]

That's right

[reesscot]

What version of the ui-react-liveness package are you using?

[Tyg0th]

We have the following:

"@aws-amplify/ui-react": "^6.5.1",
"@aws-amplify/ui-react-liveness": "^3.1.11",
"aws-amplify": "^6.6.2"

[reesscot]

Hi @Tyg0th,
I'm unable to reproduce this issue using iOS 18 and Firefox 130.1. The browser is correctly prompting me for permissions on every load of the component.

Any other patterns of when this happens you can think of that might help us narrow this down?

[esauerbo]

@Tyg0th are you using http by any chance? Some browsers will block camera and microphone access on insecure origins. You could try printing navigator.mediaDevices to the console; if it's undefined it likely means camera access is blocked.

[paternina]

Hi @reesscot it fails intermittently sometimes ask for permissions and sometimes it does not, the only difference from our code and the one shared in the documentation is that we are using a check camera utility function before showing the component

 useEffect(() => {
      const checkCamera = async () => {
        const cameraExist = await detectWebcam();
        setDeviceHasCamera(cameraExist); // if false show an error message and does not load the component
      };
      checkCamera();
  }, []);

This is just a JavaScript function that check if customer have a camera.

export const detectWebcam = async () => {
    let md = navigator.mediaDevices;

    if (!md || !md.enumerateDevices){
        return false;
    }

    try {
        const devices = await md.enumerateDevices();
        return devices.some(device => device.kind === "videoinput"); 
    } catch (error) {
        console.error('Error enumerating devices: ', error);
        return false;
    }
};

It may responde your question @esauerbo , we are using https and we check the cameras using the above function.

As you may noticed, the FaceLivenessDetector component is loaded and is always showing the waitingCameraPermissionText script.

[thaddmt]

@paternina just for reference, we perform a similar check in the component to make sure that a customer has a valid video devices - https://github.com/aws-amplify/amplify-ui/blob/main/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/machine.ts#L961

However we also have a simple check for virtual cameras as the Rekognition services want to avoid the usage of virtual cameras when possible to help avoid fraud.

[paternina]

Hi @thaddmt

Thank you for the reference!

I’d like to clarify my understanding: it seems that this implementation only checks if the user has a virtual camera device and then throws an error. The error returned should be handled by the onError?: (livenessError: LivenessError) => void; method from the FaceLivenessDetectorCoreProps interface. If that's the case, we should be able to catch it in the dispatch, set it in the state, and the component should display a different error message on the screen rather than the one requesting permission, correct?

Additionally, please note that the FaceLivenessDetector component is being displayed but is always showing the "waiting for camera permission" text, so I am not sure if the issue is related to the detectCamera function.

To provide more context, the main issue we're encountering is that when customers visit our site for the first time using Firefox for Android and Firefox for iOS, it correctly requests camera access, and everything works as expected. However, on subsequent visits (the second or third time), the component fails to load even though permissions are granted. Currently, the only workaround is to clear all site permissions and start fresh.

[esauerbo]

@paternina the component throws an error if there are only non virtual cameras available, but it also checks for a few other constraints like frame rate and video width/height. Otherwise that's correct.

Are you still able to reproduce this behavior if you remove the detectWebcam logic? If so would you be able to share a reproduction repository with us?

[paternina]

Hi @esauerbo

Unfortunately I cannot share a public repository, it is a private work and company does not allow us to share it, but, the component is exactly like shared above, and I also shared the detectWebcam logic. I removed the detectWebcam logic and the issue persist, it request access to camera once, but subsequent visits do not request it.

[reesscot]

@paternina Can you share what you are using in the screenshot to debug?

Are you using the camera anywhere else in your app which might be preventing the Liveness component from using it? In the screenshot I see the log message "Stopping active stream on Back Triple Camera". The Liveness component doesn't support using the back cameras, on the forward/user facing cameras.