web-dev-qa-db-fra.com

Ionic/Cordova: Comment intégrer les plugins Cordova dans un projet Ionic existant?

J'ai un projet Ionic où j'ai besoin du plugin Cordova Camera (que j'ai maintenant installé avec succès). Mais dans mon projet, l’API de la caméra n’est toujours pas disponible, c’est-à-dire qu’une erreur est générée:

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

Comment activer les API de plug-in à utiliser dans un projet Ionic? La documentation à ce sujet semble être plutôt inexistante ou très bien cachée.

cordovapluginscameraionic-framework
14
BadmintonCat

Ouvrez un terminal dans le répertoire racine de votre application et ajoutez le plug-in 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
Clawish

J'essaie de comprendre comment utiliser les plugins Cordova standard avec Ionic moi-même, mais l'équipe ionic vient de créer ngCordova, un wrapper angulaire pour les API communes de Cordova, qui comprend l'API de caméra que vous souhaitez utiliser. Je vous suggérerais d’utiliser cela: voir leur documentation pour plus d’informations.

4
premiumFrye

Il s'agit d'un problème courant lors des tests sur un navigateur: http://ngcordova.com/docs/common-issues/

1
Fourat

Vous pouvez installer le plugin en exécutant: 

$ cordova plugin add org.Apache.cordova.camera

Maintenant que le plugin est installé, vous pouvez utiliser l’API de la 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);
}

Cela invitera l'utilisateur à prendre une photo et renverra l'URL locale de l'image que vous pourrez ensuite utiliser à l'intérieur d'une balise ou utiliser pour une image d'arrière-plan CSS.

Vous pouvez utiliser le code ci-dessous pour un simple wrapper sur le plug-in Camera qui facilite la capture asynchrone de 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ée 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 () sera appelée (par exemple, en cliquant sur un bouton).

Selon la manière dont vous demandez les données à la caméra et que vous les utilisez dans votre balise angulaire, vous devrez peut-être ajouter à la liste blanche les URL d'image. Angular autorise ainsi les URL fichier: // (par exemple, si vous utilisez ng-src pour une balise):

module.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
0
Harkedian

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

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

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

En outre, vous devrez ajouter une fabrique à 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
Chad

Allez dans le répertoire du projet.

Exécutez cette commande: 

Les intégrations ioniques permettent à cordova --quiet

(J'espère que cela aide les autres.)

0
RS. Utsha