Search code examples
javascriptioscordovaphonegap-pluginscordova-plugins

What is wrong with my code to use Camera Cordova?


I have tried everything for hours. I am sure it is a bracket or a stupid thing I miss. I already asked a question related to this, but it didn't solve my problem.

I am just trying to take a picture and store it in a variable to use it later.

I simplified my code to the maximum. There is one page, which is the following:

    <!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
  <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>
<body>

<div class="ui-btn" id="prendrephoto1"> Prendre photo equipe1</div>

<button id="prendrephoto2"> Prendre photo equipe2</button>

<div id="myImage"></div>

<a class="ui-btn" href="#page2">Jouer</a>

</body>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<script>

$(document).ready(function(){
var photo1;
var photo2;

$("#prendrephoto2").bind("click"function(){
alert('je suis le bouton 2');

});

$("#prendrephoto1").bind("click",function(){
alert("it is starting");
navigator.camera.getPicture(onSuccess, onFail, 
{ quality: 50, 
  destinationType: Camera.DestinationType.FILE_URI,
  sourceType:Camera.PictureSourceType.Camera, }); 

});

function onSuccess(imageURI) {
     alert("It is working");
     //var image = document.getElementById('myImage');
    //image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

//derniere balise jquery
});
</script>

</html>

Just to be sure I have done every thing right, following 2 screenshots of the xml and plugin.

enter image description here

enter image description here

Then, in the terminal:

cordova run --device

It is launching properly on my mIphone, but nothing happen when click the button. Any help please?

A side-question, what would be the "developper javascript console" when app is running on Iphone ?


Solution

  • Before deviceready, you CAN NOT use navigator.camera function.

    You should write like this:

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        navigator.camera.getPicture(onSuccess, onFail,
                {
                    quality: 50,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: Camera.PictureSourceType.Camera,
                });
    
    }