Using the QR Scanner Ionic Native plugin on browser platform

Hello everyone.

I am kind of a rookie developping in Ionic3/angular4, so please indulge me if this question seems dumb.
I have been trying to create a browser mobile app to read QR codes. I know there is a Ionic Native plugin for QR scanning, but I am seriously struggling to make them work on browser (not compiled as an Android or iOS app).

I followed the instructions, but nothing happens on the browser (no camera request, no preview…).
When the Ionic Native plugins states Browser compatibility, does it mean it works on platform browser?

I am a little confused about the usage, and I don’t want to compile an app (the whole point was to create PWA-like app, that would not require any installation).

If anyone with some experience could shed some light, I would really appreciate it! I cannot find many examples or posts about the browser platform…

Thank you!

Hello @cesarmiguel85,

Ionic native plugins only work when inside a build (iOS, Android).
When the Ionic Native plugins states Browser compatibility, it means compatible with the other Native plugin (inAppBrowser in this case, a pretty much useless native plugin).

Hope it helps!

Thank you for your reply @FrancoisIonic

But I am confused: why is there the option to build for platform “browser”. I understand the native plugins would not work with ionic serve, but they should with ionic cordova build browser, right?
I thought this was the way to create PWA-like apps. Not all plugins were compatible with the platform browser, since browsers do not allow access to all native features (like bluetooth, for ex.), but they can access the camera (which is the only hardware needed for the QR scanner).

This is kind of disappointing and misleading about the “browser” platform… :-S

In the meanwhile, I will try to bypass this using pure HTML5/JS qr scanner, but I think I will have some troubles because they usually rely on jquery and their own js libraries (not integrated into ionic). I will make a new post in the forum if I get stuck…

I have been messing around with the plugin on browser platform, and it seems quite messed up…
The prepare method takes like 10 seconds (which is unacceptable), but eventually, it fires up the “allow webcam” message, and then it takes 20 more seconds to start the camera.
The preview is not shown and is kept below the ion-app, you need to manually set it to display:none (or equivalent) to show it. And it doesn’t seem to recognize the qr codes I show it.

Anyway, I would remove the “browser” platform compatibility from the QR Scanner plugin… It is not there yet, by far :-S

I am turning towards a pure JS QR code reader (with other problems that arise from doing so,check thread here).

If someone has a suggestion about the usage of QR Scan native plugin on browser, I will galdly take it. But it seems a rather recurring topic with no solution as of yet (here or here for example).
In the meantime I will try the pure HTML5 solution…

Thank you all!

1 Like