7

我第一次尝试使用 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>
4

5 回答 5

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

我希望这可以帮助你...

问候

于 2013-10-07T20:19:36.157 回答
3

这有点老了,但我想为以后可能出现的其他人提供有希望的见解......

我遇到的问题是由于我曾经在我的系统上执行过旧版的科尔多瓦 npm 安装,然后是 phonegap 的 npm 安装。

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 项目时,这会成为一个问题;我在这里遇到的情况。我为新项目升级到更新版本,然后需要向旧项目添加插件EXPLOSION OCCURS

到目前为止,我一直在使用 PhoneGap 的全局安装(根据 phonegap.com 上的官方文档)

sudo npm install -g phonegap

我的短期解决方案最终是将使用我需要的版本的旧项目中所需的插件目录 cp 到碰巧在同一版本上运行的另一个项目中。我的下一步将是使用 nvm 进行测试,看看我是否能够以这种方式在每个项目中使用多个 PhoneGap 安装,而不是始终使用一个不断变化的全球版本。

于 2013-11-21T15:25:12.627 回答
0

由于没有正确构建cordova,因此生成了未定义的问题,因此请按照以下步骤解决navigator.camera 问题

第 1 步:获取最新的 phonegap zip ( http://phonegap.com/install/ ),现在最新版本是 2.9.1,其中包含 cordova.2.9.1.js,但没有 cordova2.9.1.jar(你需要生成jar文件,请按照步骤2)

第2步:然后你需要生成cordova2.9.1.jar,点击下面的链接如何生成.jar文件 cordova-2.7.0.jar在哪里?

请记住,您必须在“Eclipse IDE”的 android 项目中拥有正确的 cordova.2.9.1.js 及其各自的 cordova.2.9.1.jar

第三步:不要忘记在你的 config.xml 中添加摄像头权限(请按照 config.xml,如果不行的话)

<------- 配置.xml ------->

<?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 文件中添加权限

<------- AndroidManifest.xml --------->

<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 文件中添加代码(请检查我的 js 代码)

<----- 我的自定义 JS 文件----->

$("#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("keepRunning", false);

<--------我的java代码--------->

@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);
	    
		}

于 2014-11-11T21:37:37.947 回答
0

使用它在桌面模式下抑制相机

function onDeviceReady() {
  try {
      pictureSource = navigator.camera.PictureSourceType;
      destinationType = navigator.camera.DestinationType;
  } catch (e) {

  }
}
于 2017-06-23T16:03:52.290 回答
-1

嗨,您可以尝试使用Icenium http://www.icenium.com/并创建一个Phonegap项目,其中已经完成了带有相机 API 的示例应用程序,您可以在那里找到代码。

希望这可以帮助

于 2013-09-09T05:31:32.860 回答