介绍
这个插件提供了访问设备的图像、音频录制和视频录制能力。
安装
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();
运行：
Image may be NSFW.Clik here to view.
点击“开始录音”按钮后，会打开手机系统的录音机
Image may be NSFW.Clik here to view.
Image may be NSFW.
Clik here to view.
弹窗显示内容
Image may be NSFW.Clik here to view.
备注：
返回的MediaFile对象内的url会有编码问题
Image may be NSFW.
Clik here to view.
需要使用decodeURIComponent函数进行解码，否则就是这样
Image may be NSFW.Clik here to view.
示例二：
录像功能
打开手机系统摄像头，录像完毕后，输出视频文件对象，取出对象内的信息
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();
运行：
点击“开始录像”
Image may be NSFW.Clik here to view.
打开手机摄像头进行录像
Image may be NSFW.Clik here to view.
录像完毕后确认
Image may be NSFW.Clik here to view.
弹窗显示录像的信息内容
Image may be NSFW.Clik here to view.