I've been looking up for a solution for up to almost 2 days.
I'm trying to use the ngCordova Camera plugin.
I'm using the ionic-yeoman framework with AngularJS.
What I did was:
bower install --save ngCordova.
Added ngCordova to my app.module.
Installed the cordova camera plugin:
cordova plugin add org.apache.cordova.camera.
My controller:
.controller('profileCtrl', function($scope, myService, $cordovaCamera)
{
$scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
// Success! Image data is here
}, function(err) {
// An error occured. Show a message to the user
});
}
myService.getFoo().then(function(data) {
//this will execute when the
//AJAX call completes.
$scope.items = data;
});
})
And I get this error:ReferenceError: Camera is not defined
If you are serving your app through browser, whatever you use of cordova regarding the usage of device, doesn't work. But, if you are having the problem even after serving your app in emulator or the device itself. Try the following steps.
Firstly, check the cordova plugin lists:
Go to project directory type: cordova plugin lists
see for cordova-plugin-media-capture, cordova-plugin-camera (if these are not in the list, you are simply missing your plugins).
Run the command
cordova plugin add cordova-plugin-media-capture and cordova plugin add cordova-plugin-camera
If the plugins are there and you are still having the issue of camera is not defined
cordova plugin rm cordova-plugin-camera
cordova plugin rm cordova-plugin-media-capture
ionic platform rm android
ionic platform add android
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-media-capture
Following must be present in your index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
You should make sure you include the ng-cordova.js file (from the ngCordova/dist/folder) before the cordova.js file in your html.
make sure you include ngCordova in the controller declaration as well. becoz i had kept my controllers and app.js files seperately and had not included ngCordova in angular.module('xx.controllers', ['ionic','ngCordova']). once i did it my problem was solved and i coul runn the app in genymotion
Just figured this out by analyzing the Ionic Camera example project. You did all of the setup correctly, but you still need to inject it into the controller, like so:
.controller('MyCtrl', function($scope, Camera) {
Note that there is not a dollar sign before Camera. This really should be documented more explicitly.
Also, add this factory if you don't already have it:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])
just try ionic run browser instead ionic serve
Related
I am trying to select photos using the Capacitor/Camera plugin. But the code fails while building for Android.
this is my function to call the camera Intent:
import { Camera, CameraResultType } from '#capacitor/camera';
async takePicture() {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
// image.webPath will contain a path that can be set as an image src.
// You can access the original file using image.path, which can be
// passed to the Filesystem API to read the raw data of the image,
// if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
this.avatarUrl = image.webPath;
};
This is the build error I am facing:
My Environment version:
npm: 8.17.0
node: 18.7.0
angular: 14.0.5
ionic: 6.20.1
#camera/capacitor: 4.1.0
It seems the plugin has some issues or something is not covered in jetify.
I also had the same issue.
Try this https://ionicframework.com/docs/native/camera
This works for me
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.
I'm working on a ionic based webview project by using cordova inappbrowser plugin, I could run it properly by using "ionic serve" command but when i try to run it on android it stucks at blank screen.
.controller("ExampleController", function ($scope) {
$scope.openCordovaWebView = function()
{
// Open cordova webview if the url is in the whitelist otherwise opens in app browser
window.open('https://google.com','_self','location=no');
};
Have you install
cordova-plugin-inappbrowser ?
In terminal type:
cordova plugin list
in your project's root folder.
Also
cordova plugin
works fine.
try this after you have the plug in installed, in View:
<button class="button" ng-click="openInBrowser('https://www.google.com')">
GOOGLE
</button>
then in the JS
myApp.controller('ExampleController', ['$scope', '$ionicPlatform', '$cordovaInAppBrowser', function($scope, $ionicPlatform, $cordovaInAppBrowser){
$scope.openInBrowser = function(extUrl){
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes'
};
$cordovaInAppBrowser.open(extUrl, '_system', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
}); // ./$ionicPlatform.ready
};//--------------------------------------
}]);
installed cordova device plugin by :
sudo cordova plugin add org.apache.cordova.device
then downloaded ngCordova and included ng-cordova.min.js in to js folder and also included in index.html
next what i did is injected ngCordova as follows
angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])
then included in controller as follows
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPlatform,$cordovaDevice)
but still getting the following errors
ReferenceError: device is not defined
at Object.getUUID (http://localhost:8100/js/ng-cordova.min.js:1:14929)
at new <anonymous> (http://localhost:8100/js/controllers.js:27:26)
at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11602:23)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14906:28
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at eventHook (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42933:17)
at Scope.$broadcast (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20605:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8100/lib/ionic/js/ionic.bundle.js:34122:22)
at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
Can you now tell me what went wrong?
If is there another way to read the Device UUID show me the direction to it.
Yes, there is another way. You just don't need the ngCordova for this.
When you add the plugin cordova plugin add org.apache.cordova.device it's loaded to your application and therefore the info you want is at window.device.
If you want to get device uuid at anywhere in the code you just need to call window.device.uuid.
If you want as soon as the app starts, then use:
ionic.Platform.ready(function(){
console.log( window.device.uuid );
});
If you are using '> ionic serve', device will be "not defined." Try in an emulator or physical device.
Use ngCordova and cordova Device plugin:
cordova plugin add org.apache.cordova.device
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var uuid = $cordovaDevice.getUUID();
});
Within v2 it works like this:
import { Device } from 'ionic-native';
console.log('Device UUID is: ' + Device.uuid);
Reference: http://ionicframework.com/docs/v2/native/device/
Install:
#ionic-native/core
#ionic-native/device
enter link description here
ionic cordova plugin add cordova-plugin-device
npm install --save #ionic-native/device
Add this plugin to your app's module
// app.module.ts
import { Device } from '#ionic-native/device';
...
#NgModule({
...
providers: [
...
Device
...
]
...
})
export class AppModule { }
Usage
import { Device } from '#ionic-native/device';
constructor(private device: Device) { }
...
console.log('Device Model is: ' + this.device.model+
'\n Device UUID is: ' + this.device.uuid+
'\n Device serial is: ' + this.device.serial+
'\n Device platform is: ' + this.device.platform+
'\n Device version is: ' + this.device.version+
'\n Device manufacturer is: ' + this.device.manufacturer);
If won't run change "import { Device } from '#ionic-native/device';" for "import { Device } from '#ionic-native/device/ngx';"
And "this.device.uuid" for "Investigate"
Use these commands for run in browser
ionic build
ionic cordova platform add browser
cordova run browser
And works ! in these versions
in Browser
in Real Device
You could just use ionic.Platform.device() in your platform.ready function.
$ionicPlatform.ready(function {
console.log(ionic.Platform.device());// returns an object containing device uuid,version, platform, manufacturer ...
});
hope this helps someone :).
Regards.
http://forum.ionicframework.com/t/ionic-cordova-device-uuid/13652
You may only access cordova plugins within the ionic.Platform.ready() callback function:
angular.module('starter.controllers', [])
.controller('DashCtrl', function ($scope, $state, $cordovaDevice) {
var init = function () {
console.log("initializing device");
try {
$scope.uuid = $cordovaDevice.getUUID();
}
catch (err) {
console.log("Error " + err.message);
alert("error " + err.$$failure.message);
}
};
ionic.Platform.ready(function(){
init();
});
})
This is because Cordova plugins take some more time to load then the web application. The ionic.Platform.ready() callback is triggered as soon Cordova has fully loaded or immediately if it is already loaded.
wow found out what wrong i was doing... through this question. http://forum.ionicframework.com/t/problem-to-use-ngcordova-device-is-not-defined/11979
when we test on other device which has other platform than cordova supports this happens.
this was a useful discovery for me.
Have been struggling with this for hours today, install the cordova device plugin with:
cordova plugin add cordova-plugin-device
make sure you also reference the plugin in your config.xml:
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
Cordova 3.3 callbacks suddenly stopped working. I have had some problem with the plugins from cordova after upgrading from 2.9 to 3.3. After getting everything to work again, by removing every phonegap plugin, and build the project just with cordova command lines. However, now some of the plugins stop working again. See my code below
$("#getPicture").click(function(){
navigator.camera.getPicture(gotPic, failHandler,
{quality:45, destinationType:navigator.camera.DestinationType.DATA_URL,
sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY, targetWidth: 270, targetHeight: 270});
});
function gotPic(data) {
alert("in got pic") // doesn't get executed even if I set a timeout there
}
function failHandler(e){
alert("in fail"); // same as above.
}
I got the same error when I request the file system
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, gotFS, fail);
function gotFS(fileSystem) {
// create false before
alert("in gotFS");
fileSystem.root.getFile(src, {create: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
alert("in entry");
fileEntry.file(gotFile, fail);
}
function gotFile(file){
alert("in gf");
readDataUrl(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("inside onloaded");
base = evt.target.result;
alert("base " + base);
};
reader.readAsDataURL(file);
}
function fail(error) {
alert(error.code);
}
This have worked perfectly before, and I can't understand why it stopped now. Since I have struggled with getting the plugins working before, I tried to remove the three plugins I though messed it all up.
cordova plugin rm org.apache.cordova.camera
cordova plugin rm org.apache.cordova.file-transfer
cordova plugin rm org.apache.cordova.file
The two first plugins got removed without any problem, but when I tried to remove the file plugin I got:
Deleting plugin org.apache.cordova.file
No dangling plugins to remove.
And when I run cordova plugins ls, the plugin is still there.
I found my problem. Since I'm including the facebook coonect plugin into my application, I had included cordova.js two times. By removing the one, everything was back to normal