cordova media-capture插件

介紹

這個插件提供了訪問設備的圖像、音頻錄製和視頻錄製能力。

安裝

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();

運行：

點擊“開始錄像”