Телефонная карта Cordova 3.0.0 навигатор.камера не определена
Я пытаюсь использовать родные Плагины 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
Я также добавил Кордову.файлы js.
<script type="text/javascript" charset="utf-8" src="js/cordova-js/lib/cordova.js"></script>
5 ответов:
Где вы тестируете свой код?
Я не знаю, нужен ли вам еще 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
Я надеюсь, что это может помочь вам...
С уважением
Это немного устарело, но я хотел бы дать надежду на понимание кому-нибудь еще, что может прийти позже...
Проблема, с которой я столкнулся, была вызвана тем, что я сделал более старую установку 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 ожидает каталог плагинов
Орг.апаш.Кордова.ядро.камера орг..апаш.Кордова.ядро.X
В последнем выпуске 3.1.0 было удалено основное пространство имен а эти сейчас выглядят так
Орг.апаш.Кордова.камера орг..апаш.Кордова.X
В обычных сценариях использования я не думаю, что это то, с чем люди сталкиваются ежедневно. Большинство проектов, которые я предполагаю, генерируются, и разработчик добавляет плагины, которые им нужны, и придерживается определенного выпуска PhoneGap, пока в какой-то момент, возможно, они не решат обновить проект. Где это становится проблемой, как я вижу, когда разработчик начинает работать над несколько проектов PhoneGap одновременно; случай, который я имею здесь. Я обновился до более новой версии для нового проекта, затем мне нужно было добавить плагины к старому проекту происходит взрыв
До этого момента я использовал глобальную установку PhoneGap (согласно официальной документации по адресу phonegap.com)
sudo npm install -g phonegapМое краткосрочное решение закончилось тем, что я перевел нужный каталог плагинов из старого проекта, который использовал нужную мне версию, в мой другой проект, который работает на одной и той же версии. Мои следующие шаги будут заключаться в том, чтобы протестировать использование nvm и посмотреть, смогу ли я использовать несколько установок PhoneGap таким образом для каждого проекта, а не иметь постоянно меняющуюся глобальную версию.
Неопределенная проблема, возникшая из-за неправильной сборки cordova, поэтому, пожалуйста, выполните следующие действия для решения navigator.проблема камеры
Шаг 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 где Кордова-2.7.0.банку?
Помните, что у вас должна быть правильная Кордова.2.9.1.js и его соответствующая cordova.2.9.1.jar в вашем проекте android в "Eclipse IDE"
Шаг 3: Не забудьте добавить разрешение камеры в свою конфигурацию.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-файл
<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 check my js Code )
$("#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-приложении, добавить:
Супер.setBooleanProperty ("keepRunning", false);
@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); }
Используйте это для подавления камеры в режиме рабочего стола
function onDeviceReady() { try { pictureSource = navigator.camera.PictureSourceType; destinationType = navigator.camera.DestinationType; } catch (e) { } }
Привет, вы можете попробовать использовать
Iceniumhttp://www.icenium.com/ и там создайте проектPhonegap, где уже будет сделано примерное приложение с API камеры, и вы можете найти код там.Надеюсь, это поможет