マイクやカメラを使って音声・写真・ビデオデータを取得するプラグインを使う

Apache Cordovaで本格スマホアプリに挑戦しよう 第9回

マイク・カメラの音声、映像をキャプチャーするプラグイン（2）

サンプルアプリ

　図5はMediaCaptureプラグインを使ったサンプルアプリのキャプチャー画像です。サンプルアプリでは、各メディアのキャプチャーに成功すると、キャプチャーしたファイルの情報を表示します。

図5　サンプルアプリのキャプチャー画像

　また、リスト4は実際のプラグインのAPIを使った部分のサンプルコードです。

リスト4　MediaCaptureController.jsの抜粋

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を使ってファイルにアクセスが可能です。

表4　成功時に取得できるデータ

変数	説明
name	保存したファイル名(パスは含まない)
fullPath	パスを含んだファイル名
localURL	cdvfileプロトコルを用いたパス
type	MIMEタイプ
lastModifiedDate	最終更新日
size	ファイルサイズ

　（2）ではメディアデータの取得に失敗した場合のコールバック関数で、コールバック関数の引数を使ってエラー原因が取得できます。表5に示すプロパティが取得できます。

表5　エラー時に取得できるプロパティ

変数	説明
code	エラーコード。エラー定数で定義された数値
message	エラー時のメッセージ

　また、エラーコードは、表6で示すエラーが定義されていますので、エラーコードで評価する場合には、これらの定数と使うことをおすすめします。

表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のプロパティが指定できます。

表7　録音時のオプション指定

プロパティ名	説明
limit	取得するオーディオファイルの最大数。デフォルトでは1。(iOSでは利用不可)
duration	録音する最大秒数(Androidでは利用不可)

　（4）では写真取得アプリ（UI）を起動しています。写真取得時には表8のプロパティが指定できます。

表8　写真時のオプション指定

プロパティ名	説明
limit	取得するオーディオファイルの最大数。デフォルトでは1。(iOSでは利用不可)

　（5）ではビデオ取得アプリ（UI）を起動しています。ビデオ時には表9のプロパティが指定できます。

表9　ビデオ時のオプション指定

プロパティ名	説明
limit	取得するオーディオファイルの最大数。デフォルトでは1（iOSでは利用不可）。
duration	記録できる最大秒数
quality	記録する際の画質。1（デフォルト）では高画質で、0では低画質になる（iOSでは利用不可）。

最後に

　前回と今回でMediaプラグインを使ったオーディオファイルの再生、録画、そして、MediaCaptureプラグインを使ってオーディオ、画像、ビデオをキャプチャーする方法を紹介しました。

　Cordovaでの開発では主にWebView上で実行するためのJavaScriptを記述するため、カメラ映像を確認しながらの操作が必要なメディア関連のAPIを利用する機能は苦手な領域です。そのため、これらのデータを取得するには一度WebViewから出てしまい、別のアプリもしくはUI（ActivityやViewController）を使ってデータを取得する必要があります。

　これらの方法はWebViewを使ってどうしても実現できない機能を実装する場合にもよく利用されます。実際にそのような問題にぶつかり、自作プラグインで解決しなければいけなくなったときには、MediaCaptureプラグインのソースは参考になります。

　そのような異なった視点からも、MediaCaptureプラグインは非常に有益なので、これらの機能を使わなくても一度、どのような流れで処理が行われるかを確認するだけでも大変参考になるでしょう。

参考資料

• Apache Cordova
• Mediaプラグイン
• MediaCaptureプラグイン