phonegap-擒获图片,音频,视屏
phonegap-捕获图片,音频,视屏
要点：
1. capture Api
2. captureAudio
3. captureImage
4. captureVideo
要点：
1. capture Api
2. captureAudio
3. captureImage
4. captureVideo
5. MediaFile.getFormatData 获取媒体文件的格式信息
可以参考官网查看API，自己写写Demo：http://www.phonegap100.com/doc/cordova_media_capture_capture.md.html#Capture
一、 capture Api简单介绍
capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过
navigator.device.capture来访问
方法：
capture.captureAudio 捕获音频
capture.captureImage 捕获图片
capture.captureVideo 捕获视屏
MediaFile.getFormatData 获取媒体文件的格式信息
二、 captureAudio 捕获音频
<style>
#supportedMode{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#message{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#audiocontainer{
width: 288px; height: 100px; position:relative;border:1px solid #b8b8b8;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
document.addEventListener("deviceready",onDeviceReady,false);
});
function onDeviceReady(){
$('#captureAudioBtn').click(function(){
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:2,duration:5});
})
}
//成功
function captureSuccess(mediaFiles){
var i;
for(i=0;i<mediaFiles.length;i++){
var fullPath= mediaFiles[i].fullPath;
var name= mediaFiles[i].name
/*
* console.log('第'+i+'个音频');
console.log('fullPath-->'+fullPath);
console.log('name-->'+name);
console.log("type--->" + mediaFiles[i].type);
console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);
console.log("size--->" + mediaFiles[i].size);
*/
$("#message").append ("filename:"+name +"path:"+fullPath+"<br/>");
$("#audiocontainer").append("<audio autoplay=true controls='controls' src='"+fullPath+"' >your browder doesn't support audio tag</audio>");
}
}
//失败的回调函数
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content" >
<a data-role="button" id="captureAudioBtn" >Capture Audio</a>
<div id="audiocontainer"></div>
<div id="message"></div>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div>
</body>
</html>
实现效果如下：
说明：
该方法通过设备默认的音频录制应用程序开始一个异步操作以采集音频录制。该操作允许设备用户在一个会话中同时采集多个录音。 当用户退出音频录制应用程序，或系统到达 CaptureAudioOptions 的limit 参数所定义的最大录制数时都会停止采集操作。如果没有设置 limit 参数的值，则使用其默认值1，也就是说当用户录制好一个音频剪辑后采集操作就会终止。
当采集操作结束后，系统会调用 CaptureCB 回调函数，传递一个包含所有采集到的音频剪辑文件的MediaFile 对象数组。如果用户在完成一个音频剪辑采集之前终止采集操作，系统会调用CaptureErrorCB 回调函数，并传递一个包含CaptureError.CAPTURE_NO_MEDIA_FILES错误代码的CaptureError 对象。
limit：在单个采集操作期间能够记录的音频剪辑数量最大值，必须设定为大于等于 1(默认值为1)。
duration：一个音频剪辑的最长时间，单位为秒。
mode：选定的音频模式，必须设定为 capture.supportedAudioModes 枚举中的值。
当采集操作结束后，系统会调用 CaptureCB 回调函数，传递一个包含所有采集到的音频剪辑文件的MediaFile 对象数组。如果用户在完成一个音频剪辑采集之前终止采集操作，系统会调用CaptureErrorCB 回调函数，并传递一个包含CaptureError.CAPTURE_NO_MEDIA_FILES错误代码的CaptureError 对象。
limit：在单个采集操作期间能够记录的音频剪辑数量最大值，必须设定为大于等于 1(默认值为1)。
duration：一个音频剪辑的最长时间，单位为秒。
mode：选定的音频模式，必须设定为 capture.supportedAudioModes 枚举中的值。
三、 capture.captureImage捕获图片
该方法通过设备的摄像头应用程序开始一个异步操作以采集图像。该操作允许设备用户在一个会话中同时采集多个图像。
当用户退出摄像头应用程序，或系统到达 CaptureImageOptions 的limit 参数所定义的最大图像数时都会停止采集操作。如果没有设置limit 参数的值，则使用其默认值1，也就是说当用户采集到一个图像后采集操作就会终止。
当 采集操作结束后，系统会调用CaptureCB 回调函数，传递一个包含每个采集到的图像文件的 MediaFile对象数组。如果用户在完成一个图像采集之 前终止采集操作，系统会调用CaptureErrorCB回调函数，并传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的CaptureError 对象。
比起camera 提供的照相功能,改对象提供的方法比较简单
当用户退出摄像头应用程序，或系统到达 CaptureImageOptions 的limit 参数所定义的最大图像数时都会停止采集操作。如果没有设置limit 参数的值，则使用其默认值1，也就是说当用户采集到一个图像后采集操作就会终止。
当 采集操作结束后，系统会调用CaptureCB 回调函数，传递一个包含每个采集到的图像文件的 MediaFile对象数组。如果用户在完成一个图像采集之 前终止采集操作，系统会调用CaptureErrorCB回调函数，并传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的CaptureError 对象。
比起camera 提供的照相功能,改对象提供的方法比较简单
例子代码：
<style>
#supportedMode{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#message{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#imgcontainer{
width: 288px; height: 100px; position:relative;border:1px solid #b8b8b8;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
document.addEventListener("deviceready",onDeviceReady,false);
});
function onDeviceReady(){
// alert("device ready");
$(".captureAudioBtn").click(function(){
navigator.device.capture.captureImage(captureSuccess, captureError, {limit:1});
})
}
//成功
function captureSuccess(mediaFiles){
var i;
for(i=0;i<mediaFiles.length;i++){
var fullPath= mediaFiles[i].fullPath;
var name= mediaFiles[i].name
console.log('第'+i+'张图片');
console.log('fullPath'+fullPath);
console.log('name'+name);
console.log("type--->" + mediaFiles[i].type);
console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);
console.log("size--->" + mediaFiles[i].size);
/** $('#message').append('fullPath->'+fullPath+','+'name->'+name+'<br>');
$("#imgcontainer").append("<img width=300 height=110 src='"+fullPath+"' />");
*/
}
}
//失败的回调函数
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content" >
<a data-role="button" class="captureAudioBtn" >拍照</a>
<div id="imgcontainer"></div>
<div id="message"></div>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div>
</body>
</html>
四、 capture.captureVideo 捕获视屏
MediaFile
“ 封装采集到的媒体文件的属性。
属性：
name：不含路径信息的文件名。（DOMString 类型）
fullPath： 包含文件名的文件全路径。（DOMString 类型）
type： MIME 类型。（DOMString 类型）
lastModifiedDate：文件最后修改的日期和时间。（日期类型）
size：以字节数表示的文件大小。（数字类型）
“ 封装采集到的媒体文件的属性。
属性：
name：不含路径信息的文件名。（DOMString 类型）
fullPath： 包含文件名的文件全路径。（DOMString 类型）
type： MIME 类型。（DOMString 类型）
lastModifiedDate：文件最后修改的日期和时间。（日期类型）
size：以字节数表示的文件大小。（数字类型）
五、 MediaFile.getFormatData 获取媒体文件的格式信息
MediaFileData
“ 封装媒体文件的格式信息。
属性：
codecs： 音频及视频内容的实际格式。（DOMString 类型）
bitrate：文件内容的平均比特率。对于图像文件，属性值为 0。（数字类型）
height： 用像素表示的图像或视频高度，音频剪辑的该属性值为 0。（数字类型）
width： 用像素表示的图像或视频的宽度，音频剪辑的该属性值为 0。（数字类型）
duration： 以秒为单位的视频或音频剪辑时长，图像文件的该属性值为 0。（数字类型）
MediaFileData
“ 封装媒体文件的格式信息。
属性：
codecs： 音频及视频内容的实际格式。（DOMString 类型）
bitrate：文件内容的平均比特率。对于图像文件，属性值为 0。（数字类型）
height： 用像素表示的图像或视频高度，音频剪辑的该属性值为 0。（数字类型）
width： 用像素表示的图像或视频的宽度，音频剪辑的该属性值为 0。（数字类型）
duration： 以秒为单位的视频或音频剪辑时长，图像文件的该属性值为 0。（数字类型）
四、五例子代码如下：
<style>
#supportedMode{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#message{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#audiocontainer{
width: 288px; height: 100px; position:relative;border:1px solid #b8b8b8;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
document.addEventListener("deviceready",onDeviceReady,false);
});
function onDeviceReady(){
$(".captureVideoBtn").click(function(){
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1});
})
}
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
var fullPath= mediaFiles[i].fullPath;
var name= mediaFiles[i].name
console.log('第'+i+'个音频');
console.log('fullPath-->'+fullPath);
console.log('name-->'+name);
console.log("type--->" + mediaFiles[i].type);
console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);
console.log("size--->" + mediaFiles[i].size);
mediaFiles[i].getFormatData(onSuccess,onError);
function onSuccess(fileData){
console.log("codecs---->" + fileData.codecs);
console.log("bitrate--->" + fileData.bitrate);
console.log("height---->" + fileData.height);
console.log("width---->" + fileData.width);
console.log("duration---->" + fileData.duration);
}
function onError(err){
console.log("失败"+err);
}
}
}
// Called if something bad happens.
//
function captureError(error) {
if (error.code == CaptureError.CAPTURE_INTERNAL_ERROR){
navigator.notification.alert("CaptureError.CAPTURE_INTERNAL_ERROR");
}
else if (error.code == CaptureError.CAPTURE_APPLICATION_BUSY){
navigator.notification.alert("CaptureError.CAPTURE_APPLICATION_BUSY");
}
else if (error.code == CaptureError.CAPTURE_INVALID_ARGUMENT){
navigator.notification.alert("CaptureError.CAPTURE_INVALID_ARGUMENT");
}
else if (error.code == CaptureError.CAPTURE_NO_MEDIA_FILES){
navigator.notification.alert("CaptureError.CAPTURE_NO_MEDIA_FILES");
}
else if (error.code == CaptureError.CAPTURE_NOT_SUPPORTED){
navigator.notification.alert("CaptureError.CAPTURE_NOT_SUPPORTED");
}
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content" >
<a data-role="button" class="captureVideoBtn" >Capture Video</a>
<div id="videocontainer"></div>
<div id="message"></div>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div>
</body>
</html>