Cordova-メディアキャプチャ

このプラグインは、デバイスのキャプチャオプションにアクセスするために使用されます。

手順1-メディアキャプチャプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*を開き、次のコードを実行します-

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

ステップ2-ボタンを追加する

音声、画像、動画のキャプチャ方法を説明するため、 indexl に3つのボタンを作成します。

<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* メソッドを使用します。 2つのオプションを使用しています- *limit* は、単一のキャプチャ操作ごとに1つのオーディオクリップのみを記録し、 *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');
   }
}

*AUDIO* ボタンを押すと、サウンドレコーダーが開きます。

Cordova Capture Audio

コンソールには、ユーザーがキャプチャしたオブジェクトの配列が返されます。

Cordova Capture Audio Log

ステップ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 ボタンをクリックしてカメラを起動できます。

Cordova Capture Image

写真を撮ると、コンソールは画像オブジェクトで配列を記録します。

Cordova Capture Image Log

ステップ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* ボタンを押すと、カメラが開き、ビデオを録画できます。

Cordova Capture Video

ビデオが保存されると、コンソールはもう一度配列を返します。今回は内部にビデオオブジェクトがあります。

Cordova Capture Video Log

Cordova-media-capture

目次