Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » Cordova camera plugin example using ionic framework

Cordova camera plugin example using ionic framework

August 13, 2015 by Source Freeze 29 Comments

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.     

 ionic camera plugin example in device

Filed Under: cordova, cross-platform, ionic framework, phonegap

Comments

  1. Ivan says

    October 31, 2015 at 9:46 am

    I tried it and got Error: Camera.DestinationType is undefined

    Reply
    • Ivan says

      October 31, 2015 at 9:55 am

      solved

      Reply
      • vandolph reyes says

        December 2, 2015 at 11:48 pm

        How did you solve it?

        Reply
        • sourcefreeze says

          January 13, 2016 at 4:55 am

          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

          Reply
          • GURURAJ MOGER says

            January 17, 2016 at 6:57 am

            how to add album and store images permanently in this plugin (like chose image from album)

      • siddhesh says

        January 9, 2016 at 6:38 am

        how did you solve it ?

        Reply
      • anu says

        January 12, 2016 at 6:25 am

        how did u solved it??

        Reply
    • sourcefreeze says

      January 13, 2016 at 4:55 am

      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.

      Reply
  2. R.O. says

    November 5, 2015 at 9:57 pm

    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.

    Reply
  3. chris says

    November 17, 2015 at 4:22 am

    great article!

    Reply
  4. Pravar says

    November 28, 2015 at 10:02 am

    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?

    Reply
    • Iuri Matos says

      August 31, 2016 at 12:59 pm

      You need build an ou webapp to ng-cordova convert $cordovaCamera options in native code

      Reply
  5. Pravar says

    November 28, 2015 at 10:04 am

    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?

    Reply
    • sourcefreeze says

      January 13, 2016 at 5:12 am

      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

      Reply
  6. dhams says

    January 18, 2016 at 5:33 pm

    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.

    Reply
    • dhams says

      January 19, 2016 at 9:44 am

      ok it seems its only a problem with newer devices that have a high res camera

      Reply
  7. Over Dose says

    January 20, 2016 at 12:21 pm

    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

    Reply
  8. Fernando says

    January 30, 2016 at 2:24 pm

    Amigo muchas gracias funciona bien 😀

    Reply
  9. Ken says

    March 21, 2016 at 4:00 am

    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?

    Reply
  10. Gopi Nath says

    May 30, 2016 at 1:16 pm

    Thank you very much… Very nice example…

    Reply
  11. Luke Schoen says

    June 14, 2016 at 8:14 pm

    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

    Reply
  12. Finalweb Tecnico Pc-not La Ser says

    September 5, 2016 at 10:36 pm

    really nice !, now how take more pictures and display then

    Reply
  13. Caio Ramos says

    September 21, 2016 at 5:08 pm

    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.

    Reply
    • Bayan Abuawad says

      November 7, 2016 at 10:54 am

      can you explain where can i find that option please ?

      Reply
  14. Claudio Viola says

    September 28, 2016 at 9:08 am

    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!

    Reply
  15. Divya Eficaz says

    October 12, 2016 at 10:43 am

    Can you tell me how to capture a video just like this.

    Reply
    • Victor Hugo Rocha says

      October 18, 2016 at 8:29 pm

      I’m also interested.

      Reply

Trackbacks

  1. Camara plugin cordova ejemplo - Sharing C0de says:
    March 5, 2016 at 11:00 pm

    […] Cordova camera plugin example using ionic framework […]

    Reply
  2. Best Mobile UI Frameworks using HTML5, CSS and JS - Source Freeze says:
    August 16, 2016 at 11:06 am

    […] many of them confused with how web application will access the native API, for example if you accessing the native camera from web need integrate your application with PhoneGap/Cordova which loads your web application in webview […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Comments

  • zulfi on iOS UIPickerView Example using Swift
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework

Tags

cross-platform ionic iOS javascript mobile application development nextjs objective-c swift uiwebview Visual Studio plugin

Copyright © 2023 Source Freeze