web-dev-qa-db-ja.com

Ionic / Cordova：Cordovaプラグインを既存のIonicプロジェクトに統合するには？

Ionic Cordova Cameraプラグインが必要なプロジェクト（これで正常にインストールされました）があります。しかし、私のプロジェクトではCamera APIがまだ利用できません。エラーがスローされます。

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

Ionicプロジェクトで使用するプラグインAPIをアクティブにするにはどうすればよいですか？これに関するドキュメントはかなり存在しないか、非常によく隠されているようです。

cordovapluginscameraionic-framework
14
BadmintonCat

次の手順を実行します：

1。 cordova.jsの前にngCordovaを含めます

同じ説明を見つけることができます ドキュメント内 。

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

2。コマンドラインにプラグインを追加します

このステップはドキュメントで見つけることができます 特定のプラグインのセクション 。

ionic plugin add org.Apache.cordova.camera

3。ブラウザでの作業中はCordovaを使用できないことに注意してください

したがって、$cordovaCamera.getPictureを使用する場合、ライブラリは内部的にnavigator.camera.getPictureを呼び出しますが、これはデスクトップブラウザーでの開発時には利用できません。 さらに読む

NgCordova/Ionicチームは現在 モックで作業中 このような問題を回避するために使用できます。

NgCordovaはここからダウンロードできます。 http://ngcordova.com/docs/install/

Update： Ionic Native があります。これはngCordovaに似ていますが、ES6およびTypeScript用です。

28
mrzmyr

アプリのルートディレクトリでターミナルを開き、経由でプラグインを追加します

cordova plugin add org.Apache.cordova.camera

編集：
新しいコマンドは次のとおりです。

cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add
6
Clawish

Ionic自分で標準Cordovaプラグインを使用する方法を見つけようとしているが、ionicチームは最近ngCordova--an angular使用するCamera APIを含む一般的なCordova APIのラッパー。それを使用することをお勧めします。詳細については their docs を参照してください。

4
premiumFrye

プロジェクトディレクトリに移動します。

次のコマンドを実行します：

$ ionic統合によりcordova --quietが有効になります

（これが他の人を助けることを願っています。）

2
RS. Utsha

これは、ブラウザーでテストする場合の一般的な問題です。 http://ngcordova.com/docs/common-issues/

1
Fourat

次を実行してプラグインをインストールできます。

$ cordova plugin add org.Apache.cordova.camera

プラグインがインストールされたので、JavascriptからカメラAPIを使用できます。

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);
}

これは、ユーザーに写真を撮るように促し、画像のローカルURLを返します。このURLは、タグ内で使用したり、CSS背景画像に使用したりできます。

以下のコードを使用して、Cameraプラグインの単純なラッパーを使用して、写真を簡単に非同期で取得できます。

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

このファクトリーは、次のようにコントローラーで使用できます。

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

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

GetPhoto（）が呼び出されたときにカメラを開きます（たとえば、ボタンのクリックから）。

カメラからのデータをどのようにリクエストしてAngularマークアップで使用するかに応じて、画像URLをホワイトリストに登録して、Angular file：//URL（たとえば、タグにng-srcを使用している場合）：

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

次のように、Cameraをコントローラーに挿入する必要があります。

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

Cameraの前にドル記号がないことに注意してください。これは、より明確に文書化する必要があります。

また、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