Phonegap Build - Crossplatform BarcodeScanner integration - android

I'm developing a crossplatform application in HTML5/CSS/JS using Phonegap 5.1.1. I'm struggling to find a solution to integrate the official phonegap-plugin-barcodescanner, following the instructions which the official page on GitHub refers to. In detail, after building through Phonegap Build, I can't get rid of the Help page which appears as soon as I start the app on Android (see the ). This way I cannot test if everything's working fine.
Furthermore, I've found out there are loads of ways to initialize the plugin and I'd like to know whether I'm doing anything wrong. Here's the code in my page:
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
});
Finally, I've modified my config.xml as to include:
<gap:plugin name="BarcodeScanner"/>
Any suggestions?
Thanks in advance.

please add bellow permissions
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />

I found the solution myself. In case anyone is looking for a ready-to-use way to start, here's the way to go.
If you're using Phonegap Build online service, you need not add any plugin via
phonegap plugin add <plugin_name> (or cordova plugin add). It'll be sufficient to simply mimic the behavior of the official Phonegap BarcodeScanner Demo, particularly as regards the files:
<appname>/config.xml (referencing the plugin com.phonegap.plugins.barcodescanner);
<appname>/index.html (which includes the line <script src="barcodescanner.js" />);
<appname>/js/index.js (which contains the scan and encode methods, as well as their initialization).
As soon as the app is built, Phonegap Build will inject the official plugin by itself within the package.

Related

Cordova plugin background download fails

I need to download huge file ( 160GB ) using my Cordova application. As file-transfer plugin was deprecated and suggested XMLHTTPRequest usage fails for huge failes, I downloaded cordova-plugin-background-download from https://github.com/sgrebnov/cordova-plugin-background-download. It works great for any iOS device, but it always fails on Android 13 with error
Unsupported path /storage/emulated/0/ ......
The error is when a temporary file is being crated. I assume, the problem is with this code:
this.setTempFileUri(Uri.fromFile(new File(android.os.Environment.getExternalStorageDirectory().getPath(),
Uri.parse(targetFileUri).getLastPathSegment() + "." + System.currentTimeMillis())).toString());
where
android.os.Environment.getExternalStorageDirectory().getPath()
returns invalid path.
Is there a workaround, how to make the plugin working on Android 13? I use the sample code from the plugin homepage on Github.
Line 114 of the src/android/BackgroundDownload.java file needs to be modified for proper functionality from
this.setTempFileUri(Uri.fromFile(new File(android.os.Environment.getExternalStorageDirectory().getPath(),
Uri.parse(targetFileUri).getLastPathSegment() + "." + System.currentTimeMillis())).toString());
to
this.setTempFileUri(Uri.fromFile(new File(android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS),
Uri.parse(targetFileUri).getLastPathSegment() + "." + System.currentTimeMillis())).toString());

cordova plugin barcode scanner doesn't open the scan

I have a problem with the barcode scanner plugin (I'm not a genius and I don't know well how to programm a web-app.).
I use phonegap and cordova and I've tried to do a web-app that scan a barcode after a click on a link.
I've installed the plugin, before with this command line:
cordova plugin add cordova-plugin-barcodescanner
and I write this js code:
function scan(){
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
in html:
Scan
But when I click on the link, It doesn't happen anything.
If I put an alert after: function scan(){, it show
if I put an alert after: cordova.plugins.barcodeScanner.scan(, doesn't do anything.
So, I tried to uninstall the plugin and install it with this command line:
cordova plugin add com.phonegap.plugins.barcodescanner
With the same js and html code, but it doesn't work yet.
So, I uninstall the plugin and I try to install it with:
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
But anything yet.
I search a lot and I try a lot of solutions!
I use cordova 5.0.0 and I try the plugin on android 4.4 and IOS.
I also installed the plugin camera.
So, please, help me! Where is the error?
I followed all the solutions that I've find on the web and on stackoverflow.
The code always crashes after:
cordova.plugins.barcodeScanner.scan(
Can anyone help me, please?
Thank you so much.
First of all can you check your code in firefox with firebug, see if it is giving some error which can let you to do so or you can try other library which is intelXDK
document.addEventListener("intel.xdk.device.barcode.scan",function(evt){});
You have to add the feature to the config.xml in case of Android as below:
<feature name="BarcodeScanner">
<param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
</feature>

How to build android with Crosswalk lite using ionic-cli?

When I compile APK using Crosswalk (ionic browser add crosswalk; ionic build android), the size is too big (~20 MB). I think using crosswalk lite will reduce the size of compiled APK. But I have no idea to hack ionic-cli to use crosswalk lite.
My question is:
1. Will this support crosswalk lite?
2. Is there any hack (or temporary solution) to use crosswalk lite?
Thanks.
This is experimentary , but it will work , cant guarantee there will be no bugs when you build your app though , please read this well before you proceed.
Procedure : ( all steps are done from a machine running MS-Windows 8.1)
First of all, I have searched for available crosswalk-lite everywhere to download the version from , it appears that there are only 3 available versions to download found here , and as you can see the latest is 10.39.234.1 i tried later versions like 12.xx , 13.xx , and 14.xx but in vain , could not find any repo for later versions.
Navigate to your npm node-modules folder : default in windows is
C:\Users\#YOUR_USER_NAME\AppData\Roaming\npm\node_modules
find the ionic module folder , and then , and start editing browser.js file , file can be found inside:
node_modules\ionic\lib\ionic\browser.js
In your code editor find the line #169 :
IonicTask.prototype.downloadCrosswalkWebview = function downloadCrosswalkWebview(architecture, version, releaseStatus) {
.....
}
this function is responsible for downloading the crosswalk version you want , and it takes the following parameters :
architecture , version and releaseStatus.
We will be adding our lite version manually , so we can download it later.
We will be changing some value temporarily for downloading lite version , but remmeber to turn it back to its original value later :
in line#178 :
change
var downloadUrl = 'https://download.01.org/crosswalk/releases/crosswalk/android/' + releaseStatus + '/' +
version + '/' + architecture + '/crosswalk-webview-' + version + '-' + architecture + '.zip';
to be :
var downloadUrl = 'https://download.01.org/crosswalk/releases/crosswalk-lite/android/' + releaseStatus + '/' +
version + '/' + architecture + '/crosswalk-webview-' + version + '-' + architecture + '.zip';
in line#39 there is an array of objects crosswalkVersions , add this object to it :
{
version: '10.39.234.1',
publish_date: '2015-03-06 03:06',
canary: true
}
You can test that object is added successfully running this command in your CLI :
ionic browser list
and as you can see it got listed in available versions:
Final step is to download your crosswalk-lite project into your project folder via CLI Command :
ionic browser add crosswalk#10.39.234.1
That is all you are done.
P.S:
I have never tried ionic in building my hybrid projects.
Forget about Ionic-cli crosswalk-lite, it relies on cordova-plugin-crosswalk-webview, but cordova-plugin-crosswalk-webview does not support crosswalk-lite for now. If you wanna use crosswalk-lite, you will have to use cordova-android 3.0 way with CordovaLib provided with crosswalk-lite-cordova (https://download.01.org/crosswalk/releases/crosswalk-lite/android/canary/10.39.237.1/arm/crosswalk-cordova-10.39.237.1-arm.zip), because latest crosswalk-lite is 10.0. Good news is the team is working on rebasing lite to 14.0. Hopefully it comes out ASSP.
Ionic-cli now has an option for lite:
ionic browser list
ionic browser add crosswalk-lite
although, you may want to see this post

Phonegap/Cordova BarcodeScanner cordova.plugins undefined

Edit: What's with the down vote? My question was well-researched and I don't believe that I deserved it.
I know that there are several questions addressing cordova.plugins being undefined, but I've been unable to find a resolution with all my research.
I'm targeting only the Android platform.
I'm trying to use the phonegap barcodescanner plugin and am consistently running into errors trying to use it. I always get the error: Cannot read property 'barcodeScanner' of undefined
Setup information:
Phonegap version: 3.5.0-0.20.4
Not using phonegap build
Cordova version: 3.5.0-0.2.6
Installed plugin using all of the following methods (independently, of course, for testing)
Instructions here https://github.com/wildabeast/BarcodeScanner/tree/master/src/android
cordova plugins add https://github.com/wildabeast/BarcodeScanner.git
phonegap plugin add https://github.com/wildabeast/BarcodeScanner.git
Also tried substituting http://github.com/phonegap-build/BarcodeScanner.git for the wildabeast version
From what I can tell, the plugin installs correctly.
I've used 3 different methods to test what I'm doing: Browser (primarily Chrome), Ripple Chrome Extension, and the Phonegap Developer App. I get the error in the browser and Ripple, but nothing happens at all in the Phonegap Developer App.
The code is very simple.
The page it's being called from:
<div ng-controller="StorageMainCtrl">
<p ng-click="doScan()">Scan!</p>
</div>
The controller code handling the scan:
$scope.doScan = function() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = "Result: " + result.text + "<br/>" +
"Format: " + result.format + "<br/>" +
"Cancelled: " + result.cancelled;
alert(s);
},
function (error) {
alert("Scanning failed: " + error);
}
);
};

cordova.plugins undefined for cordova3.1

i am trying to develop an android application using cordova. for my application, i require the barcode scanner plugin (https://github.com/wildabeast/BarcodeScanner/)
i am unable to add the plugin using CLI, so i downloaded and copied the files, added the plugin via the following:
<feature name="BarcodeScanner">
<param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
</feature>
i then added references to the barcodescanner.js and the cordova files in my application. then in my index, i added the following lines of code to read barcode:
var scanner = cordova.plugins.barcodeScanner;
scanner.scan(
function(result){
alert("Scanned Code: " + result.text
+ ". Format: " + result.format
+ ". Cancelled: " + result.cancelled);
},
function(error){
alert("Scan failed: " + error);
}
);
}
but i get the following error:
Uncaught TypeError: Cannot read property 'barcodeScanner' of undefined
due to that, i think the cordova.plugins is undefined. what may be the issue for this? am i missing anything?
I have made a simple project for you and have added barcode scanner plugin through CLI from github.
You can download my Project from here.
After Downloading, import it and check few things with your project like
Plugins package name in src folder and its code
config.xml
AndroidManifest.xml
Hope this will help you out.

Categories

Resources