ぼくが Fork した cordova-background-video を紹介する

cordova-background-video という Cordova プラグインがある。HTML ページの背景に撮影中の映像を表示することができるので、ビデオのプレビュー画面の上に任意の HTML 要素を配置したりすることができる。

以前、このプラグインを Fork して、iOS デバイスで 1080p の動画が撮影できるように改造した話をしたが、このプラグインの特徴や使い方を紹介しようと思う。

• Cordova アプリのページ背景に動画録画中の映像を表示する cordova-background-video プラグインを Fork して 1080p 動画を録画できるようにした

Fork したコードは以下。

• GitHub - Neos21/cordova-background-video: A simple Cordova/Phonegap plugin to capture video and then display it onscreen via a transparent overlay without affecting app functionality.

プラグインのインストール方法

自分が Fork したプラグインは GitHub で公開しているので、以下のようにインストールする。

$ cordova plugin add https://github.com/Neos21/cordova-background-video.git

録画開始

動画の録画を開始するには、cordova.plugins.backgroundvideo.start() メソッドを叩く。

cordova.plugins.backgroundvideo.start('videoFileName', 'back', () => {
  console.log('録画開始');
}, (error) => {
  console.log('録画開始に失敗', error);
});

() => 部分は ES2015 のアロー関数という記法で、function() と同義。Cordova アプリでも Babel でトランスパイルすることなく ES2015 の記法が使えるようになっているようなので使ってみた。

第1引数がファイル名になる。これの後ろに .mp4 が付く。第2引数は back でバックカメラ、front でフロントカメラ (自撮り) を指定できる。

このメソッドを叩くと、ページの背景に録画中の映像が表示される。html 要素に background-color を指定してしまうと、プレビューが隠れてしまうようなので注意。

iOS のカメラ実装には詳しくないのだが、このプラグインは AVFoundation というフレームワークを使っている。UI を加工しやすいようなのでこのプラグインで使われていたのだろう。どうも純正のカメラアプリで撮った時より画質が落ちるっぽいのだが、録画開始・終了時にシャッター音が鳴らないという副次的な効果があったりもする。

• 参考 : iOSの3種類のカメラ実装 - Qiita

動画ではなく写真撮影の場合だと、cordova-plugin-camera-preview という類似プラグインがあるので、こちらも見てみると良いだろう。

• 参考 : GitHub - cordova-plugin-camera-preview/cordova-plugin-camera-preview: Cordova plugin that allows camera interaction from HTML code

録画中はフォーカスや露出等の設定はできない。プレビューは完全に表示のみで、画面をタップしたりしても何も反応しない。完全にオートフォーカス・自動露出補正にお任せになる。

録画停止

録画を終了するには、cordova.plugins.backgroundvideo.stop() を叩く。

cordova.plugins.backgroundvideo.stop((fileUrl) => {
  console.log('録画終了・次の File URL に動画ファイルを保存しました', fileUrl);
}, (error) => {
  console.log('録画終了に失敗', error);
});

録画を終了させると、録画したファイルの保存場所を示す URL を返す。

動画ファイルは cordova.file.cacheDirectory 直下に、start() 時に指定した 【fileName】 + '.mp4' というファイル名で保存される。もし fileName.mp4 という同名のファイルが既にあった場合は、fileName_1.mp4 というようにアンスコ + 連番を自動付与してくれて別名保存されるので、既存ファイルを上書きすることはない。

Fork 元の状態だと、画質や音声の有無、保存先ディレクトリを選択できるかのような引数が用意されていたが、それらはいつの間にか使われなくなっていたので、Fork した時に JS 側で記述する引数を整理した。結局、

• 動画は 1080p クオリティ固定で撮影させる (音声アリ)
• ファイルの保存先は cordova.file.cacheDirectory 直下に固定

とした。

動画ファイルの扱い

動画ファイルはカメラロールには保存されず、cordova.file.cacheDirectory 直下に保存される。データを取り出すには iTunes で同期するとかしないといけない。

動画ファイルをカメラロールに保存するには cordova-plugin-photo-library といった別のプラグインを利用する必要がある。ただ、自分で試した限りだと、stop() のコールバック関数内でカメラロールに保存しようとすると、アプリ起動後の初回の録画のみ保存でき、2回目の録画から保存に失敗するようになってしまった。コールバック関数内でも少し実行のタイミングを遅らせてあげないといけないっぽい？

また、なぜか cordova-plugin-photo-library ではフォトライブラリにファイルを保存するためのアクセス許可がうまく得られなかった。cordova-plugin-ios-camera-permissions というアクセス許可を得られるようなプラグインがあったので入れてみたがうまくいかず。

苦肉の策で、cordova-plugin-camera でフォトライブラリにアクセスするボタンを作り、予めココでフォトライブラリへのアクセス許可だけを得るようにしてみた。実際のアプリ開発ではコレじゃあダメなので、やりようを考えないといけない。

カメラロールにエクスポートしても、元のファイルを削除する機能はないので、cordova-plugin-file を利用して cordova.file.cacheDirectory 配下から目的のファイルを探して削除する機能も別途作ってやらないといけないだろう。

このプラグイン単体では本当に録画のみで、録画したファイルをアレコレするには他のプラグインも組み合わせる必要があるが、何よりページの背景にプレビューを表示できるという特殊な UI は試してみる価値はあるだろう。