phonegap 捕获图片,音频,视屏 api capture
一、 capture Api 简单介绍
capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问
方法：
capture.captureAudio 捕获音频
capture.captureImage 捕获图片
capture.captureVideo 捕获视屏
MediaFile.getFormatData 获取媒体文件的格式信息
二、 captureAudio 捕获音频
该方法通过设备默认的音频录制应用程序开始一个异步操作以采集音频录制。该操作允许设 备用户在一个会话中同时采集多个录音。
当用户退出音频录制应用程序，或系统到达 CaptureAudioOptions 的 limit 参数所定义的最 大录制数时都会停止采集操作。
如果没有设置 limit 参数的值，则使用其默认值 1，也就是 说当用户录制好一个音频剪辑后采集操作就会终止。
当采集操作结束后，系统会调用 CaptureCB 回调函数，传递一个包含所有采集到的音频剪辑 文件的 MediaFile 对象数组。
如果用户在完成一个音频剪辑采集之前终止采集操作，系统会 调用 CaptureErrorCB 回调函数，并传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的 CaptureError 对象。
limit：在单个采集操作期间能够记录的音频剪辑数量最大值，必须设定为大于等于 1(默认 值为 1)。
duration：一个音频剪辑的最长时间，单位为秒。
mode：选定的音频模式，必须设定为 capture.supportedAudioModes 枚举中的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <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});//limit:2表示录音的次数，duration表示一个音频剪辑的最长时间，单位为秒。 }) } //成功 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>
三、 capture.captureImage 捕获图片
开启摄像头应用程序，返回采集到的图像文件信息。
该方法通过设备的摄像头应用程序开始一个异步操作以采集图像。该操作允许设备用户在一个会话中同时 采集多个图像。
当用户退出摄像头应用程序，或系统到达 CaptureImageOptions 的 limit 参数所定义的最大图像数时都会 停止采集操作。
如果没有设置 limit 参数的值，则使用其默认值 1，也就是说当用户采集到一个图像后采 集操作就会终止。
当 采集操作结束后，系统会调用 CaptureCB 回调函数，传递一个包含每个采集到的图像文件的 MediaFile 对象数组。
如果用户在完成一个图像采集之 前终止采集操作，系统会调用 CaptureErrorCB 回调函数，并 传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的 CaptureError 对象。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <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(){ // alert("device ready"); $(".captureAudioBtn").click(function(){ navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2}); //这个方法可以多次调用，调用次数由 limit:2决定 }) } //成功 回调函数里包含一个数组 数组里是每次拍照的信息 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=300 src='"+fullPath+"' />"); } } //失败的回调函数 function captureError(error) { var msg = 'An error occurred during capture: ' + error.code; navigator.notification.alert(msg, null, 'Uh oh!');//这里是调用原生的alert } </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 捕获视屏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <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: 2}); }) } 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>
五、 MediaFile.getFormatData 获取媒体文件的格式信息
MediaFileData “ 封装媒体文件的格式信息。
属性：
codecs： 音频及视频内容的实际格式。（DOMString 类型）
bitrate：文件内容的平均比特率。对于图像文件，属性值为 0。（数字类型）
height： 用像素表示的图像或视频高度，音频剪辑的该属性值为 0。（数字类型）
width： 用像素表示的图像或视频的宽度，音频剪辑的该属性值为 0。（数字类型）
duration： 以秒为单位的视频或音频剪辑时长，图像文件的该属性值为 0。（数字类型）
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); }
详细代码参考第四capture.captureVideo 捕获视屏