-
-
Notifications
You must be signed in to change notification settings - Fork 508
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
mobile_scanner overlay on iOS webview #1174
Comments
@juliansteenbakker @navaronbracke Please help |
I wonder, are the media controls shown because we do not set extra options on the video element? We probably need to provide additional configuration as specified in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video but I'm not sure what we should set yet. Does adding |
So I did a bit of digging. Apparently this bug might exist because, the We might need to do something like
|
Sorry, I mean if you inspect the WKWebView (you'll have to set it to inspectable on iOS 16.4+) and then view the I provided similar guidance on using the inspector in #950 (comment) |
I'm going to try and see if I can reproduce this locally with a standalone iOS app that loads mobile scanner in a WKWebview, using the locally built web version as a bundle resource for the webview and load it using the MainBundle |
i have not added any specific attributes to the ios webview `import UIKit class ViewController: UIViewController, UITextFieldDelegate, WKNavigationDelegate, WKUIDelegate {
} ` this is my swift code created for testing purposes |
Your actual Swift / HTML code is irrelevant. Have you inspected the HTML that is loaded in the WKWebview, using the steps from #950 (comment) ? I'll need to see how the video element is loaded in the webview, maybe the webview adds some extra attributes to the video tag, that we should turn off. |
Aha, we have the |
Great, will i have to update it to the newer version of mobile_scanner or can i fix it in the version which I am using ? |
If you are already using version 5.x, you will have to migrate to 5.2.3. I don't think we have a policy of backporting fixes to earlier releases. |
I am using the version 3.4.1, Can i inject the script into the webview via wkwebview ? 🥲 |
You might be able to use a CSS rule to hide the controls? |
@navaronbracke I upgraded the mobile_scanner plugin to 5.2.3 but still seem to face the issue . |
Hmm, is that media controls container added by the webview? The controls property isn't there anymore |
The controls seem to get removed once a qr code is scanned , but reappears again after restarting the app |
The properties https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback and https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1851524-mediatypesrequiringuseractionfor - which you linked from that comment in that React Native issue - will need to be set in the webview configuration. We can only provide documentation for that, as we do not control webviews in this plugin. For example |
Do you mean that the |
I added both the inlinemediaplayback = true and mediaTypesRequiringUserActionForPlayback = [] on my ios webview , still nothing . |
Yes |
Sorry, is it
or
after an app restart |
This same element reappears |
@AnikethFitPass The iOS Simulator has no camera. Likewise, the Android emulator has a "fake" camera preview (it provides a fixed 3D scene in the viewfinder). So running on a real device is the only "supported" method. |
Description:
I'm experiencing an issue where the mobile_scanner widget (version 3.4.1) displays an unexpected overlay when used within an iOS webview integrated into a native iOS app.
This overlay contains controls such as pause/play, mute, a cross button, and a "Live" label at the bottom.
The website works correctly on Safari, Chrome, and Android webviews, suggesting the issue is specific to iOS webviews.
Steps to Reproduce:
Integrate a website containing a mobile_scanner widget into an iOS native app using a webview.
Run the iOS app and attempt to use the mobile_scanner widget.
Expected Behavior:
The mobile_scanner widget should function normally within the webview without any overlay.
Actual Behavior:
An overlay with multimedia controls appears on top of the mobile_scanner widget, interfering with its functionality.
Additional Information:
The issue persists even after upgrading to the latest versions of mobile_scanner.
The problem only occurs within iOS webviews, not on Safari, Chrome, or Android webviews.
The below shown screen is what I am experiencing
The below shown screen is the expected
The text was updated successfully, but these errors were encountered: