[英]Cordova camera plugin not working
I am not able to call the cordova camera plugin from the html page deployed on the server. 我无法从服务器上部署的html页面调用cordova相机插件。 It is working fine if the page is in the app itself.
如果页面在应用程序本身中,则工作正常。 This is a hybrid app made using apache cordova, where if we open the app the html page is opened in which if we click on capture image button a camera plugin is called and device camera opens.
这是一个使用apache cordova制作的混合应用程序,如果打开该应用程序,则会打开html页面,如果单击“捕获图像”按钮,则会调用相机插件并打开设备相机。 but when i am clicking on the capture button nothing happens.
但是当我单击捕获按钮时,什么也没有发生。
var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); document.getElementById("captureImage").addEventListener("click", captureImage); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } }; app.initialize(); document.getElementById("captureImage").addEventListener("click", captureImage); document.getElementById("selectImageFromGallery").addEventListener("click", selectImageFromGallery); document.getElementById("uploadFile").addEventListener("click", uploadFile); //data uri method function captureImage() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, targetWidth:200, targetHeight:200, allowEdit : false, saveToPhotoAlbum: true, encodingType: Camera.EncodingType.JPEG, destinationType: Camera.DestinationType.DATA_URL //destinationType: Camera.DestinationType.FILE_URL }); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; //console.log(image.src); console.log(imageData); alert(imageData); } function onFail(message) { alert('Failed because: ' + message); console.log(message); } }
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <div class="app"> <img id = "myImage"></img> <button id = "captureImage">CAPTURE IMAGE</button> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
I try your code with the cordova camera plugin and it works. 我用cordova相机插件尝试您的代码,它可以工作。
Do you have this permission, in your AndroidManifest.xml : 您是否在AndroidManifest.xml中具有此权限:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
And here is my cordova_plugins.js : 这是我的cordova_plugins.js:
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
"id": "cordova-plugin-camera.Camera",
"clobbers": [
"Camera"
]
},
{
"file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js",
"id": "cordova-plugin-camera.CameraPopoverOptions",
"clobbers": [
"CameraPopoverOptions"
]
},
{
"file": "plugins/cordova-plugin-camera/www/Camera.js",
"id": "cordova-plugin-camera.camera",
"clobbers": [
"navigator.camera"
]
},
{
"file": "plugins/cordova-plugin-camera/www/CameraPopoverHandle.js",
"id": "cordova-plugin-camera.CameraPopoverHandle",
"clobbers": [
"CameraPopoverHandle"
]
},
{
"file": "plugins/cordova-plugin-inappbrowser/www/inappbrowser.js",
"id": "cordova-plugin-inappbrowser.inappbrowser",
"clobbers": [
"cordova.InAppBrowser.open",
"window.open"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.2",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-camera": "2.4.1",
"cordova-plugin-inappbrowser": "1.7.1"
};
// BOTTOM OF METADATA
});
And in the config.xml : 并在config.xml中:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.melvita.photo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<preference name="loglevel" value="DEBUG" />
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>
<allow-intent href="market:*" />
<name>melvita photo</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
</widget>
Check with this file or if there is difference, i tested on Android 6 API 23 on Meizu M5 Note. 检查此文件或是否有差异,我在魅族M5 Note的Android 6 API 23上进行了测试。
Also try your code localy, if it works, it means that you can not execute camera from an distant server ( then verify that your url is declared in config.xml ) 另外,请尝试使用本地代码,如果可行,则意味着您无法从远程服务器执行照相机(然后验证是否在config.xml中声明了您的网址)
<allow-intent href="http://your_url.com/*" />
<allow-intent href="https://your_url.com/*" />
I try from distant server and i got this error in Android studio : 我从远程服务器尝试,并在Android Studio中收到此错误:
Not implemented reached in virtual void android_webview::AwAutofillClient::OnFirstUserGestureObserved()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.