need help to use barcode scanner #26

jw-redpanda · 2021-03-26T07:56:27Z

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.

The text was updated successfully, but these errors were encountered:

tripodsgames · 2021-03-28T08:04:49Z

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");

jw-redpanda · 2021-03-28T13:49:44Z

Thanks @tripodsgames!

I tried out your clever way to show/hide the ionic pages that may block the barcode camera view.
It seems to me the code below cannot hide the ionic/angular pages... don't know if it is Angular that does not allow direct access to DOM... or I placed the CSS wrongly ...since I am also new to ionic..

document.body.classList.add("qrscanner");
document.body.classList.remove("qrscanner");

tripodsgames · 2021-03-28T19:08:01Z

You need to call this in the Javascript

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

Also put the css at the bottom of global.scss file

jw-redpanda · 2021-03-29T04:34:44Z

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:

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

"@capacitor/android": "^2.1.2",
"@capacitor/core": "2.1.2",

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

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

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>

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; }

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>

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
    }
  }

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>

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

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

tafelnl · 2021-03-29T10:49:09Z

Thanks for all the help guys. Will take a look if I can put this in the docs somewhere.

wurst44 · 2021-04-20T19:08:23Z

I am doing everything of the above.
I can scan barcodes but it does not seem to show an camera overlay which seems to exsist?

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

<div class="scanner-ui">
</div>

BarcodeScanner.hideBackground(); 
document.body.classList.add("qrscanner");
const result = await BarcodeScanner.startScan();
document.body.classList.remove("qrscanner");

global.scss:

.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; }

thx for your help!

tripodsgames · 2021-04-20T19:41:56Z

You need to create your own camera overlay using css and html inside the scanner-ui div.

https://github.com/capacitor-community/barcode-scanner/blob/main/examples/scan-area-layout/index.html

javatheist · 2021-04-22T00:24:46Z

@jw-redpanda I honestly appreciate all your effort. I'm convinced that your endeavour to improve the community's understanding was very beneficial from some developers' perspectives.
After all, I'd like to point out that - just from my point of view - there is no need to take steps 6 and 7. Keeping the AndroidManifest as is should be perfectly fine too.
My approach was to npm install Capacitor's CameraPreview and BarcodeScanner, add both of them to your index.ts. As soon as the CameraPreview plugin provides you with some sort of stream, the BarcodeScanner's async startScan works just fine. iOs and Android did their jobs right away. Just to complete things, I came up with a web interface of the BarcodeScanner which made use of pngjs, jsqr and a promise which processed a specific loop until resolve/reject.

Anyway, maybe you would like to have another go with your approach.

Regards, Peter

paulburz · 2021-05-14T20:48:09Z

https://www.youtube.com/watch?v=8GXfjDUCYjU
Here's an ionic example I used as well :)

tafelnl · 2021-05-27T13:57:52Z

Closing this issue since the docs are a little more elaborate now and also references this issue and #7

braincomb · 2022-01-19T20:21:24Z

Thanks @tripodsgames , this works great!

Since we are hiding the whole <body> tag, do you know if it's somehow possible to apply certain effects, e.g. blur() or opacity, to the whole scanner screen, but leave the centered box overlay normal?

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");

tripodsgames · 2022-01-20T14:34:32Z

Thanks @tripodsgames , this works great!

Since we are hiding the whole <body> tag, do you know if it's somehow possible to apply certain effects, e.g. blur() or opacity, to the whole scanner screen, but leave the centered box overlay normal?
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");

You have to find a way to blur the parent element without affecting the child.
I don't know how to do this :(

jkd2bleu · 2022-11-20T23:55:16Z

This worked perfectly for me https://github.com/Nykz/Ionic-6-qrcode

tafelnl added the documentation Improvements or additions to documentation label Mar 29, 2021

tafelnl mentioned this issue May 25, 2021

Capacitor 3 support #23

Closed

tafelnl closed this as completed May 27, 2021

djabif mentioned this issue Jan 21, 2022

Vanilla JS #101

Closed

DiogoParrinha mentioned this issue Jan 26, 2022

No exit button once camera is up and scanning. How can I cancel without scanning? #99

Closed

rbalet mentioned this issue Aug 31, 2022

Explain in the DOC what to find in the DOM, in case the camera doesn't show up #151

Closed

salazarbarrera mentioned this issue Sep 7, 2022

The UI doesn't show up in Android 8.1 (light mode, Capacitor 6, Ionic 4, Angular 14, WebView 70) #156

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

need help to use barcode scanner #26

need help to use barcode scanner #26

jw-redpanda commented Mar 26, 2021 •

edited

Loading

tripodsgames commented Mar 28, 2021

jw-redpanda commented Mar 28, 2021 •

edited

Loading

tripodsgames commented Mar 28, 2021 •

edited

Loading

jw-redpanda commented Mar 29, 2021 •

edited

Loading

tafelnl commented Mar 29, 2021

wurst44 commented Apr 20, 2021 •

edited

Loading

tripodsgames commented Apr 20, 2021

javatheist commented Apr 22, 2021 •

edited

Loading

paulburz commented May 14, 2021

tafelnl commented May 27, 2021

braincomb commented Jan 19, 2022

tripodsgames commented Jan 20, 2022

jkd2bleu commented Nov 20, 2022

need help to use barcode scanner #26

need help to use barcode scanner #26

Comments

jw-redpanda commented Mar 26, 2021 • edited Loading

tripodsgames commented Mar 28, 2021

jw-redpanda commented Mar 28, 2021 • edited Loading

tripodsgames commented Mar 28, 2021 • edited Loading

jw-redpanda commented Mar 29, 2021 • edited Loading

tafelnl commented Mar 29, 2021

wurst44 commented Apr 20, 2021 • edited Loading

tripodsgames commented Apr 20, 2021

javatheist commented Apr 22, 2021 • edited Loading

paulburz commented May 14, 2021

tafelnl commented May 27, 2021

braincomb commented Jan 19, 2022

tripodsgames commented Jan 20, 2022

jkd2bleu commented Nov 20, 2022

jw-redpanda commented Mar 26, 2021 •

edited

Loading

jw-redpanda commented Mar 28, 2021 •

edited

Loading

tripodsgames commented Mar 28, 2021 •

edited

Loading

jw-redpanda commented Mar 29, 2021 •

edited

Loading

wurst44 commented Apr 20, 2021 •

edited

Loading

javatheist commented Apr 22, 2021 •

edited

Loading