Decode QR Code in Browser

Hi All,

I’ve been unable to use Ionic’s BarcodeScanner

import { BarcodeScanner } from 'ionic-native';

...

BarcodeScanner.scan().then((barcodeData) => {
   // Success! Barcode data is here
}, (err) => {
    // An error occurred
});

I’ve also tried JSQRCode and Quagga packages.

Can you provide insight to getting a QR code reader working in Ionic 2 in the browser? I have control of the camera and canvas, but I can’t find a way to feed the canvas into a library for decoding the QR code.

Thank,
Ryan

@rapropos have you ventured out to use any QR libraries? Thanks!

Actually, the result object of scan() has already the decoded text in it - see Josh’s answer here for instance:

Hi @infoteam,

I should have mentioned that I’m trying to use a barcode scanner in the browser instead of iOS/Android.

ionic serve seems to stop some cordova plugins, even after reinstalling cordova. Here’s the error I get:

Native: tried calling BarcodeScanner.scan, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Scanning failed: cordova_not_available

Hi! I have had the same error. Have you been able to make it works @ryanlogsdon?

Generally speaking, cordova plugins only work on devices, not in browsers.

yes that’s correct but in the Docs on the Supported Platforms there is the Browser


That’s not the same thing as ionic serve. That requires you to actually go through the cordova build process for the browser platform.

1 Like

check out this plugin https://github.com/bitpay/cordova-plugin-qrscanner#browser
and then use
ionic cordova platform add browser
ionic cordova build browser

Hi Ryan - I know this thread is a year old, but I wanted to respond in case it would be helpful to someone else!

Shameless plug: Scandit has a barcode scanning library for the browser that uses WebAssembly. Here’s a demo and a signup link!

1 Like

@maiya thanks for the link!! great demo!!

Hello @ryanlogsdon (and everyone)
Did you manage to make this work on browser?

I searched the forum for this topic and couldn’t find it, so I started a new thread about what it meant for a plugin when it states “compatible with browser platform”, but it is basically the same issue (because it is the QR Scanner plugin), and I came accross this thread just now…

ShamelessPlug:Scandit is a subscription service… That’s not really a good solution… :-S

I have been trying this pure HTML5/JS solution and it works on a standalone webpage (see test demo here) but I am having troubles integrating it into Ionic3 (because of jQuery and its JS files not being loaded before anything else).

Hope to rekindle some fire on this topic! :slight_smile:

1 Like