Cordovaでカメラを起動したいが、起動することが出来ない

現在Cordovaでカメラのプラグインを利用してカメラを起動させようとしているのですが、うまく起動することが出来ません。

以下のようにプラグインをインストール

cordova plugin add cordova-plugin-camera

以下のようなコードで起動させようとしています。

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');

        navigator.camera.getPicture(onSuccess, onFail, options);
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

var options = {
  quality: 50,
  // destinationType: Camera.DestinationType.DATA_URL,
  sourceType: 1,     // 0:Photo Library, 1=Camera, 2=Saved Album
  encodingType: 0     // 0=JPG 1=PNG
};

function onSuccess() {
  console.log("Camera cleanup success");
}

function onFail(message) {
  console.log('Failed because: ' + message);
}

app.initialize();

Cordovaのバージョンは、6.5.0です。
利用している端末は、Androidの6.0.1とiOSの9.3で開発を行っています。

何か設定やコードが足りないのでしょうか。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

document.addEventListener("deviceready", onDeviceReady, false);
を別の場所に(index-min.js)記述していたが、実は動作していなかった。
読み込み順にやまりが合ったようです。

下記のようなコードで、devicereadyを行い、別の場所で「navigator.camera.getPicture」関数を呼び出したら正常にカメラが起動できました。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
 <meta http-equiv="Pragma" content="no-cache">
 <meta http-equiv="Cache-Control" content="no-cache">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <script type="text/javascript" charset="utf-8">   
  function onLoad() {
   document.addEventListener("deviceready", onDeviceReady, false);
  }

  function onDeviceReady() {
   console.log("device ready : " + navigator.camera);
  }
 </script>
 <script type="text/javascript" src="js/index-min.js"></script>
 <body ng-controller="***" onload="onLoad()">
 </body>
</html>

投稿2017/06/26 07:40

RihitoHasumi

総合スコア15