CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/11/01 14:00
目次

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

サンプルアプリ

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

図5 サンプルアプリのキャプチャー画像
図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プラグインは非常に有益なので、これらの機能を使わなくても一度、どのような流れで処理が行われるかを確認するだけでも大変参考になるでしょう。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5