In the previous tutorial we have learned about the getting started with ionic framework. now we are going to learn about how to access the device camera and photo library using cordova camera plugin and ionic framework. This sample will work android and iOS Devices.
Next create ionic framework sample using the below command, here we are creating ionic blank template project and name it as”CameraPluginDemo”.
ionic start CameraPluginDemo blank cd CameraPluginDemo
Then add the android and iOS platforms using the below ionic commands.
ionic platform add android ionic platform add ios
Note:
Remember you must have mac to build ios applications.
Next in this application we are integrating ngCordova library, if you are new to ngCordova framework here is simple description.
What is ng-Cordova?
“ngCordova is a collection of AngularJS services and extensions created by Ionic and driven by the community. These services make it easier to integrate Cordova plugins into Ionic applications”
Then, start downloading the latest ngcordvao library and place the ng-cordova.min.js file in your project’s www/js directory.
Add the ng-cordova.min.js reference above to the cordova.js file in the index.html as mentioned in the below.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="js/ng-cordova.min.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> </head> <body ng-app="starter">
ng-cordova integration is still not over, now we need to include it for use in AngularJS. Open your app.js file and alter the angular.module line to look like the following.
angular.module('starter', ['ionic', 'ngCordova'])
Adding Cordova Camera Plugin
The next thing we want to do is add the Apache Cordova camera plugin. This can be done by running the following command.
cordova plugin add org.apache.cordova.camera
Now we are configured the application with cordova camera plugin.
Next have to add the buttons for take and choose picture in the ion-content tag. Once added button tag add the button click event using ng-click attribute and add ng-controller attribute in ion-content as mentioned in the below.
<ion-header-bar class="bar-assertive"> <h1 class="title">Photos</h1> </ion-header-bar> <ion-content ng-controller="ExampleController" padding="true"> <button class="button button-full button-assertive" ng-click="takePhoto()"> Take Photo </button> <button class="button button-full button-assertive" ng-click="choosePhoto()"> Choose Photo </button> </ion-content>
Then add the img tag here we have initially hided image by checking src attribute using ng-show and set the value ng-src as imgURI. This imgURI value will be set while choosing or taking picture function.
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">
</ion-content>
then creating a controller in js file and add the function for take and choose picture, getPicture function used to take and choose photo by sending the options. we can set quality, destinationType, sourceType, etc. using option values. here is full source code for app.js functions.
angular.module('starter', ['ionic', 'ngCordova'])
.controller("ExampleController", function ($scope, $cordovaCamera) {
$scope.takePhoto = function () {
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function (err) {
// An error occured. Show a message to the user
});
}
$scope.choosePhoto = function () {
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function (err) {
// An error occured. Show a message to the user
});
}
});
next we have to run the application using the below command lines. if you are running in emulator you can use emulate instead run.
ionic run ios ionic run android
once run the application choose or take picture using specific feature, the output will looks like below and find the full source code of this example using our Github location.
I tried it and got Error: Camera.DestinationType is undefined
solved
How did you solve it?
Hi All,
Sorry for the late reply, the cordova camera plugin is out of date. please update it by using the below command.
cordova plugin rm cordova-plugin-camera
cordova plugin add cordova-plugin-camera
how to add album and store images permanently in this plugin (like chose image from album)
how did you solve it ?
how did u solved it??
Hi All,
Sorry for the late reply, the cordova camera plugin is out of date. please update it by using the below command.
cordova plugin rm cordova-plugin-camera
cordova plugin add cordova-plugin-camera
it will work.
Thanks so much for the tutorial.
But please, how do i store this pix on PouchDb. Or how do i put it into array of storage.
Thanks once again.
great article!
Hi, Thanks for the post.
I tried the sourcecode from Github for camera plugin. I am able to see the screen, But camera button is not working in chrome browser. Can you please let me know how to fix this?
You need build an ou webapp to ng-cordova convert $cordovaCamera options in native code
The camera is invoked, on click on Take Photo button and I am able to see a capture button. I am not able to click the capture button. Please let me know how to fix this?
Hi,
camera plugin is out of date, please update it by using below commands
cordova plugin rm cordova-plugin-camera
cordova plugin add cordova-plugin-camera
Hi
I can’t seem to get the image to display. The camera opens and takes a picture but it does not show in app afterwards. Please help me.
ok it seems its only a problem with newer devices that have a high res camera
1. “Take Photo” button is working fine in Android but is not responding in IOS.
2.
“Choose Photo” button is working (only shows options to choose from
source in android as expected) but in IOS i am getting both option(use
camera and choose from file …working like this not expected).
What should i do for IOS ??? I am testing on IPhone 5 S
Amigo muchas gracias funciona bien 😀
Hi
How to get the full path directory for the image i have choose?
the tutorial is working but i can’t get the directory of the image.
Any solution?
Thank you very much… Very nice example…
Thank you. DATA_URL appears to be a great way to store the images in local storage and avoid using FILE_URI that stores pictures in the file system but which may require modification to the content security policy and other implementation issues
really nice !, now how take more pictures and display then
I try everything under the sun to make this code works on my device. 3 days has passed, and 7 pages of google search later i found the solution, in your device theres a option “dont keep 2 plane activities” u’ve to disable this piece of bad things. Tnks.
can you explain where can i find that option please ?
https://uploads.disquscdn.com/images/2bf7e304fd81d1e4e141cdaa64f39c5e2befd56ce89b0bbb55583a93cf3e3e4b.jpg
Hello! Thanks for tutorial!
I’m tryng to pick an image with Android. I setted FILE_URI and everything works perfectly.
When I try to to pick a foto via dropbox too.
But when I try to pick a foto via Google Foto I’ve an error and the url probabily is not correct.
In the success of cordova camera I use widow.resolveNativePath plugin and that works perfectly in all other cases.
Anyone can help me?
Thanks!
Can you tell me how to capture a video just like this.
I’m also interested.