Conflicts using both ‘QR Scanner’ and ‘Google Maps’ cordova plugins in same iOS app?

[bvoiturier]

I’m trying to use both qr-scanner & google-maps cordova plugins in the same iOS application.

They both work pretty well when used alone but give issues when mixed in the same application.

The problem is; After a cold start of the application, I first move to a map view where the map is displayed correctly. I then move to a QR scan view where the Camera stream is displayed correctly. No issue until now. However, if I go back to the map view, the Camera stream is displayed instead of the map. Even if the ‘googleMaps.create()’ is successful and the ‘MAP_READY’ event is received.

As far as I known, both plugins use the same mechanism of rendering the native view (Camera or Google Map) behind the Cordova WebView and make it visible through HTML transparency. Could this be the problem? Apparently QR scanner view is interfering with the Google Map one…

[itshu]

my ios app can't preview camera，what did you do?

[bvoiturier]

You have to make sure that all DOM elements ancestor of the view where you want to display the camera have style="background none transparent" defined. The iOS native camera view is inserted by the plugin behind the cordova web view and you therefore need this in order for it to be visible from your app view...

[reliy0n]

I have same problem. When I start the qr-scanner, google-maps is disappear.

[cgodley]

@bvoiturier @reliy0n Making the change below fixes the problem for me. So it seems that the cameraView is being inserted above the map and this causes the problem.

Not sure if there's a good reason the camera is being inserted directly below the webView or if using at: 0 is acceptable for people who aren't using the Google Maps plugin.

QRScanner.swift, line 133:

- self.webView!.superview!.insertSubview(cameraView, belowSubview: self.webView!)
+ self.webView!.superview!.insertSubview(cameraView, at: 0)

[cgodley]

Actually, it seems I had other changes in my working copy. It turns out that the minimal solution was to replace all of the code (in both plugins) that makes the webView background color white / opaque with code that makes the webView background color clear / not opaque.

I'll post the diff once I'm sure it's working correctly.

[cgodley]

Making the change below seems to fix the problem for me (no change was needed to the google maps plugin):

--- a/src/ios/QRScanner.swift
+++ b/src/ios/QRScanner.swift
@@ -129,7 +129,7 @@ class QRScanner : CDVPlugin, AVCaptureMetadataOutputObjectsDelegate {
         }
         do {
             if (captureSession?.isRunning != true){
-                cameraView.backgroundColor = UIColor.white
+                cameraView.backgroundColor = UIColor.clear
                 self.webView!.superview!.insertSubview(cameraView, belowSubview: self.webView!)
                 let availableVideoDevices = AVCaptureDevice.devices(withMediaType: AVMediaTypeVideo)
                 for device in availableVideoDevices as! [AVCaptureDevice] {
@@ -195,8 +195,8 @@ class QRScanner : CDVPlugin, AVCaptureMetadataOutputObjectsDelegate {
     }

     func makeOpaque(){
-        self.webView?.isOpaque = true
-        self.webView?.backgroundColor = UIColor.white
+        self.webView?.isOpaque = false
+        self.webView?.backgroundColor = UIColor.clear
     }

     func boolToNumberString(bool: Bool) -> String{

Perhaps it makes sense to add a configuration option to give users the choice between a white/opaque background and a clear/non-opaque background.

[sergiomedinavalentin]

I have the same problem on android and ios. Any solution without changing the plugin code? Please help!

[cgodley]

@sergiomedinavalentin Since QRScanner is adding an opaque white layer that is obscuring the map, I'm not sure how it would be possible to fix without changing the plugin code.

If you want an example you can look at the fork I made: https://github.com/cgodley/cordova-plugin-qrscanner. Note that if you build the plugin and include the built files in git [see my fork] you'll be able to add the plugin directly into cordova by giving the git repo URL.

NOTE: I wouldn't recommend pointing directly to my fork since I don't have a plan for maintaining it.

[cgodley]

@sergiomedinavalentin I think you need to specify .git at the end. For example: cordova plugin add https://github.com/apache/cordova-plugin-console.git. Otherwise perhaps it is related to Ionic (I'm not familiar with it) or perhaps you have platforms other than Android and iOS?

[vosecek]

@cgodley thanks, it is possible to push this fix to master repository?

[Cirivas]

I am facing the same Issue. This happens on ANDROID too. There is a solution without the need of recompiling the plugin by myself ?

[sergiomedinavalentin]

@vosecek @Cirivas the last month I launched a pull request with the fix, but I think the repo is abandoned...

[alextapia007]

@sergiomedinavalentin gracias. Tu branch trabajo excelente

[bitjson]

Fixed in 2.6.0 🚀