Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

need help to use barcode scanner

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

jw-redpandacommented, Apr 1, 2021

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
└── dutchconcepts
    └── capacitor
        └── barcodescanner
  1. edit tutorial-photo-gallery-angular/android/app/build.gradle (only added those indicated below)
repositories {
    // add below
dependencies {
   // add below
    implementation('com.journeyapps:zxing-android-embedded:4.1.0') { transitive = false }
    implementation ''

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

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 {
  public void onCreate(Bundle savedInstanceState) {

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

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

+   xmlns:tools=""

+        android:hardwareAccelerated="true"

+    <uses-sdk tools:overrideLibrary="" />
  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">

<div class="scanner-ui">
  ...Scanner Interface
  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/
  <ion-fab vertical="top" horizontal="center" slot="fixed">
    <ion-fab-button (click)="photoService.startScan()">
      <ion-icon name="camera"></ion-icon>

  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.

tripodsgamescommented, Mar 28, 2021

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

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

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:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Barcode Scanner Tutorial - YouTube
Using a Barcode Scanner with Mecmesin Test Stands.
Read more >
Barcode Scanner App- QR Code Reader for Android - YouTube
This video demonstrates an app that can be used as a QR code and barcode reader and scanner. Using this QR and Barcode...
Read more >
Android 101: How To Scan / Use a QR Code - YouTube
So maybe you've seen one of these square barcodes that have a bunch of dots in them somewhere and wondered, "What the hell...
Read more >
A Quick Lesson On Barcode Scanner Basics - YouTube
Barcode scanner introduction by POSGuys. We show the basic differences between a Contact Scanner, a Laser Scanner, and an Imager.
Read more >
How to Use Barcode Scanner for iPhone and iPad - YouTube
In this tutorial you will learn how to use Barcode Scanner for iPhone. Don't forget to check out our site for more...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found