CodeZine(コードジン)

特集ページ一覧

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

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

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

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

 続いて紹介するのは、録音だけではなく、写真撮影とビデオ撮影したデータを手軽に取得するプラグインです。

 先ほど紹介したMediaプラグインではマイクの音声取得の開始や停止などのある程度低レベルでのAPIが用意されていました。また、UIは自分で作る必要がありました。このプラグインでは、それぞれのデータを取得する際に標準アプリを使用するか、またアプリがOSで用意されていない場合には独自のUIを使って取得します。そして、取得したデータはファイル情報として取得することができます。

 録音や録画開始などの処理を指示するAPIはありませんが、自分で操作するためのUIを作る必要はありません。このために、UIを自分のアプリとして独自に作りたい場合に使うことは難しいですが、マイク、カメラを操作することが目的ではく、スマホで取得した音声や画像、映像ファイルを簡単に取得したい場合には利用価値があるプラグインです。

提供される画面

 UIは標準アプリもしくは、プラグイン自身が提供しているUIということで実際のUIがどうなるのか気になります。そこで、Andoroid 6.0とiOS 9.3で画面キャプチャーを取得したのが図2です。

図2 AndroidとiOSでの各メディア取得時の画面キャプチャー
図2 AndroidとiOSでの各メディア取得時の画面キャプチャー

 iOSの音声キャプチャーでは標準の画面が用意されていませんので、プラグインが独自に用意しています。

 また、実際に利用される画面、もしくはアプリはプラグイン内部では表2のように実装されています。

表2 利用される画面の起動方法(プラグイン内部の実装)
用途 Android(起動するIntent) iOS(ViewController)
音声 android.provider.MediaStore.Audio.Media.RECORD_SOUND_ACTION プラグイン側で実装
画像 android.provider.MediaStore.ACTION_IMAGE_CAPTURE UIImagePickerController
映像 android.provider.MediaStore.ACTION_VIDEO_CAPTURE UIImagePickerController

 Androidでは各アプリをIntentで起動しています。このため利用側で利用するアプリを変更することは可能で、それぞれのIntentに対応するアプリを作るか、別途、同様のアプリをインストールすれば変更することは可能です。ただし、利用者が実際にどのようなアプリを使うのかをコントールすることは難しいでしょう。

 また、iOSでは画面の文言が英語になっている場合があります。この場合には、XCode側で図3のように「Localization native developmet」を"Japan"にします。これで、文言が日本語に代わります。

図3 XCodeでの日本語設定
図3 XCodeでの日本語設定

インストール

 インストールするプラグインは、「cordova-plugin-media-capture」です。インストールはリスト2のように行います。

リスト2 media-captureプラグインのインストール方法
$cordova plugin add cordova-plugin-media-capture

プラグインの使い方

 このプラグインを利用するメソッドはリスト3のオブジェクトを通じて行います。ただし、devicereadyイベントの発生以降でしか利用できない点は忘れないようにして下さい。

リスト3 MediaCaptureプラグインのオブジェクト
navigator.device.capture

 また、各データ取得用のアプリ(画面)起動とデータ取得用のメソッドは表3のようになります。

表3 利用できるメソッド
メソッド名 概要
capture.captureAudio(successCallback,errorCallback,[options]) 録音用アプリの起動とデータの取得
capture.captureImage(successCallback, errorCallback, [options]) 写真取得用アプリの起動とデータの取得
capture.captureVideo(successCallback, errorCallback, [options]) ビデオ取得用アプリの起動とデータの取得

 これらのメソッドはすべて、図4のような動作をし、メソッドを実行するとそれぞれのメディアデータを取得するためのアプリもしくは別のUIが起動します。この起動した画面の振る舞いを制御することは基本的にできません。ただし、第三引数のoptionsを指定することで制御するできることもありますが、それほど多くはなく、また、OS毎にできることに差異があります。

 そして、データを取得が完了するとsuccessCallbackが実行されそこでファイル情報を取得するか、エラー、もしくはユーザ側からのキャンセルなどによりerrorCallbackが実行されます。

図4 MediaCaptureプラグインでの動作概要
図4 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