Cordova視訊錄製 - tw511教學網

這個外掛用於存取裝置捕獲選項。

第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 使記錄每一個捕獲操作只有一個音訊剪輯並持續時間的聲音片段的秒數。

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');
   }
	
}

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

步驟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');
   }
	
}

現在，我們可以點選 IMAGE 按鈕來啟動相機。

步驟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');
   }
	
}

如果按下 VIDEO 鍵，相機就會開啟，現在可以錄製視訊了。