Add a close button in native barcode scanner

1
votes

I am trying to create a barcode scanner app, so i followed this link in ionic it woks fine but i need a close button on the camera screen so that i can close the camera if its not necessary could someone help me with this

my ionic info Ionic:

ionic (Ionic CLI) : 4.1.2 Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.1 ([email protected]) Cordova Platforms : android 7.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 10 other plugins)

System:

NodeJS : v8.12.0 npm : 6.4.1

phonegap-plugin-barcodescanner 8.0.0 "BarcodeScanner"

2
androidangularcordovaionic3barcode-scanner
Take plugin clone from github and start modifying it for android and iOS platform - Paresh Gami
could you share more details about modifying the plugin @PareshGami - Yokesh Varadhan
Haven't used this one. I'm using phonegap-plugin-qrscanner, it launches scanner below the web view so you can put custom html elements on top of it. Perhaps this one works similarly. - somerandomusername
@YokeshVaradhan Cannot explain all here. You need to do native code in JAVA/Android and for iOS objective-c probably. - Paresh Gami

2 Answers

1
votes

Customize phonegap-plugin-barcodescanner

in project root directory...

1- create directory and clone plugin

$ mkdir customPlugins

$ cd customPlugins

$ git clone https://github.com/phonegap/phonegap-plugin-barcodescanner.git

$ cd ..

2- Remove older plugins

check if phonegap-plugin-barcodescanner is in plugins, also remove possible older references in config.xml or package.json.

$ ionic cordova plugin rm phonegap-plugin-barcodescanner

3- Add plugin

$ ionic cordova plugin add './customPlugins/phonegap-plugin-barcodescanner/'

4- run in device to check that is working.

How to customize camera overlay in Android

Here is the link to the Android barcode scanner repository: phonegap-plugin-barcodescanner -> src -> android -> README

1 - Clone repository

https://github.com/EddyVerbruggen/barcodescanner-lib-aar and open it in android studio

Camera Overlay layout is capture.xml in res -> layout folder and it's controller is CaptureActivity.java in java -> client -> android.

2- Do whatever you want... & Generate your new Library

go to root project folder -> barcodescanner -> build -> outputs -> aar -> delete folder or content

go to gradle tools window (usually top right corner of android studio) and get execute task build

barcodescanner-lib-aar -> barcodescanner -> Tasks -> build (double click)

3- Open new generated aar file (barcodescanner-release.aar)

barcodescanner -> build -> outputs -> car

4- Go to ionic project and find barcodescanner-release-2.1.5.aar in customPlugin/phonegap-plugin-barcodescanner...

change barcodescanner-release.aar name to barcodescanner-release-2.1.5.aar and replace it in customPlugin/...

5- remove old plugin

$ ionic cordova plugin rm phonegap-plugin-barcodescanner and re add it again

$ ionic cordova plugin add './customPlugins/phonegap-plugin-barcodescanner/'

6- Check if everything it's working again (maybe have to remove platforms and add them again)

For iOS is you can refer this link

https://forum.ionicframework.com/t/how-to-change-barcode-scanner-overlay-img-when-scanning/86095

0
votes

[Android] The way you can close the scanner is by pressing the back button on the device:

constructor(public platform: Platform) {
 this.platform.registerBackButtonAction(() => {
  this.navCtrl.pop();
 });
}