Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IOS, React, FaceLivenessDetector] Video overlaps other controls #5757

Closed
4 tasks done
duck-duckfield opened this issue Sep 6, 2024 · 2 comments
Closed
4 tasks done
Labels
Liveness pending-maintainer-response Issue is pending response from an Amplify UI maintainer

Comments

@duck-duckfield
Copy link

duck-duckfield commented Sep 6, 2024

Before creating a new issue, please confirm:

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?

iOS (React Native)

Which region are you seeing the problem in?

No response

Please describe your bug.

FaceLivenessDetector on static React page opened thru WebView on IOS. Normally we should see standard controls and labels and transparent oval in the screen center allowing to see live video from camera, and it works fine on Android. But on IOS video is presented in the top of other html elements and controls, making it impossible, in particular, to press the button "Start Video Check"

What's the expected behaviour?

We should see the video only inside the oval area

Help us reproduce the bug!

Steps to reproduce the behavior:

  1. Open a page with on IOS thru WebView
  2. See the video occupies the whole screen overlapping all other controls

Code Snippet

<ThemeProvider>
  <FaceLivenessDetector
    sessionId={sessionId}
    region="eu-west-1"
    onAnalysisComplete={handleAnalysisComplete}
    onError={handleError}
  />
</ThemeProvider>

Console log output

No response

Additional information and screenshots

No response

@duck-duckfield
Copy link
Author

Solution appeared to be very simple.

<WebView
  ...  
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
  mediaCapturePermissionGrantType="grant"
  ...
/>

Maybe it will help someone.

@jordanvn jordanvn removed the pending-triage Issue is pending triage label Sep 19, 2024
@Callmedoziee
Copy link

@duck-duckfield thank you for this solution, been battling this for some time now and I tried to result to using expo native modules but wasn't having much luck. There are still minor bugs in this web part especially when the user cancels the verification. Did you experience this as well?

@github-actions github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Liveness pending-maintainer-response Issue is pending response from an Amplify UI maintainer
Projects
None yet
Development

No branches or pull requests

4 participants