介绍
这个插件提供了访问设备的图像、音频录制和视频录制能力。
安装
cordova plugin add cordova-plugin-media-capture
使用方法
这个插件定义了全局navigator.device.capture对象
虽然在全局范围内，但是需要使用在deviceready事件之后。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.device.capture);
}
支持的平台Supported Platforms
· Amazon Fire OS
· Android
· BlackBerry 10
· Browser
· iOS
· Windows Phone 7 and 8
· Windows 8
· Windows
对象Objects
· Capture
· CaptureAudioOptions
· CaptureImageOptions
· CaptureVideoOptions
· CaptureCallback
· CaptureErrorCB
· ConfigurationData
· MediaFile
· MediaFileData
方法Methods
· capture.captureAudio
· capture.captureImage
· capture.captureVideo
· MediaFile.getFormatData
属性Properties
supportedAudioModes: 设备所支持的音频格式。（组态资料[ ]）
supportedImageModes: 记录图像的大小和格式支持的设备。（组态资料[ ]）
supportedVideoModes: 录音录像设备所支持的分辨率和格式。（组态资料[ ]）
capture.captureAudio
开始对捕获的音频剪辑文件的录音机应用程序并返回信息。
navigator.device.capture.captureAudio(
CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureAudioOptions options]
);
支持的平台Supported Platforms
· Amazon Fire OS
· Android
· BlackBerry 10
· iOS
· Windows Phone 7 and 8
· Windows 8
· Windows
capture.captureImage
启动相机应用和返回信息的捕获的图像文件。
navigator.device.capture.captureImage(
CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureImageOptions options]
);
支持的平台Supported Platforms
· Amazon Fire OS
· Android
· BlackBerry 10
· Browser
· iOS
· Windows Phone 7 and 8
· Windows 8
· Windows
capture.captureVideo
开始拍摄的视频剪辑文件的视频录像机应用并返回信息。
navigator.device.capture.captureVideo(
CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureVideoOptions options]
);
支持的平台Supported Platforms
· Amazon Fire OS
· Android
· BlackBerry 10
· iOS
· Windows Phone 7 and 8
· Windows 8
· Windows
示例
示例一：
打开手机系统默认录音机，录音完毕后，输出录音文件对象，取出对象内的信息
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<style>
.line{
padding: 10px;
}
</style>
</head>
<body>
<div class="app">
<h1>MediaCapture插件</h1>
<div class="line"><button id="record">开始录音</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js：
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
var _this = this;
document.getElementById("record").onclick = function(){
_this.audioCapture();
}
},
audioCapture: function() {
// 开始录音（最长录制时间：10秒）
navigator.device.capture.captureAudio(onSuccess, onError, {duration: 10});
// 录制成功
function onSuccess(mediaFiles) {
var i, len;
// 遍历获取录制的文件
// 注意：iOS只支持一次录制一个视频或音频
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
console.log(mediaFiles[i]);
var path = mediaFiles[i].fullPath;
path = decodeURIComponent(path);
var localURL = mediaFiles[i].localURL;
localURL = decodeURIComponent(localURL);
alert("录制成功！\n\n"
+ "文件名：" + mediaFiles[i].name + "\n"
+ "大小：" + mediaFiles[i].size + "\n\n"
+ "localURL地址：" + localURL + "\n\n"
+ "fullPath地址：" + path);
}
}
//录制失败
function onError(error) {
alert('录制失败！错误码：' + error.code);
}
}
};
app.initialize();
运行：
点击“开始录音”按钮后，会打开手机系统的录音机
弹窗显示内容
备注：
返回的MediaFile对象内的url会有编码问题
需要使用decodeURIComponent函数进行解码，否则就是这样
示例二：
录像功能
打开手机系统摄像头，录像完毕后，输出视频文件对象，取出对象内的信息
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<style>
.line{
padding: 10px;
}
</style>
</head>
<body>
<div class="app">
<h1>MediaCapture插件</h1>
<div class="line"><button id="video">开始录像</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js：
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
var _this = this;
document.getElementById("video").onclick = function(){
_this.videoCapture();
}
},
videoCapture: function() {
//开始录像（最长录制时间：10秒）
navigator.device.capture.captureVideo(onSuccess, onError, {duration: 10});
//录制成功
function onSuccess(mediaFiles) {
var i, path, len;
//遍历获取录制的文件（iOS只支持一次录制一个视频或音频）
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
console.log(mediaFiles);
path = mediaFiles[i].fullPath;
alert("录制成功！\n\n"
+ "文件名：" + mediaFiles[i].name + "\n"
+ "大小：" + mediaFiles[i].size + "\n\n"
+ "localURL地址：" + mediaFiles[i].localURL + "\n\n"
+ "fullPath地址：" + path);
}
}
//录制失败
function onError(error) {
alert('录制失败！错误码：' + error.code);
}
}
};
app.initialize();
运行：
点击“开始录像”
打开手机摄像头进行录像
录像完毕后确认
弹窗显示录像的信息内容