Barcode scanner with capacitor electron on Windows 10

@jwallmueller wrote:

Hi,

I’m currently building an electron app with capacitor which needs to run on Windows 10 tablets.

This app needs to be able to scan QR codes. I’m trying to achieve that with the barcode scanner plugin.
Calling scan() on the barcode scanner always fails with the message “cordova_not_available” also when running the packaged app on a Windows 10 tablet (Surface Pro in that case).

I installed it like so:

npm install @ionic-native/barcode-scanner
npm install phonegap-plugin-barcodescanner
npx cap sync

Here are the dependencies from package.json:

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@capacitor/core": "1.1.0",
    "@ionic-native/barcode-scanner": "^5.10.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "@mdi/font": "^3.8.95",
    "@swimlane/ngx-datatable": "^15.0.2",
    "core-js": "^2.5.4",
    "gsap": "^2.1.3",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "rxjs": "~6.5.1",
    "stream": "0.0.2",
    "three": "^0.106.2",
    "timers": "^0.1.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@capacitor/cli": "1.1.0",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/greensock": "^1.15.32",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },

The relevant parts from app.module.ts:

[...]
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
[...]
@NgModule({
  declarations: [
    [...]
  ],
  entryComponents: [
    [...]
  ],
  imports: [
    [...]
  ],
  providers: [
    BarcodeScanner,
    [...]
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and the implementation:

[...]
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
[...]

@Component({
  [...]
})
export class InstructionPage implements OnInit {
  [...]

  constructor(private barcodeScanner: BarcodeScanner) { }

  ngOnInit() {
    [...]
  }

 [...]

  scan() {
    this.barcodeScanner.scan()
    .then(data => console.log(data))
    .catch(error => console.error(error));
  }

  [...]
}

I build the app with

ng build -c production --base-href ./
npx cap copy

and package it with

electron-packager . --platform=win32 --overwrite

Here is the content from the package.json in the electron folder:

{
  [...]
  "main": "index.js",
  "scripts": {
    "electron:start": "electron ./"
  },
  "dependencies": {
    "@capacitor/electron": "^1.1.0",
    "electron-is-dev": "^1.1.0"
  },
  "devDependencies": {
    "electron": "^4.0.0"
  },
  "keywords": [
    "capacitor",
    "electron"
  ],
  "author": "",
  "license": "ISC"
}

and the capacitor config:

{
  "appId": "...",
  "appName": "...",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www"
}

Do you know how to get this plugin to work or how to achieve the scan another way?

Best regards

Posts: 1

Participants: 1

Read full topic