Is it possible to open the scanner in a modal?

[loicparent]

Hello,

I currently use the barcode scanner of ionic native. But I want to change to something new because this ionic-native package use a Phonegap dependency that is not maintained.

So I look over this Capacitor Community package but after testing, I wonder if this is possible to open it inside a modal?
Is it also possible the customize the render of the scanner (ex: add a frame in the center)?

For my information, could your tell me what is the advantages to use this tool instead of an angular package (ex: https://github.com/zxing-js/ngx-scanner)? The permissions?

Thanks and have a nice day,
Loïc

[thegnuu]

@loicparent This is "not" possible by design and how capacitor works. This plugin will always render the camera view behind the webview for multiple reasons. You might be able to create something that looks like a modal with some really specific CSS tricks, but since you will not have the camera view represented in the DOM, doing this in the way you imagine will not be possible.

Using a native plugin delivers better performance and a way better detection rate than for example zxing-js, especially with the upcoming release which uses ML-Kit. Permission handling is another reason as well as you already implied.

If you really need a modal I would suggest you to use a plugin that uses WebAssembly or native web detection, like https://github.com/undecaf/barcode-detector-polyfill. This should allow you to add your camera to the DOM and will deliver better results than zxing-js as well. If you want the best possible performance you might want to stick to this plugin an rethink your UI ;)

[loicparent]

Hi @thegnuu,

Thanks for your reply :)

I understand and I would prefer using the Capacitor package but I don't arrive to set this one to make it works and the documentation seems to be outdated.

Actually, I see that there is a lot of changes in the mothods and the configuration.

Do you have a recent example with this plugin?

(I just need a simple plugin that allow the user to automatically scan 1 type of QR Code to get a specific parameter in the URL).

Kind regards,
Loïc

[thegnuu]

Please check out the ml-kit branch, the docs are minimal at the moment, but up2date at least. Basically, the only thing you need is BarcodeScanner.requestPermissions() and BarcodeScanner.start({}, (result) => {}). After this you just need to verify that all of your DOM elements are transparent and you should be good to go ;)

[thegnuu]

The branch is available as pre-release on npm :) v5.0.0-beta.1