HTML5に関する記事は6月の初旬から全く書いていませんでしたので久しぶりの更新となります。さて、今回はHTML API として策定されている『HTML Media Capture』のことを書いてみたいと思います。

HTML Media Capture って？

今回取り上げるHTML Media Captureって何でしょう。W3C Working Draftの文章にはこのように書かれています。

This specification defines HTML form enhancements that provide access to the audio, image and video capture capabilities of the device. （音声、画像、ビデオをキャプチャするデバイスへのアクセスをHTMLフォームを拡張して可能にします。）

つまりHTML Media CaptureとはWebブラウザからPCやスマートフォンなどの端末のデバイスにアクセスできるようにする仕様です。APIとしてはMedia Capture APIになるのかな？Flashのようにプラグインに依存しない、Web標準技術でブラウザからデバイスを立ち上げることが可能になっちゃうんです。

ほとんどのスマートフォンってカメラとマイクがついてますから主にスマートフォンで威力を発揮するんじゃないかなっていう仕様です。

どうやるの？

『HTMLフォームを拡張』したのだからフォームにひと手間加えるだけで手軽に利用できます。単にカメラを起動させるならフォームを構成するinput要素にプロパティをちょっと書き足します。

<input type="file" accept="image/*" capture="camera" id="capture">

カメラ(image/*)以外にもaccept属性に以下の値を指定すれば他のデバイスも起動させることができます。ちなみにcapture属性に関しては勉強不足で説明できません(TдT) とりあえず属性自体を記述しなくても動作はしてました。

• audio/* – マイクデバイス
• video/* – ビデオ撮影デバイス

2011年12月21日修正

対応しているブラウザ（Android3.0以上）ではinput要素に対してtype=”file”を指定（<input type=”file”>）することで下のDemoのようなファイル選択方法の画面が表示されます。

なおAndroid3.0以上のブラウザで直接カメラを起動させるには以下のコードを記述します。（参考：141 WebLog: Android で HTML5 / Media Capture API を試す）

<input type="file" accept="image/*;capture=camera">

この記述により、ファイル選択画面を省略して直接カメラが起動します。

Demo

2011年の10月時点ではMedia Capture APIに対応しているブラウザはAndroid 3.0以上のブラウザしかありません。動作環境が限られるということで画面のキャプチャを貼ってみます。エミュレータでAndroid4.0を起動させてみました。

ブラウザレンダリング

英語表記ですがファイル選択のフォーム。

ファイルinput方法選択

「Choose file」をタッチするとファイルをinputするのにカメラで撮影するか、ギャラリーから撮影するかを選択できます。

2011年12月21日追記

この画面は<input type=”file”>により表示されるようになります。<input type=”file” accept=”image/*;capture=camera”>ではこの画面をスルーしてすぐにカメラが起動します。

カメラデバイスへのアクセス

選択画面でカメラを選択すると内蔵されているカメラが起動します。エミュレータなのでこんな画面なのはご愛嬌です(〃ω〃)

ファイルのinput

写真の撮影が終了するとブラウザの画面へと戻り、ファイル（パス）がinputされます。

ちなみにスマートフォンに関して言えばHTML5ベースのネイティブアプリを開発するためのPhoneGapもMedia Capture APIに対応しているみたいです。

まとめ。

フォームの拡張のため、サーバにファイルをアップしたりするのが超スムーズにできちゃうHTML Media Capture。ブラウザからデバイスへのアクセスができるようになるとWebアプリケーションへの応用のアイデアがどんどん浮かんできますね。将来的にはどのような方向に行くのか分からない部分もありますけど、今後の展開に期待してます。

あと最近はWebAPIってのもあるみたいです。名前がややこしいけどMozillaのプロジェクトで、現在は独自にスマートフォン端末のデバイスへアクセスするようなAPIを策定中みたいです。こちらも動向が気になります。