How to change barcode scanner overlay img when scanning?

Ionic Framework ionic-v3
1

barcode-scanner will show a background when scanning. but the green square with red line on ios looks so ugly. anyone know how to replace it use a png image ?

2

Please provide a link to the version of the “barcode scanner” you are using. Ionic Native? Which plugin? Which version of the plugin?

3 
"phonegap-plugin-barcodescanner" : "6.0.6",
"@ionic-native/barcode-scanner": "3.4.4",
ionic-angular:2.2.0

sorry~ i forgot

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1 Build version 8C1002
4

So https://ionicframework.com/docs/native/barcode-scanner/ and https://github.com/phonegap/phonegap-plugin-barcodescanner.

From how I know the plugin there is now way to customize the design of the scan view. You would have to fork the plugin and edit https://github.com/phonegap/phonegap-plugin-barcodescanner/blob/master/src/ios/scannerOverlay.xib

5

yeah,I have found this file, but after opening it, I am very confused。image
This page is not the same as what I see on the device

6

Yeah, probably done in code - I don’t know enough Obj-C to be helpful here.

But I found this:

7

thank,I’ve done it~,it looks better now.

8

Uh tell us how you did it. Can you show some code?

9

u can find code from my github
add two file src/ios/CDCoverView.h and src/ios/CDCoverView.m

create overlay :
change CDVBarcodeScanner.mm to put overlay form CDCoverView(see here)

change middle box style:
see line 1083 - 1124.
The main code to change middle red line (see here);
The main code to change green box (see here);

3 Likes
10

@HonLuk
PLEASE give us a tutorial how to add a custom scanner overlay!
I know wo many people that would PAY for it in Ionic.
The best also would be that we could “stream” the Scanner to a View. Like Snapchat does. In Example.
Just sayin.
But please provide us a good tutorial for Ionic 2 or 3 how we can change that overlay and add our functions and buttons.

Thanks

11

the scanner overlay write by native code(oc & java)
if u want change it by yourself maybe need to rewrite the part of overlay in the plugin.
sorry cant help u. but u can find code from the plugins and change overlay to what u want.
thank.

13

Could not find the github link … Can you please share the latest link?

14

so we can’t do anything in XIB for customising the UIview ,should everything be done in obj c?