Ionic / Cordova: comment intégrer les Plugins Cordova dans un projet ionique existant?

j'ai un projet ionique où j'ai besoin du plugin de caméra Cordova (que j'ai maintenant installé avec succès). Mais dans mon projet, L'API Caméra n'est toujours pas disponible, c'est-à-dire que l'erreur est lancée:

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

comment activer les API de plugin à utiliser dans un projet ionique? La Documentation à ce sujet semble plutôt inexistante ou très bien cachée.

14
demandé sur BadmintonCat 2014-05-15 12:38:43

6 réponses

Suivez ces étapes:

1. Inclure ngCordova avant cordova.js

Vous pouvez trouver la même description dans la doc.

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

2. Ajouter votre plugin sur la ligne de commande

Vous pouvez trouver cette étape dans les docs dans la section de votre plugin spécifique.

ionic plugin add org.apache.cordova.camera

3. Rappelez-vous que cordova n'est pas disponible pendant le travail navigateur

donc en utilisant le $cordovaCamera.getPicture la bibliothèque appelle en interne navigator.camera.getPicture qui n'est pas disponible lors du développement dans le navigateur de bureau. autres lectures

l'équipe ngCordova / ionique est actuellement travail sur les objets fantaisie vous pouvez utiliser pour éviter de tels problèmes.


vous pouvez télécharger ngCordova ici: http://ngcordova.com/docs/install/


mise à Jour: Il y a Ionique Indigène maintenant, c'est comme ngCordova mais pour ES6 et dactylographier.

27
répondu mrzmyr 2017-10-10 08:10:24

ouvrez un terminal dans le répertoire racine de votre application et ajoutez le plugin via

cordova plugin add org.apache.cordova.camera

Modifier:

la nouvelle commande est:

cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add
6
répondu Clawish 2015-10-19 16:48:31

j'essaye de comprendre comment utiliser les plugins standard de Cordova avec Ionic moi-même, mais l'équipe ionic vient de construire ngCordova--un enveloppeur angulaire pour les API de cordova communes, qui inclut l'api de Caméra que vous voulez utiliser. Conseille: voir leurs docs pour plus d'info.

4
répondu premiumFrye 2014-07-22 15:21:01

Ceci est un problème courant lors des tests sur un navigateur: http://ngcordova.com/docs/common-issues/

1
répondu Fourat 2015-09-02 21:52:03

vous devez injecter Camera dans le contrôleur, comme suit:

.controller('MyCtrl', function($scope, Camera) {

notez qu'il n'y a pas de signe de dollar avant Camera. Cela devrait vraiment être documenté plus explicitement.

de plus, vous devrez ajouter une usine à vos services.js:

.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;
    }
  }
}])
0
répondu Chad 2015-03-13 15:18:09

Vous pouvez installer le plugin par lancer :

$ cordova plugin add org.apache.cordova.camera

maintenant que vous avez installé le plugin, vous pouvez utiliser L'API caméra à partir de votre Javascript:

function takePicture() {
  navigator.camera.getPicture(function(imageURI) {

    // imageURI is the URL of the image that we can use for
    // an <img> element or backgroundImage.

  }, function(err) {

    // Ruh-roh, something bad happened

  }, cameraOptions);
}

ceci demandera à l'utilisateur de prendre une photo, et retournera l'URL locale de l'image que vous pouvez ensuite utiliser à l'intérieur d'une étiquette ou utiliser pour une image de fond CSS.

vous pouvez utiliser le code ci-dessous pour un simple wrapper sur le plugin de caméra qui le rend facile à saisir asynchrone photos:

module.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;
    }   } }]);

Cette usine peut être utilisé dans vos contrôleurs comme ceci:

.controller('MyCtrl', function($scope, Camera) {

  $scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
      console.log(imageURI);
    }, function(err) {
      console.err(err);
    });
  };

qui ouvrira la caméra lorsque getPhoto() est appelé (à partir d'un clic de bouton, par exemple).

selon la façon dont vous demandez les données à la caméra et de l'utiliser dans votre marqueur angulaire, vous pouvez avoir à whitelist image URLs si Angular permet fichier: / / URLs (par exemple, si vous utilisez ng-src pour une étiquette):

module.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
0
répondu Harkedian 2015-08-05 09:50:26