Cordova アプリのページ背景に動画録画中の映像を表示する cordova-background-video プラグインを Fork して 1080p 動画を録画できるようにした
cordova-background-video というプラグインがある。動画が撮影できる Cordova プラグインなのだが、面白いのは録画を始めると、Cordova アプリを構成する HTML ページの背景に録画中の映像が表示されるのだ。cordova-plugin-camera-preview という写真撮影ができるプラグインも、HTML ページの任意の場所にプレビューを表示できたりするが、これの動画撮影版、みたいなプラグインだ。
このプラグイン、やたらと Fork されていて、一番最近も更新が盛んにされていそうな @mlingos 氏の Fork を使ってみたのだが、撮影できる画質が凄く悪くて使い物にならない。
- 参考 : GitHub - mlingos/cordova-background-video: A simple Cordova/Phonegap plugin to capture video and then display it onscreen via a transparent overlay without affecting app functionality. … @mlingos 氏の Fork 版。
Objective-C コードを修正した Fork 版を作った
動画の画質が悪く、動画のサイズも 640x480px くらいの小さなもの。せっかくページ中にプレビューを埋め込めて面白いプラグインなのに、動画の画質が悪いとダメだなー…。
そう思いながらソースコードを何気なく眺めていたら、Objective-C は全然知らないけど、何となく画質を向上させられそうな気がしてきた。
そこで GitHub リポジトリを Fork して、独自に開発を始めた。そしてこのプラグインで、iOS 版では 1080p の動画を撮影できるように改造できた。それが以下のリポジトリだ。
画質向上のために書き換えたのは1行だけ
実際のところ、1080p の動画を撮影できるように書き換えたコードはたった1行。
AVCaptureSessionPresetMedium という記述箇所を AVCaptureSessionPreset1920x1080 と書き換えただけだ。
AVFoundation という API が、何やら iOS で動画撮影を行うための API らしく、その中で画質を決めているのがこの記述箇所だった。以下のサイトを参考に、1080p で撮影できるプリセットを探して書き換えたという寸法。
コンパイル・ビルドなどは不要、テキストエディタで書き換えただけ
Objective-C のコードだが、Mac 標準のテキストエディタで src/ios/backgroundvideo.m を開いて書き換えただけで、特にビルド等は必要ない。Cordova プラグインは $ cordova build 時によしなにやってくれるみたいだ。
ちなみに同名の backgroundvideo.h というファイルはヘッダファイルと呼ばれ、実コードが書いてある .m ファイルとセットになっている。使用する型宣言みたいなことをやるみたい。.m は Module の「M」かな？
その他修正
前述のとおり、このプラグインはあちこちで Fork されて適当に改良されてきたらしく、cordova.plugins.backgroundvideo.start() 関数の引数が無茶苦茶になっていた。使っていない引数もあったりしたので、それを整理するため、Objective-C のコードとそれを呼び出す JavaScript コードを修正した。
Cordova プラグインの JavaScript コード (www/backgroundvideo.js) の方は、cordova.exe() という共通関数を叩いてプラグインのネイティブコードにアクセスするようになっている。
Objective-C のコードの方を見ると、command.arguments objectAtIndex:0 に相当するはずの、第1引数に指定するディレクトリパスが使われていないようだったので、使用されていない引数は削って動くようにした。
思いの他簡単に改造できた！
「Cordova ならフロントエンド技術だけでアプリが作れる」といっても、Cordova プラグインがやっていることはネイティブの iOS アプリと同様のこと。iOS アプリ開発に関する情報はネット上にも豊富にあり、Cordova プラグインがどのようにその処理を実現しているのかは意外と簡単に読み解けた。JavaScript からどのようにネイティブコードに連携しているか、ネイティブコードは何をしているか、を知っておくと、より上手く使いこなせると思うので、Objective-C が分からなくても何となく読んでおくだけでだいぶ違うかも。
Cordova アプリとして表示している HTML 要素部分も、ネイティブコードでは1つのレイヤとして扱われており、プレビュー画面はそのレイヤより下に表示するとか、ステータスバーは上に表示するだとか、そういった設定もできるようだ。レイヤの感覚があると、cordova-plugin-googlemaps プラグインの表示位置がズレる問題に関しても納得がいくと思う。
Objective-C コードをゼロから書き上げてはいないので、IDE も入れていないことだし、.h ファイルをどういうタイミングで追加・変更するのか分からず。複雑な変更はまだやれなさそうだが、現行のコードを見るに、例えば JS からオプションでサイズや座標を与えればそれに合わせてプレビュー画面を表示することもできそうだったりする。これができるようになると本当に cordova-plugin-camera-preview プラグインの動画版みたいにできそうだ。
コンパイルやビルドが必要ないのも開発しやすいところかな。ソースコードを書いたら、実際に Cordova アプリにプラグインとして追加して、$ cordova build なり $ cordova run ios なりで Cordova ビルドを行えばすぐさま使用感を確認できる。
使い方説明などは次回
今回は、既存プラグインを Fork して、たった1行の変更でも、さも大きな機能改修をしたかのような成果を挙げられた、というお話でした。
このプラグインの使い方については、次回触れる。