CODEWITHSUNDEEP
javascriptcordova
Soner
Soner

Reputation: 1282

Ionic Cordova camera is not working

I am trying to use ionic cordova camera.

I have below code

HomePage.html

<ion-view view-title="Example">
  <ion-content>
    <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
    <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
    <button class="button" ng-click="takePicture()">Take Picture</button>
  </ion-content>
</ion-view>

index.html

<!DOCTYPE html>
<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="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">

 <ion-nav-view></ion-nav-view>

</body>
</html>

controllers.js

angular.module('starter.controllers', [])

.controller('HomePageCtrl', function ($scope, $state, $location, $cordovaCamera) {

    $scope.data = {};


    $scope.takePicture = 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
        });
    }
})

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {

        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);

        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleLightContent();
        }
    });
})

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

         .state('HomePage', {
             url: '/HomePage',
             templateUrl: 'templates/HomePage.html',
             controller: 'HomePageCtrl'
         })
         .state('login', {
             url: '/login',
             templateUrl: 'templates/Login.html',
             controller: 'LoginCtrl'
         });

    $urlRouterProvider.otherwise('/login');  
});

Question:

When i click to button in order to use camera

I get below exception:

 Module 'ngCordova' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Where i miss in above side

Any help will be appreciated.

Thanks.

Upvotes: 3

Views: 1965

Answers (3)

tony
tony

Reputation: 945

first of all you need to define ngCordova script (beetween ionic.bundle.js script and cordova.js script)

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

also you may need to install whitelist plugin and add meta to index because in some mobile devices it wont work because of centent security policy permission violations 

<meta http-equiv="Content-Security-Policy"
content="default-src 'self' https://*/ http://*/ data: gap: content: 
'unsafe-eval' 'unsafe-inline';
               script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
               style-src  'self' 'unsafe-inline' *">

this will allow you to use pictureSelection too

Upvotes: 1

gattamaneni venkatanarasimham
gattamaneni venkatanarasimham

Reputation: 23

Yes

when you send the Image in to your database the image is came from camera in base64 string.So,That string you automatically send to the your database. Install cordova plugin add org.apache.cordova.camera in you project

var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false,
      correctOrientation:true
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
$scope.Base64string="data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });

write this in your controller and base64 string came in $scope.Base64string but when you send this string one problem came that is you have to store this amount of data in the middle **spaces** came so to neglect the one you will write in services
srting Image="data:image/jpeg;base64,/9j/sfgdhbygcecechghchchvfhcghfvhv57egdhbgh.........";  
string imagerty = Image.Replace(" ", "+");

Or

in Angularjs
var str = 'data:image/jpeg;base64,/9j/sfgdhbygcecechghchchvfhcghfvhv57egdhbgh.........';
var replaced = str.split(' ').join('+');

Upvotes: 1

Andr&#233; Kreienbring
Andr&#233; Kreienbring

Reputation: 2509

Taken frome here:

Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js and after your AngularJS / Ionic file (since ngCordova depends on AngularJS).

In short words: ngCordova is missing in your index.html.

Upvotes: 2

Related Questions