问题描述
我制作了一个简单的cordova测试应用来测试运行媒体捕捉插件，点击录制音频、捕捉图像或录制视频的按钮没有任何反应
以下是我在cordova项目目录中安装的插件：
<button id = "audioCapture">AUdio</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>
以下是JS文件的代码，我分别添加了音频捕获、图像捕获和视频捕获功能。
document.getElementById("audioCapture").addEventListener("click",audioCapture);
document.getElementById("imageCapture").addEventListener("click",imageCapture);
document.getElementById("videoCapture").addEventListener("click",videoCapture);
function audioCapture() {
var options = {
limit: 1,duration: 10
};
navigator.device.capture.captureAudio(onSuccess,onError,options);
function onSuccess(mediaFiles) {
var i,path,len;
for (i = 0,len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
}
}
function onError(error) {
navigator.notification.alert('Error code: ' + error.code,null,'Capture Error');
}
}
function imageCapture() {
var options = {
limit: 1
};
navigator.device.capture.captureImage(onSuccess,'Capture Error');
}
}
function videoCapture() {
var options = {
limit: 1,duration: 10
};
navigator.device.capture.captureVideo(onSuccess,'Capture Error');
}
}
解决方法
Cordova 必须完全加载才能使用设备 API
为此，cordova 提供了 deviceready 事件
在 HTML 正文中添加 onload 函数
<body onload="onLoad()">
在JS中
function onLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
// ready to use device APIs
function onDeviceReady() {
console.log(navigator.device);
// document.getElementById("audioCapture").addEventListener("click",audioCapture);
}