Camera doesnt start using cordova camera plugin and angular js

Question

I want to capture image on click of a button but it doesn't work.I have done many troubleshooting but still in vain.Below i am posting my code and cordova plugins list . Please suggest the changes required.

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="js/ng-cordova.min.js"></script>
  <script src="js/ng-cordova.js"></script>
  <script src="js/cordova.js"></script>
  <script src="js/app.js"></script>
</head>
<body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">M-Services </h1>
      </ion-header-bar>

      <ion-content ng-controller="ExampleController">
        <input type="text" ng-model="text1" placeholder="Username "/>
        <input type="text" ng-model="text2" placeholder="Password "/>
        <button class="button" ng-click="insert(text1,text2)">SignUp</button>
        <button class="button" ng-click="login(text1,text2)">Login</button>
        <div class="list card" ng-controller="FirstController">
          <div class="item item-image">
            <img ng-src="{{picturepath}}"/>
          </div>
<div class="padding">
            <button ng-click="takePicture()" class="button button-block button-calm">Take Picture</button>
</div>
        </div>
      </ion-content>
    <!--  <ion-view view-title="Login" name="LoginView">
      <ion-content>
        <div class="list list-inset">
          <form name="loginForm" ng-controller="LoginController"
                ng-submit="login(credentials)" novalidate>
            <label for="username">Username:</label>
            <input type="text" id="username"
                   ng-model="credentials.username">
            <label for="password">Password:</label>
            <input type="password" id="password"
                   ng-model="credentials.password">
            <button type="submit">Login</button>
          </form>
        </div>

        <label class="checkbox">
          <input type="checkbox" name="rememberme" value="remember">Remember me&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Forgot Password</a>

        </label>
        <!-- <ion-checkbox ng-model="isChecked">Remember me</ion-checkbox>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Forgot Password</a><br>

      </ion-content>
      </ion-view>
    </ion-pane>-->

  </body>
</html>

app.js

var db = null;
var records=null;
var validation=null;
var example = angular.module('starter', ['ionic', 'ngCordova'])
  .run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
      db = window.openDatabase("my.db","1.0","my.db",100000);
      $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
      $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS signup (firstName text,lastName text,userName text,city text,contact_no number,email text)");
    //  $cordovaSQLite.execute(db, "DELETE from people");

      window.alert("Database Created .. !")
    });
  });
  example.controller("FirstController",function($scope,$cordovaCamera) {

    $scope.picturepath = 'http://placehold.it/50x50';
    $scope.takePicture = function (){
      var options = {
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,
        };
    $cordovaCamera.getPicture(options).then(function(imageData) {
        //var image = document.getElementById('myImage');
        $scope.picturepath = "data:image/jpeg;base64" + imageData;
      }, function(err) {
        window.alert(err);
      });
  }
  });

example.controller("ExampleController", function($scope, $cordovaSQLite) {

  $scope.insert = function(firstname, lastname) {
      var query = "INSERT INTO people (firstname,lastname) VALUES (?,?)";
      $cordovaSQLite.execute(db, query, [firstname, lastname]).then(function(res) {
        window.alert("Record Inserted Successfully..!!");
      }, function (err) {
        console.error(err);
      });


  }

  $scope.login = function(firstname,lastname) {

    $cordovaSQLite.execute(db,"SELECT firstname, lastname FROM people where firstname=? and lastname=?",[firstname,lastname]).then(function(res) {
      if(res.rows.length >0)
        window.location="login.html";
    }, function (err) {
      console.error(err);
    });
  }

  $scope.clicked=function()
  {

  }
$scope.signup=function(firstName,lastName,userName,city,number_no,email)
{
  var query = "INSERT INTO signup (firstName,lastName,userName,city,contact_no,email) VALUES (?,?,?,?,?,?)";
  $cordovaSQLite.execute(db, query, [firstName,lastName,userName,city,number_no,email]).then(function(res) {
    window.alert("Records Inserted ..!1");
  }, function (err) {
    console.error(err);
  });


}
});

Plugins list

cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.0 "Device"
cordova-plugin-file 3.0.0 "File"
cordova-plugin-media-capture 1.1.0 "Capture"
cordova-plugin-splashscreen 3.0.0 "Splashscreen"
cordova-plugin-statusbar 2.0.0 "StatusBar"
cordova-plugin-whitelist 1.2.0 "Whitelist"
cordova-sqlite-storage 0.7.15-pre "Cordova sqlite storage plugin"
ionic-plugin-keyboard 1.0.8 "Keyboard"

Error:

ReferenceError: Camera is not defined
    at Scope.$scope.takePicture

Answer 1

Your Device Ready might have not fired yet so wrap your camera code inside device ready event listener

document.addEventListener("deviceready", function () {
$scope.takePicture = function (){
      var options = {
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,
        };
    $cordovaCamera.getPicture(options).then(function(imageData) {
        //var image = document.getElementById('myImage');
        $scope.picturepath = "data:image/jpeg;base64" + imageData;
      }, function(err) {
        window.alert(err);
      });

}

Camera doesnt start using cordova camera plugin and angular js

Question

1 answers

solution1
0 2016-01-08 13:36:09

Camera doesnt start using cordova camera plugin and angular js

Question

1 answers

solution1 0 2016-01-08 13:36:09

solution1
0 2016-01-08 13:36:09