How can I implement zoom functionality in a native qr scanner? I tried installing the camera preview plugin but it keeps crashing the app. The new versions probably do not support it. My project version:
Ionic:
Ionic CLI : 5.2.5(C:\Users\Ivo\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework :
#ionic/angular : 4.11.5
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.1.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.8.1
native-run : 0.2.9
System:
Android SDK Tools : 26.1.1 (C:\Users\Ivo\AppData\Local\Android\Sdk)
NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
I have tried so far:
to install camera preview plugin but it is not supported by this ionic version
searched for a QRScanner method, but wasn't able to find one. Found methods only for flashlight and rotating camera.
Related
i am trying to build an app working with offline map using mbtiles from openmaptiles and mapbox. i have followed this link : GitHub - oscarfonts/mapbox-gl-cordova-offline: Offline vector maps in Cordova using Mapbox GL JS and it was working fine with API 29 (cordova) but with API 30 (capacitor) i have this error :
ERROR Error: Uncaught (in promise): Error: cordova-sqlite-ext plugin not available. Please install the plugin and make sure this code is run after onDeviceReady event
I have used npm i cordova-sqlite-ext but i still have the same error can anybody help
this is my ionic info
Ionic:
Ionic CLI : 6.17.1 (C:\Users\SAH\AppData\Roaming\npm\node_modules#ionic\cli)
Ionic Framework : #ionic/angular 5.9.1
#angular-devkit/build-angular : 12.1.4
#angular-devkit/schematics : 12.1.4
#angular/cli : 12.1.4
#ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.3.2
#capacitor/android : 3.3.2
#capacitor/core : 3.3.2
#capacitor/ios : not installed
Utility:
cordova-res : 0.15.3
native-run : 1.5.0
System:
NodeJS : v14.17.6 (C:\Program Files\nodejs\node.exe)
npm : 6.14.15
OS : Windows 10
Thanks
I just upgraded capacitor to 3.2.x and when I try to build my Ionic project, almost no capacitor function seems to work. For example, I get errors like:
Uncaught TypeError: cap.nativeCallback is not a function
...
Uncaught TypeError: Capacitor.createEvent is not a function
...
package com.getcapacitor.annotation does not exist
Here's my Ionic Info:
Ionic:
Ionic CLI : 6.17.1 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.5.2
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 3.2.3
#capacitor/android : 3.0.0-beta.3
#capacitor/core : 3.2.3
#capacitor/ios : not installed
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 9 other plugins)
Utility:
cordova-res : 0.15.3
native-run : 1.4.1
System:
Android SDK Tools : 26.1.1 (/home/che-azeh/Android/Sdk)
NodeJS : v12.21.0 (/usr/bin/node)
npm : 7.5.2
OS : Linux 5.11
Here was the problem: if you look at the capacitor section under my Ionic Info, you'd notice an incosistency between Capacitor CLI, #capaciotr/core and #capacitor/android:
Capacitor:
Capacitor CLI : 3.2.3
#capacitor/android : 3.0.0-beta.3
#capacitor/core : 3.2.3
So what I did was upgrade all 3 to their latest versions:
npm install #capacitor/cli#latest #capacitor/core#latest
npm install #capacitor/android#latest
Now, it looks ike:
Capacitor:
Capacitor CLI : 3.2.3
#capacitor/android : 3.2.3
#capacitor/core : 3.2.3
Finally, I remove the Android folder created by capacitor (rm -R ./android), reinitialize capacitor (npx cap init) rebuild ionic project (ionic build android) and then npx cap add android.
And solved! Zero errors!
When I run Ionic 4 app, the browser shows api data but when i run same app on android device it doen't shows api data.
I am using Laravel as a backend, from where i am fetching api data.
The Ionic info is -
Ionic:
Ionic CLI : 6.5.0 (C:\Users\LENOVO\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 4.1.1
#angular-devkit/build-angular : 0.803.26
#angular-devkit/schematics : 8.3.26
#angular/cli : 8.3.26
#ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : not installed
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
NodeJS : v12.16.1 (C:\Program Files (x86)\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10
I am really stuck here...
Your Problem is Cors you can install middleware in laravel to avoide the problem
Or you can test your application in the chrome disable securite
Try to Run :
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
and test your application in this chrome and let me khnow
I have a problem with this code when I run in the android device also ios I have the same problem
TypeError: Printer.getPlugin(...).check is not a function
at vendor.js:79303
at vendor.js:78443
at new ZoneAwarePromise (polyfills.js:3272)
at tryNativePromise (vendor.js:78442)
at getPromise (vendor.js:78463)
at vendor.js:79301
at Printer.push../node_modules/#ionic-native/printer/ngx/index.js.Printer.check (vendor.js:79308)
at Printer.push../node_modules/#ionic-native/printer/ngx/index.js.Printer.isAvailable (vendor.js:79294)
at SaleInfoPage.push../src/app/paenter code herege/sale-info/sale-info.page.ts.SaleInfoPage.print (main.js:1037)
at Object.eval [as handleEvent] (SaleInfoPage.html:54)
ionic info
Ionic:
Ionic CLI : 5.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.6.0
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.3.9
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 8.0.0
Cordova Platforms : android 8.0.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 9 other plugins)
Utility:
cordova-res : 0.5.0 (update available: 0.5.2)
native-run : 0.2.6 (update available: 0.2.7)
System:
Android SDK Tools : 26.1.1 (/Users/shahab/Library/Android/sdk/)
ios-deploy : 2.0.0
NodeJS : v8.11.3 (/usr/local/bin/node)
npm : 5.6.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E
code in function
print()
{
this.printer.isAvailable().then(function(){
this.printer.print("https://www.techiediaries.com").then(function(){
alert("printing done successfully !");
},function(){
alert("Error while printing !");
});
}, function(e){
console.log(e);
alert('Error : printing is unavailable on your device ');
});
}
I solved my problem by installing this plugin with the same library
isiigoteam/cordova-plugin-printer
I tried to use css variables for this
ion-toolbar {
--background: #{$backgroundColor3};
--min-height: #{$spacing * 5};
}
All works correct in latest chrome and on android 8. But on adnroid 5 with chrome 40.* it is not worked.
I found that minimal android version for Ionic is 4.4 docs
>ionic info
Ionic:
Ionic CLI : 5.0.1
Ionic Framework : #ionic/angular 4.4.2
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.3.9
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 9 other plugins)
Utility:
cordova-res : 0.3.0
native-run : 0.2.5
System:
Android SDK Tools : 26.1.1 (C:\Android)
NodeJS : v11.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Background is only one problem with styles:
Screenshot with issues from android 5
Normal screenshot
You need to be use add in global or page .scss file
--background: var(--ion-color-primary);
Here your answare.