如何通过使用phonegap在Android手机上显示相机

Question

I want to capture an image by using phonegap on Android phone. 我想通过在Android手机上使用phonegap捕获图像。 I try the code posted on Phonegap page but the camera does not appear. 我尝试发布在Phonegap页面上的代码，但没有出现相机。 Any help is appreciated.Thank you very much. 非常感谢您的帮助。非常感谢。

It is the display on my phone 这是我手机上的显示屏

这是我手机上的显示屏，没有摄像头

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

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

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

    // Wait for Cordova to connect with the device
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // Cordova is ready to be used!
    //
    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 inline 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 inline 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.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.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>

Answer 1

Both your capturePhoto() and capturePhotoEdit() functions need to have the destinationType updated. 您的capturePhoto()和capturePhotoEdit()函数都需要更新destinationType 。

navigator.camera.getPicture(
    onPhotoDataSuccess,
    onFail,
    {
        quality: 50,
        destinationType.DATA_URL
    }
);

should be like this, 应该是这样的

navigator.camera.getPicture(
    onPhotoDataSuccess,
    onFail,
    {
        quality: 50,
        destinationType: destinationType.DATA_URL
    }
);

Answer 2

Did you Add permission and Camera feature on your AndroidMenifest file? 您是否在AndroidMenifest文件上添加了权限和相机功能？ If you didn't add then try again. 如果您没有添加，请再试一次。

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

Answer 3

In your code change the cordova version. 在您的代码中更改cordova版本。 Now you have "cordova-1.6.0.js" you should change it to "cordova-2.5.0.js" I think it will work after that. 现在，您有了“ cordova-1.6.0.js”，您应该将其更改为“ cordova-2.5.0.js”，我认为此后它将可以使用。 like this 像这样

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

Answer 4

I have been having the same issue, I've got the getPhoto() function working now, but still can't get the cameraPhoto() or cameraPhotoEdit() functions working. 我遇到了同样的问题，我的getPhoto（）函数现在可以正常工作了，但仍然无法使cameraPhoto（）或cameraPhotoEdit（）函数正常工作。 I have done pretty much everything listen in this post and more. 我几乎完成了这篇博文以及其他所有内容。

Oh and you could try some of the solutions listed here: 哦，您可以尝试这里列出的一些解决方案：

Phonegap Camera API Cannot Read Property data url of undefined Phonegap Camera API无法读取未定义的属性数据URL

如何通过使用phonegap在Android手机上显示相机

问题描述

4 个解决方案

解决方案1
6 2012-06-27 19:23:08

解决方案2
0 2012-05-15 06:04:37

解决方案3
0 2013-04-25 13:39:19

解决方案4
0 2014-04-04 09:58:46

如何通过使用phonegap在Android手机上显示相机

问题描述

4 个解决方案

解决方案1 6 2012-06-27 19:23:08

解决方案2 0 2012-05-15 06:04:37

解决方案3 0 2013-04-25 13:39:19

解决方案4 0 2014-04-04 09:58:46

解决方案1
6 2012-06-27 19:23:08

解决方案2
0 2012-05-15 06:04:37

解决方案3
0 2013-04-25 13:39:19

解决方案4
0 2014-04-04 09:58:46