need help to use barcode scanner

I am new to capacitorjs and trying out your plugin BarcodeScanner.

Followed the instructions, defining build.gradle, adding BarcodeScanner.class in MainActivity. Also, run ‘ionic build; ionic cap copy; ionic cap sync’ and then re-compile and run on Android device. In the Ionic App, I have a service providing startScan() function that will be trigger by a user click:

  public startScan = async () => {
    console.log(`here in startScan()`);
    // const { BarcodeScanner } = Plugins;
    BarcodeScanner.hideBackground(); // make background of WebView transparent
    const result = await BarcodeScanner.startScan(); // start scanning and wait for a result
    // if the result has content
    if (result.hasContent) {
      console.log(result.content); // log the raw scanned content
    }
  }

However, it seems it has no function at all. After clicked and called the function, it has no scanning window popped. Can anyone help to give me some hints? Thanks.

[jw-redpanda]

Your help is superb @tripodsgames! you saved me from the middle of the sea 😁😎

For those who are newbies trying out this plugin, on top of the Ionic/Angular tutorial. The detailed steps:

1. clone the repo
2. cd tutorial-photo-gallery-angular
3. edit package.json because of an Andriod studio 4.x issue.

“@capacitor/android”: “^2.1.2”, “@capacitor/core”: “2.1.2”,

1. npm install
2. npm install @capacitor-community/barcode-scanner
3. copy from here and create a java file under tutorial-photo-gallery-angular/android/app/src/main/java

'com
└── dutchconcepts
    └── capacitor
        └── barcodescanner
            └── BarcodeScanner.java

1. edit tutorial-photo-gallery-angular/android/app/build.gradle (only added those indicated below)

repositories {
    // add below
    mavenCentral()
}
dependencies {
   // add below
    implementation('com.journeyapps:zxing-android-embedded:4.1.0') { transitive = false }
    implementation 'com.google.zxing:core:3.3.0'
}

Edit tutorial-photo-gallery-angular/android/app/src/main/java/io/ionic/pg/ng/cap/MainActivity.java, add lines as indicated.

package io.ionic.pg.ng.cap;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;

// add this line
import com.dutchconcepts.capacitor.barcodescanner.BarcodeScanner;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Add this line
      add(BarcodeScanner.class);
    }});
  }
}

Edit android/app/src/main/AndroidManifest.xml according, add the lines indicated by leading “+”

<manifest 
+   xmlns:tools="http://schemas.android.com/tools"
    package="io.ionic.pg.ng.cap">

    <application
+        android:hardwareAccelerated="true"
    </application>

+    <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

1. Follow instructions suggested by @tripodsgames: Edit tutorial-photo-gallery-angular/src/global.scss, add these lines

.scanner-ui { display: none; }
.scanner-hide { visibility: visible; }

body.qrscanner { background-color: transparent; }
body.qrscanner .scanner-ui { display: block; }
body.qrscanner .scanner-hide { visibility: hidden; }

1. Edit tutorial-photo-gallery-angular/src/app/app.component.html

<ion-app  class="scanner-hide">
  <ion-router-outlet></ion-router-outlet>
</ion-app>

<div class="scanner-ui">
  ...Scanner Interface
</div>

1. Add a startScan() function to photo services. edit tutorial-photo-gallery-angular/src/app/services/photo.service.ts

  // add a function to trigger barcode scanning
  public async startScan() {
    // const { BarcodeScanner } = Plugins;
    BarcodeScanner.hideBackground(); // make background of WebView transparent
    document.body.classList.add("qrscanner"); // add the qrscanner class to body
    const result = await BarcodeScanner.startScan(); // startscan
    document.body.classList.remove("qrscanner"); // remove the qrscanner from the body    
   
    // if the result has content
    if (result.hasContent) {
     console.log(`barcode scanning result=${result.content}`); // log the raw scanned content
    }
  }

1. Add a top FAB button on tab2 to invoke barcode capacitor plugin Edit tutorial-photo-gallery-angular/src/app/tab2/tab2.page.html

  <ion-fab vertical="top" horizontal="center" slot="fixed">
    <ion-fab-button (click)="photoService.startScan()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>

1. when all edits are done. ionic cap sync
2. compile and run on an Android device

Hope the above would provide some hints in getting started to use capacitorjs.

[tripodsgames]

You need to hide every element on your document. I implemented in the follow way using css and js:

.scanner-ui { display: none; }
.scanner-hide { visibility: visible; }

body.qrscanner { background-color: transparent; }
body.qrscanner .scanner-ui { display: block; }
body.qrscanner .scanner-hide { visibility: hidden; }

I made the scanner interface inside a div with .scanner-ui class to hide it when the scanner is not enabled. Then i put the .scanner-hide class in my <ion-app> to hide the view when the scanner is enabled.

App Component HTML:

<ion-app class="scanner-hide">
...App View
</ion-app>

<div class="scanner-ui">
...Scanner Interface
</div>

When the scanner is open i added the .qrscanner class to the <body>, this will make the interface visible and the <ion-app> invisible.

To add or remove the .qrscanner class:

//ADD
document.body.classList.add("qrscanner");
//REMOVE
document.body.classList.remove("qrscanner");