マイク・カメラの音声、映像をキャプチャーするプラグイン（2）
サンプルアプリ
図5はMediaCaptureプラグインを使ったサンプルアプリのキャプチャー画像です。サンプルアプリでは、各メディアのキャプチャーに成功すると、キャプチャーしたファイルの情報を表示します。
また、リスト4は実際のプラグインのAPIを使った部分のサンプルコードです。
function MediaCaptureController($scope){
//（1）メディア取得成功時のコールバック
function captureSuccess(mediaFiles){
var size = mediaFiles.length;
for(var i = 0; i < size; i++){
var file = mediaFiles[i];
console.log(file.name);
}
// AngularJSのテンプレート側にファイル詳細を表示
$scope.$apply(function(){
$scope.files = mediaFiles;
});
};
//（2）メディア取得失敗時のコールバック関数
function captureError(error){
if(error.code == CaptureError.CAPTURE_NO_MEDIA_FILES){
window.alert("ユーザによりキャンセルされました");
}
else {
window.alert('Error code: ' + error.code + " - " + error.message);
}
};
$scope.captureAudio = function(){
//（3）録音アプリ（UI）の起動
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:1});
};
$scope.captureImage = function(){
//（4）写真取得アプリ（UI）の起動
navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2});
}
$scope.captureVideo = function(){
//（5）ビデオ取得アプリ（UI）の起動
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit:1});
};
};
（1）ではキャプチャーしたファイルを取得するためのロールバック関数の定義処理です。取得できるファイルは1つとは限らないために表4に示すプロパティを保持するオブジェクトの配列として取得できます。ファイルのアップロードやHTML側で再生やプレビューなどをするには、localURLを使ってファイルにアクセスが可能です。
| 変数 | 説明 |
|---|---|
| name | 保存したファイル名(パスは含まない) |
| fullPath | パスを含んだファイル名 |
| localURL | cdvfileプロトコルを用いたパス |
| type | MIMEタイプ |
| lastModifiedDate | 最終更新日 |
| size | ファイルサイズ |
（2）ではメディアデータの取得に失敗した場合のコールバック関数で、コールバック関数の引数を使ってエラー原因が取得できます。表5に示すプロパティが取得できます。
| 変数 | 説明 |
|---|---|
| code | エラーコード。エラー定数で定義された数値 |
| message | エラー時のメッセージ |
また、エラーコードは、表6で示すエラーが定義されていますので、エラーコードで評価する場合には、これらの定数と使うことをおすすめします。
| 定数 | 説明 |
|---|---|
| CaptureError.CAPTURE_INTERNAL_ERR | 内部エラー |
| CaptureError.CAPTURE_APPLICATION_BUSY | 他のアプリケーションがキャプチャーする為のリソースを使っているなどのエラー |
| CaptureError.CAPTURE_INVALID_ARGUMENT | メソッド起動時のoptions指定の間違い |
| CaptureError.CAPTURE_NO_MEDIA_FILES | ユーザのキャンセルなどによるデータなしエラー |
| CaptureError.CAPTURE_PERMISSION_DENIED | ユーザ操作によるキャプチャー要求の拒否 |
| CaptureError.CAPTURE_NOT_SUPPORTED | キャプチャー機能がサポートされていない場合のエラー |
（3）では録音アプリ（UI）を起動しています。録音時には表7のプロパティが指定できます。
| プロパティ名 | 説明 |
|---|---|
| limit | 取得するオーディオファイルの最大数。デフォルトでは1。(iOSでは利用不可) |
| duration | 録音する最大秒数(Androidでは利用不可) |
（4）では写真取得アプリ（UI）を起動しています。写真取得時には表8のプロパティが指定できます。
| プロパティ名 | 説明 |
|---|---|
| limit | 取得するオーディオファイルの最大数。デフォルトでは1。(iOSでは利用不可) |
（5）ではビデオ取得アプリ（UI）を起動しています。ビデオ時には表9のプロパティが指定できます。
| プロパティ名 | 説明 |
|---|---|
| limit | 取得するオーディオファイルの最大数。デフォルトでは1（iOSでは利用不可）。 |
| duration | 記録できる最大秒数 |
| quality | 記録する際の画質。1（デフォルト）では高画質で、0では低画質になる（iOSでは利用不可）。 |
最後に
前回と今回でMediaプラグインを使ったオーディオファイルの再生、録画、そして、MediaCaptureプラグインを使ってオーディオ、画像、ビデオをキャプチャーする方法を紹介しました。
Cordovaでの開発では主にWebView上で実行するためのJavaScriptを記述するため、カメラ映像を確認しながらの操作が必要なメディア関連のAPIを利用する機能は苦手な領域です。そのため、これらのデータを取得するには一度WebViewから出てしまい、別のアプリもしくはUI（ActivityやViewController）を使ってデータを取得する必要があります。
これらの方法はWebViewを使ってどうしても実現できない機能を実装する場合にもよく利用されます。実際にそのような問題にぶつかり、自作プラグインで解決しなければいけなくなったときには、MediaCaptureプラグインのソースは参考になります。
そのような異なった視点からも、MediaCaptureプラグインは非常に有益なので、これらの機能を使わなくても一度、どのような流れで処理が行われるかを確認するだけでも大変参考になるでしょう。
