Hello,
We are trying to use the Embedded Scanner Plugin in an ODC mobile app where we aim to achieve an UI for a QR Code scanning screen where we still show the full app layout (bottom bar, header, navigation, etc) with an embedded camera square for the scanning, hence the choice for this plugin.
For the plugin to work, we had to:
Now, we have implemented the screen with the intended UI and it works as expected for Android (Cordova and Capacitor) and for iOS Cordova, but not for iOS Capacitor builds - it still scans and functions well but the camera preview isn't visible in the screen, we see the app background color instead.
We have already debugged with a few iOS devices and we made sure the transparency issue wasn't in our theme (it's fully transparent) thus we concluded that the issue is either due to some broken plugin dependency on version 3.1.4 for this scenario or the WebView not being truly transparent in the iOS Capacitor builds.
We have opened an OutSystems support case to see if they can help us with the iOS Capacitor build webview part, but can you help us check if there's anything we can do on the plugin side to make this work?
Thanks in advance!
Best regards,
Tomás Rocha
Hi, if you couldn't make it with plugin,
you can use JS library like qr html5, read the camera on web browser.oml sample is in the attachment.
Based on the behavior you described, the issue appears to be more related to how Capacitor handles the iOS WKWebView transparency layer rather than the QR plugin itself. Since the scanner works correctly on Android (Cordova and Capacitor) and also on iOS Cordova, but the preview is not visible only on iOS Capacitor, it usually means that the camera is running correctly behind the WebView but the WebView is not truly transparent in Capacitor builds. Even if the theme transparency is correctly configured, the native WKWebView may still require properties such as isOpaque = false and background colors set to transparent at the native layer level. It may also be worth validating whether the updated cordova-plugin-qrscanner-extended version 3.1.4 changed the way the preview layer is attached in iOS Capacitor builds. Additionally, checking the native view hierarchy and z-index behavior could help confirm whether the preview layer is being rendered behind another native container. As a troubleshooting step, you could also test the scanner in a minimal screen without headers or bottom navigation to isolate any layout-related rendering conflicts. From the symptoms, your assumption about a Capacitor iOS WebView transparency/layering limitation seems very likely.