Question

我无法从服务器上部署的html页面调用cordova相机插件。如果页面在应用程序本身中，它工作正常。这是一个使用apache cordova制作的混合应用程序，如果我们打开应用程序，打开html页面，如果我们点击捕获图像按钮，则会调用相机插件并打开设备相机。但当我点击捕获按钮时没有任何反应。

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>

Answer 1

我使用cordova相机插件尝试你的代码，它可以工作。

您是否拥有此权限，位于 AndroidManifest.xml：

中

 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

这是我的 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
});

在 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>

检查此文件或是否存在差异，我在Meizu M5 Note上的Android 6 API 23上进行了测试。

也尝试你的代码localy，如果它工作，这意味着你不能从远程服务器执行摄像头（然后验证你的url是在config.xml中声明）

<allow-intent href="http://your_url.com/*" />
<allow-intent href="https://your_url.com/*" />

我从远程服务器尝试，我在Android studio中遇到了这个错误：

Not implemented reached in virtual void android_webview::AwAutofillClient::OnFirstUserGestureObserved()

科尔多瓦相机插件无法正常工作

1 个答案: