【小编推荐】phonegap 捕获图片,音频,视屏api capture

2014-05-21   |   发布者:梁国芳   |   查看:3320次

app开发
一、capture Api 简单介绍

      capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过

      navigator.device.capture 来访问

      方法:

          capture.captureAudio 捕获音频
          capture.captureImage 捕获图片
          capture.captureVideo 捕获视屏

          MediaFile.getFormatData 获取媒体文件的格式信息

二、captureAudio           捕获音频

navigator.device.capture.captureAudio(CaptureCB captureSuccess,

                 CaptureErrorCB captureError, [CaptureAudioOptions options] );

// 限制采集上限为3个媒体文件,每个文件不超过10秒
var options = { limit: 3, duration: 10 };

navigator.device.capture.captureAudio(captureSuccess, captureError, options);

说明:
该方法通过设备默认的音频录制应用程序开始一个异步操作以采集音频录制。该操作允许设
备用户在一个会话中同时采集多个录音。

----------------------- Page 2-----------------------

当用户退出音频录制应用程序,或系统到达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-Capture</title>

<link rel="stylesheet" href="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.css" />
<script src="../jquery.mobile-1.1.1/jquery.js"></script>
<script src="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script>

<script type="text/javascript" charset="utf-8" src="../cordova-1.9.0.js"></script>
<script type="text/javascript">
     $(document).ready(function(){

                document.addEventListener("deviceready", myDeviceReadyListener, false);
     });

     myDeviceReadyListener = function(){
           $("#btn_captureAudio").click(function(){
                navigator.device.capture.captureAudio(captureSuccess, captureError,{limit:3});

           });
     }

           captureSuccess = function(mediaFiles){
                console.log("调用录音设备成功");
                for(var i=0;i<mediaFiles.length;i++) {

                     console.log("文件" + i);
                     console.log("name--->" + mediaFiles[i].name);
                     console.log("fullPath--->" + mediaFiles[i].fullPath);

                     console.log("type--->" + mediaFiles[i].type);
                     console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);
                     console.log("size--->" + mediaFiles[i].size);

                }
           }

----------------------- Page 3-----------------------

          captureError=function(err){

              console.log("调用录音设备失败," + err);
          }
</script>

</head>
<body>
     <div data-role="page">

          <div data-role="header">
              <h1>Capture</h1>
          </div>

          <div data-role="content">
              <a   id="btn_captureAudio"   href="#"  data-role="button">启动录音器进行录音
</a>

          </div>
          <div data-role="footer">
              <h4>&nbsp;</h4>

          </div>
     </div>
</body>

</html>

三、capture.captureImage 捕获图片

开启摄像头应用程序,返回采集到的图像文件信息。

navigator.device.capture.captureImage(

     CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureImageOptions options]

);

该方法通过设备的摄像头应用程序开始一个异步操作以采集图像。该操作允许设备用户在一个会话中同时

采集多个图像。

当用户退出摄像头应用程序,或系统到达CaptureImageOptions 的limit参数所定义的最大图像数时都会

停止采集操作。如果没有设置limit参数的值,则使用其默认值1,也就是说当用户采集到一个图像后采

集操作就会终止。

当采集操作结束后,系统会调用CaptureCB 回调函数,传递一个包含每个采集到的图像文件的MediaFile

对象数组。如果用户在完成一个图像采集之 前终止采集操作,系统会调用CaptureErrorCB 回调函数,并

传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的CaptureError 对象。

比起camera提供的照相功能,改对象提供的方法比较简单

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>PhoneGap-Capture</title>

----------------------- Page 4-----------------------

<link rel="stylesheet" href="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.css" />

<script src="../jquery.mobile-1.1.1/jquery.js"></script>

<script src="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script>

<script type="text/javascript" charset="utf-8" src="../cordova-1.9.0.js"></script>

<script type="text/javascript">

     $(document).ready(function(){

              document.addEventListener("deviceready", myDeviceReadyListener, false);

     });

     myDeviceReadyListener = function(){

        $("#btn_captureImage").click(function(){

              navigator.device.capture.captureImage(captureSuccess,  captureError,{limit:1})

              ;

         });

     }

         captureSuccess = function(mediaFiles){

              console.log("调用摄像头设备成功");

              for(var i=0;i<mediaFiles.length;i++) {

                   console.log("文件" + i);

                   console.log("name--->" + mediaFiles[i].name);

                   console.log("fullPath--->" + mediaFiles[i].fullPath);

                   console.log("type--->" + mediaFiles[i].type);

                   console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);

                   console.log("size--->" + mediaFiles[i].size);

              }

         }

         captureError=function(err){

              console.log("调用摄像头设备失败," + err);

         }

</script>

</head>

<body>

     <div data-role="page">

         <div data-role="header">

              <h1>Capture</h1>

         </div>

         <div data-role="content">

              <a id="btn_captureImage" href="#" data-role="button">启动摄像头进行拍照</a>

         </div>

         <div data-role="footer">

----------------------- Page 5-----------------------

              <h4>&nbsp;</h4>

         </div>

     </div>

</body>

</html>

四、capture.captureVideo                    捕获视屏

// 最多采集3个视频剪辑

var options = { limit: 3 };

navigator.device.capture.captureVideo(captureSuccess, captureError, options);

MediaFile

 “封装采集到的媒体文件的属性。

属性:

    name:不含路径信息的文件名。(DOMString 类型)

    fullPath:包含文件名的文件全路径。(DOMString 类型)

    type:MIME 类型。(DOMString 类型)

    lastModifiedDate:文件最后修改的日期和时间。(日期类型)

    size:以字节数表示的文件大小。(数字类型)

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>PhoneGap-Capture</title>

<link rel="stylesheet" href="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.css" />

<script src="../jquery.mobile-1.1.1/jquery.js"></script>

<script src="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script>

<script type="text/javascript" charset="utf-8" src="../cordova-1.9.0.js"></script>

<script type="text/javascript">

     $(document).ready(function(){

              document.addEventListener("deviceready", myDeviceReadyListener, false);

     });

     myDeviceReadyListener = function(){

----------------------- Page 6-----------------------

         $("#btn_captureVideo").click(function(){

     navigator.device.capture.captureVideo(captureSuccess,  captureError,{limit:1});

         });

     }

         captureSuccess = function(mediaFiles){

              console.log("调用摄像头设备成功");

              for(var i=0;i<mediaFiles.length;i++) {

                   console.log("文件" + i);

                   console.log("name--->" + mediaFiles[i].name);

                   console.log("fullPath--->" + mediaFiles[i].fullPath);

                   console.log("type--->" + mediaFiles[i].type);

                   console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);

                   console.log("size--->" + mediaFiles[i].size);

                   mediaFiles[i].getFormatData(function(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(err){

                       console.log("获取格式化信息失败!" + err);

                   });

              }

         }

         captureError=function(err){

              console.log("调用摄像头设备失败," + err);

         }

</script>

</head>

<body>

     <div data-role="page">

         <div data-role="header">

              <h1>Capture</h1>

         </div>

         <div data-role="content">

              <a id="btn_captureVideo" href="#" data-role="button">启动摄像头进行摄像</a>

         </div>

         <div data-role="footer">

----------------------- Page 7-----------------------

              <h4>&nbsp;</h4>

          </div>

     </div>

</body>

</html>

五、MediaFile.getFormatData                     获取媒体文件的格式信息

MediaFileData

 “                      封装媒体文件的格式信息。

属性:

    codecs:音频及视频内容的实际格式。(DOMString 类型)

    bitrate:文件内容的平均比特率。对于图像文件,属性值为0。(数字类型)

    height:用像素表示的图像或视频高度,音频剪辑的该属性值为0。(数字类型)

    width:用像素表示的图像或视频的宽度,音频剪辑的该属性值为0。(数字类型)

    duration: 以秒为单位的视频或音频剪辑时长,图像文件的该属性值为0。(数字类型)

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>PhoneGap-Capture</title>

<link rel="stylesheet" href="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.css" />

<script src="../jquery.mobile-1.1.1/jquery.js"></script>

<script src="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script>

<script type="text/javascript" charset="utf-8" src="../cordova-1.9.0.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

                        document.addEventListener("deviceready",        myDeviceReadyListener,

false);

 });

 myDeviceReadyListener = function(){

                      $("#btn_captureVideo").click(function(){

 navigator.device.capture.captureVideo(captureSuccess,   captureError,{limit:1});

                      });

 }

----------------------- Page 8-----------------------

                      captureSuccess = function(mediaFiles){

                        console.log("调用摄像头设备成功");

                        for(var i=0;i<mediaFiles.length;i++) {

                             console.log("文件" + i);

                             console.log("name--->" + mediaFiles[i].name);

                             console.log("fullPath--->" + mediaFiles[i].fullPath);

                             console.log("type--->" + mediaFiles[i].type);

                             console.log("lastModifiedDate--->"                               +

mediaFiles[i].lastModifiedDate);

                             console.log("size--->" + mediaFiles[i].size);

                            mediaFiles[i].getFormatData(function(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(err){

                                 console.log("获取格式化信息失败!" + err);

                             });

                        }

                      }

                      captureError=function(err){

                        console.log("调用摄像头设备失败," + err);

                      }

</script>

</head>

<body>

 <div data-role="page">

                      <div data-role="header">

                        <h1>Capture</h1>

                      </div>

                      <div data-role="content">

                        <a id="btn_captureVideo" href="#" data-role="button">启动摄像头进行摄

像</a>

                      </div>

                      <div data-role="footer">

                        <h4>&nbsp;</h4>

                      </div>

 </div>

----------------------- Page 9-----------------------

</body>

</html>