我第一次尝试使用Cordova本机插件。我开始使用相机和文档中提供的示例代码。然而，这是失败的，navigator.camera未定义。
我已经包含了以下代码。
<div data-role="page" id="CameraPage">
<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) {
alert("Photo Data Success");
// 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;
}
// A button will call this function
//
function capturePhoto() {
alert("function is called");
if(_.isUndefined(navigator.camera)){
alert("Camera is not defined");
}else{
alert("WTF?!");
}
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
我根据CLI指示安装了相机插件
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
我还添加了cordova.js文件。
<script type="text/javascript" charset="utf-8" src="js/cordova-js/lib/cordova.js"></script>
答案 0 :(得分：10)
您在哪里测试代码？
我不知道你是否还需要anwser。但我认为它可以帮助某人。我运行你的代码，它100％工作。 我已经在Android的模拟器中使用模拟相机进行了测试。我认为您忘记了使用权限。
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
我在这里做了一个例子https://github.com/paulorbpacheco/CameraTest-Cordova.git
我希望这可以帮助你...
此致
答案 1 :(得分：3)
这有点旧了，但我希望能够为以后可能出现的其他人提供洞察力......
我遇到的问题是由于我已经在我的系统上完成了一个旧的npm安装的cordova，然后是npm安装的phonegap。
Cordova是phonegap的依赖，因此存在必要版本的cordova，但是当我运行插件安装时：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
系统默认为旧版本的cordova，因此无法获得正确版本的插件。
最近，当我将npm phonegap软件包从3.0.0升级到3.1.0时，我再次想起了这个问题。插件再一次改变了，并没有向后兼容。在3.0.0的情况下，PhoneGap需要一个
的插件目录org.apache.cordova.core.camera org.apache.cordova.core.X
在最新版本3.1.0中，核心命名空间被删除，现在看起来像这样
org.apache.cordova.camera org.apache.cordova.X
在正常使用场景中，我认为这不是人们每天遇到的问题。我猜测的大多数项目都在生成，开发人员正在添加他们需要的插件并坚持使用PhoneGap的特定版本，直到某些时候他们可能决定升级项目。这就成了一个问题，因为我认为这是开发人员同时开始处理多个PhoneGap项目的时候;我在这里的情况。我升级到新项目的新版本，然后需要将插件添加到旧项目 爆炸事件
到目前为止，我一直在使用全球安装的PhoneGap（根据phonegap.com的官方文档）
sudo npm install -g phonegap
我的短期解决方案最终是从一个旧项目中获取所需的插件目录，该项目使用我需要的版本到我正好在同一版本上运行的其他项目。接下来的步骤是使用nvm进行测试，看看我是否能够在每个项目中以这种方式使用多个PhoneGap，而不是总是移动全局版本。
答案 2 :(得分：0)
由于未正确构建cordova而生成未定义的问题，因此请按照以下步骤解决navigator.camera问题
第1步：获取最新的phonegap zip（http://phonegap.com/install/），现在最新版本是2.9.1，包含cordova.2.9.1.js，但没有cordova2.9.1.jar（你需要生成jar文件，plz按照步骤2）
第2步：然后你需要生成cordova2.9.1.jar，按照以下链接如何生成.jar文件 Where is cordova-2.7.0.jar?
请记住，你必须在你的android项目中使用正确的cordova.2.9.1.js及其各自的cordova.2.9.1.jar，并且＃34; Eclipse IDE＆＃34;
第3步：不要忘记在config.xml中添加相机权限（如果不起作用，请按照config.xml进行操作）
＆lt; ------- Config.xml -------＆gt;
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "myapp"
version = "1.0.0">
<name>Sky Lite </name>
<description>
I am Rocking guy.
</description>
<author href="http://google.com" email="procks@gmail.com">
This man rock your day.
</author>
<!--
If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
<!-- Customize your app and platform with the preference element. -->
<preference name="phonegap-version" value="3.6.0" /> <!-- all: current version of PhoneGap -->
<preference name="orientation" value="default" /> <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen -->
<preference name="prerendered-icon" value="true" /> <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types" value="true" /> <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend" value="false" /> <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor" value="false" /> <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion" value="7" /> <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="splashscreen" value="splash" />
<preference name="splashScreenDelay" value="10000" />
<preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory.
'preferExternal' is SDCard. -->
<!-- Plugins -->
<!-- Core plugins -->
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.CameraLauncher" />
<gap:plugin name="org.apache.cordova.media" />
<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" />
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
<gap:plugin name="com.phonegap.plugins.pushplugin" />
<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!--
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
-->
<!-- Define app icon for each platform. -->
<icon src="../../assets/www/icon.png" />
<icon src="../../assets/www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="../../assets/www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="../../assets/www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="../../assets/www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
<icon src="../../assets/www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
<icon src="../../assets/www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="../../assets/www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="../../assets/www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="../../assets/www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="../../assets/www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="../../assets/www/res/icon/webos/icon-64.png" gap:platform="webos" />
<icon src="../../assets/www/res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="../../assets/www/res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
<!-- Define app splash screen for each platform. -->
<gap:splash src="../../assets/www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="../../assets/www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="../../assets/www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="../../assets/www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="../../assets/www/res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
<gap:splash src="../../assets/www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="../../assets/www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="../../assets/www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="../../assets/www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="../../assets/www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
<!--
Define access to external domains.
<access /> - a blank access tag denies access to all external resources.
<access origin="*" /> - a wildcard access tag allows access to all external resource.
Otherwise, you can specify specific domains:
-->
<access origin=".*" />
<access origin="http://phonegap.com" />
<access origin="https://mts.googleapis.com" subdomains="true"/>
<access origin="https://mts0.googleapis.com" subdomains="true"/>
<access origin="https://mts1.googleapis.com" subdomains="true"/>
<access origin="https://maps.googleapis.com" subdomains="true"/>
<access origin="https://fonts.googleapis.com" subdomains="true"/>
<access origin="https://maps.gstatic.com" subdomains="true"/>
<access origin="https://csi.gstatic.com" subdomains="true"/>
<access origin="https://themes.googleusercontent.com" subdomains="true"/>
<feature name="App">
<param name="android-package" value="org.apache.cordova.App"/>
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker"/>
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.Device"/>
</feature>
<feature name="Accelerometer">
<param name="android-package" value="org.apache.cordova.AccelListener"/>
</feature>
<feature name="Compass">
<param name="android-package" value="org.apache.cordova.CompassListener"/>
</feature>
<feature name="Media">
<param name="android-package" value="org.apache.cordova.AudioHandler"/>
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.CameraLauncher"/>
</feature>
<feature name="Contacts">
<param name="android-package" value="org.apache.cordova.ContactManager"/>
</feature>
<feature name="File">
<param name="android-package" value="org.apache.cordova.FileUtils"/>
</feature>
<feature name="NetworkStatus">
<param name="android-package" value="org.apache.cordova.NetworkManager"/>
</feature>
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.Notification"/>
</feature>
<feature name="Storage">
<param name="android-package" value="org.apache.cordova.Storage"/>
</feature>
<feature name="FileTransfer">
<param name="android-package" value="org.apache.cordova.FileTransfer"/>
</feature>
<feature name="Capture">
<param name="android-package" value="org.apache.cordova.Capture"/>
</feature>
<feature name="Battery">
<param name="android-package" value="org.apache.cordova.BatteryListener"/>
</feature>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
</feature>
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.Echo"/>
</feature>
<feature name="Globalization">
<param name="android-package" value="org.apache.cordova.Globalization"/>
</feature>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
<!-- allow local pages -->
<!--
<access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/
<access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/
-->
</widget>
第4步：在AndroidManifest.xml文件中添加权限
＆lt; ------- AndroidManifest.xml ---------＆gt;
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
第5步：在自己的javascript文件中添加代码（Plz检查我的js代码）
＆lt; -----我的自定义JS文件-----＆gt;
$("#btnImageCaptured").on("click", function(e){
alert("image uploading");
e.preventDefault();
e.stopPropagation();
navigator.camera.getPicture(onSuccessImageAttachment, onFailImageAttachment,
{quality:50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
//encodingType: navigator.camera.EncodingType.PNG,
allowEdit: true,
targetWidth: 200, targetHeight: 200});
//targetWidth: 100, targetHeight: 150,
//mediaType : Camera.MediaType.PICTURE
//sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY});
});
function onSuccessImageAttachment(imageData){
window.alert("success");
//window.alert("Prishah took Image successfully : " + imageData);
window.location.href = "#orderAttachedLotImage";
$("#imgAttachedLot").attr('src','data:image/jpeg;base64,' + imageData);
//$("#imgAttachedLot").src = "data:image/jpeg;base64," + imageData;
//TODO : Insert new Image request to the server
//TODO : Display Image
}
function onFailImageAttachment(failMsg) {
window.alert("Failed to image uploading :" + failMsg);
}
第6步（可选）：尝试关闭多任务以查看是否有帮助。在您的Java应用程序中， 添加：
super.setBooleanProperty（＆＃34; keepRunning＆＃34;，false）;
＆lt; ------我的java代码---------＆gt;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.screen_hdpi_portrait);
super.setBooleanProperty("keepRunning", false); //For Camera
super.loadUrl("file:///android_asset/www/index.html", 2000);
//pinch zooming Capabilities
WebSettings ws = super.appView.getSettings();
ws.setSupportZoom(true);
ws.setBuiltInZoomControls(true);
}
答案 3 :(得分：0)
使用此按钮以桌面模式压缩相机
function onDeviceReady() {
try {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
} catch (e) {
}
}
答案 4 :(得分：-1)
您好您可以尝试使用Icenium http://www.icenium.com/并创建一个Phonegap项目，其中已经有完成相机API的示例应用程序，您可以在那里找到代码。
希望这有帮助