相机不适用于phonegap中的应用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了相机不适用于phonegap中的应用相关的知识,希望对你有一定的参考价值。

我已经在网上搜索,尝试使用这个相机插件的phonegap帮助。我已经从PhoneGap api网站正确安装了相机插件。我已将插件权限和功能设置为config.xml。我已将javascript添加到相机页面并通过按钮调用它。请有人可以帮助我解决应用程序没有在android设备上调用相机的问题。

这是我的配置文件(config.xml)的编码

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.test.TestApp_JN" version="1.0.0">
  <feature name="Camera">
    <param name="android-package" value="plugins.cordova-plugin-camera.src.android.CameraLauncher" />
    </feature>
  <name>JN_TestApp</name>
  <description>Hello World sample application that responds to the deviceready event.</description>
  <author href="http://phonegap.com" email="support@phonegap.com">PhoneGap Team</author>
  <content src="index.html"/>
  <content src="camera.html"/>
  <preference name="orientation" value="default"/>
  <preference name="target-device" value="universal"/>
  <preference name="fullscreen" value="true"/>
  <preference name="webviewbounce" value="true"/>
  <preference name="prerendered-icon" value="true"/>
  <preference name="stay-in-webview" value="false"/>
  <preference name="ios-statusbarstyle" value="black-opaque"/>
  <preference name="detect-data-types" value="true"/>
  <preference name="exit-on-suspend" value="false"/>
  <preference name="show-splash-screen-spinner" value="true"/>
  <preference name="auto-hide-splash-screen" value="true"/>
  <preference name="disable-cursor" value="false"/>
  <preference name="android-minSdkVersion" value="7"/>
  <preference name="android-installLocation" value="auto"/>
  <gap:plugin name="plugins.cordova-plugin-camera" />
  <gap:plugin name="org.apache.cordova.battery-status"/>
  <gap:plugin name="org.apache.cordova.media-capture"/>
  <gap:plugin name="org.apache.cordova.console"/>
  <gap:plugin name="org.apache.cordova.contacts"/>
  <gap:plugin name="org.apache.cordova.device"/>
  <gap:plugin name="org.apache.cordova.device-motion"/>
  <gap:plugin name="org.apache.cordova.device-orientation"/>
  <gap:plugin name="org.apache.cordova.dialogs"/>
  <gap:plugin name="org.apache.cordova.file"/>
  <gap:plugin name="org.apache.cordova.file-transfer"/>
  <gap:plugin name="org.apache.cordova.geolocation"/>
  <gap:plugin name="org.apache.cordova.globalization"/>
  <gap:plugin name="org.apache.cordova.inappbrowser"/>
  <gap:plugin name="org.apache.cordova.media"/>
  <gap:plugin name="org.apache.cordova.network-information"/>
  <gap:plugin name="org.apache.cordova.splashscreen"/>
  <gap:plugin name="org.apache.cordova.vibration"/>
  <icon src="icon.png"/>
  <icon src="www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi"/>
  <icon src="www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi"/>
  <icon src="www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi"/>
  <icon src="www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi"/>
  <icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>
  <icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
  <icon src="www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
  <icon src="www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
  <icon src="www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
  <icon src="www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>
  <icon src="www/res/icon/webos/icon-64.png" gap:platform="webos"/>
  <icon src="www/res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>
  <icon src="www/res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background"/>
  <gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>
  <gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>
  <gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>
  <gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>
  <gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
  <gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
  <gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
  <gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>
  <gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
  <gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
  <gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
  <access origin="*"/>
    <gap:config-file platform="android" parent="/manifest" mode="add" xmlns:android="http://schemas.android.com/apk/res/android">
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
        <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"></uses-permission>
        <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"></uses-permission>
        <uses-permission android:name="android.permission.BATTERY_STATS"></uses-permission>
        <uses-permission android:name="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE"></uses-permission>
        <uses-permission android:name="android.permission.CALL_PHONE"></uses-permission>
        <uses-permission android:name="android.permission.CAMERA"></uses-permission>
        <uses-permission android:name="android.permission.INTERNET"></uses-permission>
        <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"></uses-permission>
        <uses-permission android:name="android.permission.READ_CONTACTS"></uses-permission>
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
        <uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
        <uses-permission android:name="android.permission.WRITE_CALL_LOG"></uses-permission>
        <uses-permission android:name="android.permission.WRITE_CONTACTS"></uses-permission>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
    </gap:config-file>
  <plugin name="cordova-plugin-whitelist" version="1"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>
</widget>

这是我对camera.html页面的编码

<html>
<head>
<meta charset="utf-8" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Camera</title>

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>

</head>
<body>
<div id="camera" data-role="page">
            <div data-role="header">
                <h1>Camera</h1>
            </div>
            <div data-role="content">
                    <div align="center">
                    <button style="border-color: blue;"  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="" />
                    <script type="text/javascript">

                            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>
            </div>
            </div>
            <div data-role="footer" class="bottom">
                <h4>J.Newport</h4>
            </div>
</div>


        <script type="text/javascript">
            app.initialize();
        </script>
    </body>


</html>

我目前正在使用Dreamweaver来编写网页和phonegap。我已经搜索了很长时间来尝试解决我遇到的这个问题。请有人可以只是这个编码,只是让我知道我必须修复的地方,以使相机在我的应用程序上工作。

非常感激

答案

我刚刚安装了相机插件并使用你的代码(camera.html)对我来说很好。由于你没有提到应用程序,我把它改成了

var app = {
initialize: function() {
    this.bindEvents();
},
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
}
};

app.initialize();
}

它是否向您显示任何错误?

另一答案

几天前我遇到过类似的问题,我的应用程序在Phonegap Desktop中运行,但在Build中没有。 我使用了相机和媒体插件,但它没有在app中工作,只在桌面上工作。 今天,我找到了解决方案。 config.xml中需要另一个插件:

<plugin name="phonegap-plugin-media-stream" source="npm" spec="~1.2.1" />

现在它工作正常。

以上是关于相机不适用于phonegap中的应用的主要内容,如果未能解决你的问题,请参考以下文章

phonegap 相机适用于 iPhone,但不适用于 iPad

PhoneGap 相机 API 不适用于 iOS

产品不适用于 Phonegap 中的应用内购买

Phonegap - iOS 文件传输不适用于授权标头

主题不适用于片段

Phonegap 导航栏不适用于多个 html 页面