CODEWITHSUNDEEP
androidcordova
Martijn
Martijn

Reputation: 24789

Why is my phonegap camera app not working?

First the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>

        <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
        <script type="text/javascript" charset="utf-8">

            var pictureSource,
                destinationType

            document.addEventListener("deviceready",loaded,false);

            function loaded() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }

            function getPhoto(imageData) {
                var smallImage = document.getElementById('smallImage');


                smallImage.style.display = 'block';


                smallImage.src = "data:image/jpeg;base64," + imageData;
            }

            function capturePhoto() {
                navigator.camera.getPicture(getPhoto, onFail, { quality: 50 });
            }


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

            </script>
    </head>
    <body>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    </body>
</html>

I use BuildTool in combination with phonegap (build.phonegap.com). I have zipped this file as index.zip and uploaded this file in BuildTool. BuildTool then creates an app for me and store this app on phonegap.

When I click the button, nothing happens. I won´t even see the failed alert.

Does someone know what I'm doing wrong here? Do I need to include some library or something?

Note: I am trying to get this to work for Android.

Upvotes: 0

Views: 157

Answers (2)

Navneeth
Navneeth

Reputation: 988

pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;

the above two line is not complete. it should be like these

pictureSource=navigator.camera.PictureSourceType.PHOTOLIBRARY;
destinationType=navigator.camera.DestinationType.FILE_URI;

after changing still not working then try these html its working...

<!DOCTYPE html>
<html>
    <head>
        <title>Submit form</title>
        <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">



        function getPhoto() {
            // Retrieve image file location from specified source
            navigator.camera.getPicture(onPhotoURISuccess, onFailure, {
                                        destinationType: navigator.camera.DestinationType.FILE_URI,
                                        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                                        });
        }
        function onPhotoURISuccess(imageURI) {
            $("#smallImage").attr('src',imageURI);

        }


        function onFailure()
        {
            alert('failed');
        }



            </script>
    </head>
    <body>
        <br><br><br>

            <button onclick="getPhoto();">Select Photo:</button><br>
            <img style="width:200px;height:200px;" id="smallImage" />

    </body>
</html>

Upvotes: 1

Dawson Loudon
Dawson Loudon

Reputation: 6029

Try adding the deviceready listener to a function that is called after the body loads, like this:

<body onload="onLoad()">

function onLoad() {
    document.addEventListener("deviceready",loaded,false);
}

Upvotes: 0

Related Questions