Closed waqasmq closed 6 years ago
Hi, Sorry about the delayed response. I do not have much experience with Ionic 2, but a quick search gave me this answer.
So you can use the scanner as shown below :-
window.plugins.Scan.scanDoc(0, onSuccess, onFail);
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
Try console.log(window.plugins.Scan)
and let me know if you are running into errors.
Hi, I have tried the solution mentioned in the post but could not access the scan object. I tried to loop over the plugins just to debug with this code.
constructor(public navCtrl: NavController, public platform: Platform) { platform.ready().then(() => { var plugnin = (<any>window).plugins; for (let key in plugnin) { this.items.push(key); console.log(key); } }); }
I get the following output
console.log: NativeAudio
console.log: spinnerDialog
console.log: actionsheet
console.log: datePicker
console.log: sim
console.log: touchid
console.log: socialsharing
console.log: toast
Here is another solution . The 8th or 9th comment has this answer. I have pasted the answer below, but I would suggest going through the link. Maybe you will find other answers if this doesn't work.
Finally, I managed to use my non-native plugin very easily :
1) Just do the usual :
`cordova plugin add <repo/name>`
2) and use your plugin
`window.plugins.yourplugin.someMethod()`
In order to access to “window.plugins” with TypeScript you have to add a definition :
in : typings/globals/window/index.d.ts
(create “window” folder and “index.d.ts” file)
and write in index.d.ts :
interface Window { plugins: any; }
This allows you to use “window.plugins” with typescript.
Don’t forget to call your plugin after the device is ready with platform.ready() :+1:
import { Platform } from 'ionic-angular'; [...] constructor(platform: Platform) { platform.ready().then(() => { window.plugins.yourplugin.someMethod() });
Try this as well :-
All solutions tried didnt work. What worked was declaring the plugin and using it directly.
declare var PluginName:any
and then use it directly.
PluginName.method()
I have tried everything. but nothing works.. when i do cordova plugins list. i can see the plugin name in the list. When i tried to import the plugin it says module not found.. Do i have to install something else before adding this plugin? :(
Have you tried on a device? I was having errors in browser but it worked in my android device.
Here are the steps I followed :-
1) Create blank Ionic Project in terminal
ionic start myproject blank
2) Add plugin to project
ionic cordova plugin add cordova-plugin-document-scanner
3) Now navigate to E:\myproject\src\app\app.component.ts
declare var scan;
above @Component({..
platform.ready().then(() => { }
function add
the following function as shown in readme.scan.scanDoc(1, onSuccess, onFail);
function onSuccess(imageURI) {
//var image = document.getElementById('myImage');
//image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
4) Then in terminal ionic cordova run android
Let me know if you are still having trouble.
Hi, It works on android by defining the scan object :) . but after we select the image from gallery or when we take the picture from camera, the app stops working and closes automatically.
Try this instead. The change in the below code is that the var image
and the image.src
lines have been commented out. The camera code was working for me with no issues. The gallery code I just fixed. You shouldn't have any problems now. You can debug from google chrome if your android phone is connected to your PC using this link :- chrome://inspect/#devices. Click inspect after you find your phone under remote target (Your app needs to be running to see it below remote target)
scan.scanDoc(0, onSuccess, onFail);
function onSuccess(imageURI) {
//var image = document.getElementById('myImage');
//image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
To get the following code to work you must define an image tag with id myImage
in the html page that is open once the the image is retrieved from the scanner plugin. In cordova I put this in index.html below the device ready <p>
tag. I am not sure where you put this in ionic, But I think you should be able to easily find this via google.
var image = document.getElementById('myImage');
image.src = imageURI;
So i am able to get it working with the selection of image from gallery. but it still does not work when i take the picture from camera. Here is the working code.
takePicture(event) { scan.scanDoc(0, this.onSuccess, this.onFail); }
onSuccess(imageURI) { var image = document.getElementById('myImage') as HTMLImageElement; image.src = imageURI; }
onFail(message) { console.log('Failed because: ' + message); }
and on the html page i have image tag like this
<img id="myImage"/>
This works as expected. But when i the change it to
scan.scanDoc(1, this.onSuccess, this.onFail);
The camera opens and i am able to take the picture. and when i press ok the app crashes and is restarted.
I am using the below code and I am not running into any problems. Please check in android studio. Maybe the stack trace from that might help.
scan.scanDoc(1, onSuccess, onFail);
function onSuccess(imageURI) {
//var image = document.getElementById('myImage');
//image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
Try commenting out the HTML parts or try using the code I am using and check if it works.
By the way which html file did you use this <img id="myImage"/>
code in?
ionic create 3 files when when a page is created.
The problem is exactly the same as described here https://stackoverflow.com/questions/8368091/phonegap-camera-restarts-the-application/9524643#9524643
Have you tried this solution?
Note that if you are testing this applications directly on your Android phone, there's an option inside "Developer options" called "Don't keep activities". When this option is checked it eliminates the activity when you leave it. Specifically in the case of the camera (and other applications lunched from your activity) it will restart your activity.
Uncheck this and see if that helps.
I am not able to recreate your situation on my end. Also fyi it seems like you used the url markup wrong. It would be nice if you could edit it, so in the future people could directly click the link.
EDIT :- I actually could edit it myself. I hope you don't mind :)
The flag "Dont keep activities" is turned off by default. I am attaching the code which i am using and you can try that on ur phone. btw i am testing the app on Samsung Galaxy s8 with android 8.0.0. what device are you testing on?
I have tried to look at the logs from the device. Seems like its a problem of permissions or something and not with the plugin itself. Here is the exception
06-11 14:07:50.614 26999 26999 E AndroidRuntime: FATAL EXCEPTION: main 06-11 14:07:50.614 26999 26999 E AndroidRuntime: Process: io.ionic.starter, PID: 26999 06-11 14:07:50.614 26999 26999 E AndroidRuntime: java.lang.RuntimeException: Failure delivering result ResultInfo{who=android:fragment:0, request=2, result=-1, data=null} to activity {io.ionic.starter/com.scanlibrary.ScanActivity}: java.lang.SecurityException: Failed to find provider for user 0; expected to find a valid ContentProvider for this authority 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.ActivityThread.deliverResults(ActivityThread.java:4489) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.ActivityThread.handleSendResult(ActivityThread.java:4532) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.ActivityThread.-wrap20(Unknown Source:0) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1752) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:105) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.os.Looper.loop(Looper.java:164) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.ActivityThread.main(ActivityThread.java:6938) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at java.lang.reflect.Method.invoke(Native Method) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: Caused by: java.lang.SecurityException: Failed to find provider for user 0; expected to find a valid ContentProvider for this authority 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.os.Parcel.readException(Parcel.java:1958) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.os.Parcel.readException(Parcel.java:1904) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.content.IContentService$Stub$Proxy.notifyChange(IContentService.java:821) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.content.ContentResolver.notifyChange(ContentResolver.java:2052) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.content.ContentResolver.notifyChange(ContentResolver.java:2003) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.content.ContentResolver.notifyChange(ContentResolver.java:1973) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at com.scanlibrary.PickImageFragment.onActivityResult(PickImageFragment.java:332) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.Activity.dispatchActivityResult(Activity.java:7566) 06-11 14:07:50.614 26999 26999 E AndroidRuntime: at android.app.ActivityThread.deliverResults(ActivityThread.java:4485)
I am testing on Samsung S7 Edge with Android 7.0. Could you send me your entire ionic project? Or create a blank one from scratch with just this plugin and I will test it out.
Here is a blank project with the plugin installed. blankproject.zip
What I meant was a blank project that uses this plugin maybe on click or on platform ready. Would love it if you could send a blank project that you have build on your side and ran into to problems, then I can directly run on my device and see the issue first hand.
Anyhow, I will check the code I shared with my android 8.0 device and get back. If it doesn't work with my android 8.0 device then a clear path opens up as to what might be the problem. I will let you know once it is done.
I built the app for android 7 and it worked.!!! 👍 .. so clearly there is some issue with the scanner plugin on android 8.
Okay so I found a temporary hotfix which you can use now.
Add <preference name="android-targetSdkVersion" value="25" />
to your config.xml under platform android. So it might look something like this :-
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>roq</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<allow-intent href="market:*" />
<preference name="android-targetSdkVersion" value="25" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="1.1.19" />
<plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
<plugin name="cordova-plugin-document-scanner" spec="^1.1.2" />
<engine name="android" spec="7.0.0" />
</widget>
As you can see I added that bit of code below the <platform name="android">
tag. I will close this issue if the problem is solved for you and I will look deeper into finding a workaround that doesn't have you adding this extra line of code to your config.xml. In the meantime I will add this to the documentation for others to find. Thank you for your help with this issue.
Hi, I solved the error application auto restarting after take picture from camera by using plugin "cordova-plugin-background-mode" Link: https://ionicframework.com/docs/native/background-mode/ https://github.com/katzer/cordova-plugin-background-mode
this plugin can prevent the app from going to sleep while in background. so it not be killed by the system
@duyetnk So you are able to use the camera functionality of this plugin in Android 8.0+ without making changes to config.xml just by using the cordova-plugin-background-mode?
If so then thank you for sharing your solution with us :) Will test this out and maybe add cordova-plugin-backgound-mode as a dependency for this plugin.
i just run in Android 7.0 device, not 8.0 but i think it will be the same
@duyetnk There are no problems with android 7.0 as far as I have tested it. Android 8.0 was where I was having the problem and thus I suggested the hotfix to change config.xml.
I tested it with Android 8.0 and I don't think it fixed it, although it is possible I am not using the plugin cordova-plugin-background-mode correctly.
Would you be kind enough to either test your project on an Android 8.0 device or send me a project where this solution of yours has been implemented so I can directly run it on my Android 8.0 device to test it?
@ChrisTomAlx
You can try this plugin
https://github.com/dpa99c/cordova-android-support-gradle-release
First remove <preference name="android-targetSdkVersion" value="25" />
from your config.xml
Then install plugin with this:
cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION=25.+
Build your app to test
Currently i don't have Android 8.0 device so i can't test it
For cordova-plugin-background-mode plugin i just use enable() method, nothing special.
@duyetnk
For cordova-plugin-background-mode plugin i just use enable() method, nothing special.
Yea that is what I did. Still couldn't to get it to work on Android 8.0.
You can try this plugin https://github.com/dpa99c/cordova-android-support-gradle-release
I highly doubt this will work, but I will try. The real problem is that the scan library is taking a uri from the plugin and working on it, then sending the image back to the plugin which then sends it to the cordova app. In Android 8.0, they made major security updates which changed the way files and uris can be shared and thus the issue with Android 8.0 alone. This is why <preference name="android-targetSdkVersion" value="25" />
solves the prooblem because the android device is requested to use the Android 7.0 sdk.
Currently i don't have Android 8.0 device so i can't test it
No worries, If you do get a chance to test it, please let me know if it worked or not.
Cheers and thank you for taking an interest in solving this issue :) Chris Neutrinos
I agree with chris here.. what i have discovered is that on android 8, problem is about the new security updates and not about the app going to background thingy. With some configuration in the config.xml i was able to stop the crashing of app, and it could select/take the picture, but it crashed while saving the picture. After that point i just turned back to 25 sdkversion :)
Hi, I am trying to use this plugin within my ionic 2 app. but i cannot access scan object in my device ready event. Here is my code.
constructor(public nav: NavController, private camera: Camera, private platform : Platform) { this.platform.ready().then((readySource) => { console.log("Platform ready from", readySource); // Platform now ready, execute any required native code console.log(scan); }); }
and this is the error message i am getting.Error: Uncaught (in promise): ReferenceError: scan is not defined ReferenceError: scan is not defined at http://localhost:8100/build/main.js:652:25 at t.invoke (http://localhost:8100/build/polyfills.js:3:14976) at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33) at t.invoke (http://localhost:8100/build/polyfills.js:3:14916) at r.run (http://localhost:8100/build/polyfills.js:3:10143) at http://localhost:8100/build/polyfills.js:3:20242 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at c (http://localhost:8100/build/polyfills.js:3:19752) at http://localhost:8100/build/polyfills.js:3:20273 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at o (http://localhost:8100/build/polyfills.js:3:7894)
Any help regarding this issue?