Ionic Barcode Scanner fires a text prompt instead of camera in browsers

#1

I’am developing a project with Ionic 3 and i added the Barcode scanner plugin to read QR codes.
It works fine in Android devices, but in browsers it fires a text prompt instead of my pc camera:

I already added the browser platform, and i’m running with ‘ionic cordova run browser’.
No errors are being logged in console:

adding proxy for Contacts  cordova.js:1010:9
adding proxy for Device  cordova.js:1010:9
adding proxy for SplashScreen  cordova.js:1010:9
adding proxy for StatusBar  cordova.js:1010:9
adding proxy for BarcodeScanner  cordova.js:1010:9
adding proxy for Camera  cordova.js:1010:9
deviceready has not fired after 5 seconds.  cordova.js:1051:9
Channel not fired: onDOMContentLoaded  cordova.js:1044:13
Channel not fired: onCordovaInfoReady  cordova.js:1044:13
StatusBar is not supported  StatusBarProxy.js:23:5
Ionic Native: deviceready event fired after 4506 ms

Ionic version: 3.3.0

I added the Camera plugin to test it, and it works fine…

Here is my package.json:

{
    "name": "",
    "author": "",
    "homepage": "",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/animations": "^4.0.3",
        "@angular/common": "4.0.0",
        "@angular/compiler": "4.0.0",
        "@angular/compiler-cli": "4.0.0",
        "@angular/core": "4.0.0",
        "@angular/forms": "4.0.0",
        "@angular/http": "4.0.0",
        "@angular/platform-browser": "4.0.0",
        "@angular/platform-browser-dynamic": "4.0.0",
        "@ionic-native/barcode-scanner": "^3.10.3",
        "@ionic-native/camera": "^3.10.3",
        "@ionic-native/contacts": "^3.10.2",
        "@ionic-native/core": "^3.8.0",
        "@ionic-native/splash-screen": "3.4.2",
        "@ionic-native/status-bar": "3.4.2",
        "@ionic-native/unique-device-id": "^3.8.0",
        "@ionic/storage": "^2.0.1",
        "angular2-uuid": "^1.1.1",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-contacts": "~2.3.1",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-splashscreen": "~4.0.1",
        "cordova-plugin-statusbar": "2.2.1",
        "cordova-plugin-uniquedeviceid": "~1.3.2",
        "cordova-plugin-whitelist": "1.3.1",
        "ionic-angular": "3.0.1",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "moment": "^2.18.1",
        "ng2-translate": "^5.0.0",
        "ng2-validation": "^4.1.0",
        "phonegap-plugin-barcodescanner": "~6.0.4",
        "rxjs": "5.1.1",
        "sw-toolbox": "3.4.0",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.0",
        "@ionic/cli-plugin-cordova": "1.3.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.0",
        "typescript": "~2.2.1"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "cordova-plugin-camera",
        "phonegap-plugin-barcodescanner",
        "ionic-plugin-keyboard",
        {
            "locator": "https://stash.matera.com/scm/pagmovel/cordova-plugin-pagmovel.git",
            "id": "cordova-plugin-pagmovel"
        }
    ],
    "cordovaPlatforms": [],
    "description": "MATERA Quickstart Banco Digital: Seu banco a um passo do futuro",
    "cordova": {
        "platforms": [
            "android",
            "browser"
        ],
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-uniquedeviceid": {},
            "cordova-plugin-camera": {},
            "phonegap-plugin-barcodescanner": {},
            "cordova-plugin-contacts": {}
        }
    }
}

Can anybody help me? Tks

#2

Looking at the source for the browser part of the Barcode Scanner plugin, that’s just how it’s written. If you want it to utilize a camera then you’ll have to code it to do so, or see if you can’t rget the maintainer of the project to do so.

#3

In the plugin documentation they claim to support browser. By that i thought it would SCAN a barcode with the camera, not ask to enter the code manually… It’s very desapointing, since i will have one plugin for the APP and another one for the PWA.
Anyway, does anybody knows a good angular 2 barcode scanner?

#4

I’m going through the same situation. Have you found any alternative plugins?

#5

The Cordova plugin is open source - feel free to implement the feature you are missing and submit a PR to them. They will be happy to accept this.