Overlay over Zbar scanner

Ionic Framework ionic-v3
1

I want to have a custom overlay over the Zbar scanner.

Basically, I have this code in the “scan” page constructor:

ZBar.scan(zBarOptions)
      .then(result => {
           // do stuff with result
      })
      .catch(error => {
           alert("error: \n" + error);
      });

It starts the ZBar scan plugin. I want to have an overlay over the page (some text, button and logo). It’s apparently not as easy as having a div with a higher z-index.

I’ve read some similar questions but found no anwsers. Is there an ionic-only solution? Or do I need to dive in the plugin’s source code (something I’d rather not do).

Thanks

2

Can you provide some links to the plugin/code you are using to implement this? Then maybe we can look into it and help you find a solution.

3

I’m using the native Ionic Zbar plugin:

cordova-plugin-cszbar 1.3.1 "ZBar barcode scanner"

4

Ok, so Ionic Native - ZBar and GitHub - tjwoon/csZBar: Cordova plugin to integrate with the ZBar barcode scanning library..

Problem is that the plugin is opening a native camera “widget” where you can’t just put HTML stuff on top. You would probably have to go into the native code of the plugin to make changes here, then add these new params to the JS code of the plugins so you can send in your values that should be used.