CODEWITHSUNDEEP
cordovaphonegap-pluginscordova-plugins
Nick
Nick

Reputation: 2265

PhoneGap: Capture plugin with navigator.device undefined

I'm new to PhoneGap and am trying to figure out how to use the capture plugin. I'm using Cordova 3.5.0. I have run the following command successfully:

cordova plugin add org.apache.cordova.media-capture

I have read examples where a cordova.js or a phonegap.js is being included in the HTML page. However, neither file exists in the project hierarchy that Cordova has created so I don't know how to include it. I've also read that this file is automatically injected by Cordova at build time. So as far as including any JavaScript files, I'm only including my own JavaScript file. Inside that JavaScript file I have code that does this for testing purposes:

alert(navigator.device);
navigator.device.capture.captureImage(function(files) {
    alert(files);
}, function(error) {
    alert(error);
});

The first alert shows that navigator.device is undefined. I'm running this app on the android emulator. To run the app, I'm doing:

cordova emulate android

I assume there's something I need to include or setup in order to get this working. Any help is greatly appreciated.

Upvotes: 1

Views: 3757

Answers (2)

Sithys
Sithys

Reputation: 3793

and welcome to Cordova!

First off all, i would recommend you to check, whether you have installed npm etc. the right way. Check the tutorial over here -> CLI-Guide <-. After that you should build a total new project over your terminal. You should use these Commands to do this ->

  • cd ~/desktop
  • cordova create media media.example.com media
  • cd media
  • cordova platform add android
  • cordova plugin add org.apache.cordova.camera (not media-capture)
  • cordova plugin add org.apache.cordova.console (don't use alerts, it's easier with the console :-))
  • cordova build

So, now open up your folder. There should be a directory like media/platforms/android/assets/www and in this directory you should find your cordova.js and cordova_plugins.js.

Next Problem: Your Camera!

After you installed all like i said, and checked your $PATH Variable (echo $PATH in terminal) etc. you can try this code in your index.html to check, whether the camera-plugin is working or not: 

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

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

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The in-line CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The in-line CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

So...maybe you try to test my suggestions for you now and give me a feedback, if it worked, or where i can help you more :-)!

Edit for the Answer from Nick -> Standard Cordova index.html code:

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Upvotes: 6

Nick
Nick

Reputation: 2265

I figured out I needed to add the following to my HTML page:

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

Although the file does not exist in the project hierarchy, it gets generated when you build the app. The file does not get injected into your HTML pages automatically, it still needs to be manually included where desired.

Upvotes: 3

Related Questions