Cordova - 媒體捕獲

此外掛用於訪問裝置的捕獲選項。

步驟 1 - 安裝媒體捕獲外掛

要安裝此外掛，我們將開啟命令提示符並執行以下程式碼：

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

步驟 2 - 新增按鈕

由於我們想向您展示如何捕獲音訊、影像和影片，我們將在index.html中建立三個按鈕。

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

步驟 3 - 新增事件監聽器

下一步是在index.js中的onDeviceReady內新增事件監聽器。

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

步驟 4A - 捕獲音訊函式

index.js中的第一個回撥函式是audioCapture。要啟動錄音機，我們將使用captureAudio方法。我們使用兩個選項：limit將允許每次捕獲操作只錄制一個音訊剪輯，duration是聲音剪輯的秒數。

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

當我們按下音訊按鈕時，錄音機將開啟。

控制檯將顯示使用者捕獲的物件陣列。

步驟 4B - 捕獲影像函式

捕獲影像的函式與上一個函式相同。唯一的區別是這次我們使用的是captureImage方法。

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

現在我們可以點選影像按鈕啟動相機。

當我們拍照時，控制檯將記錄包含影像物件的陣列。

步驟 4C - 捕獲影片函式

讓我們重複一下捕獲影片的相同概念。這次我們將使用videoCapture方法。

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

如果我們按下影片按鈕，相機將開啟，我們可以錄製影片。

影片儲存後，控制檯將再次返回陣列。這次裡面包含影片物件。