HTML Media Capture

フロントエンド
date 2011.10.18 tag WEB標準 ウェブ
(2012年5月10日に再アップしました。)
HTML5に関する記事は6月の初旬から全く書いていませんでしたので久しぶりの更新となります。このエントリーではWebブラウザ上からカメラを起動することができる『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フォームを拡張して可能にします。)

雑な訳し方ですみません…。つまりFlashのようにプラグインに依存しない、Web標準技術でブラウザからカメラとかを起動する技術仕様です。APIとしてはMedia Capture APIになるのかな?ほとんどのスマートフォンってカメラとマイクがついてますから、そっち方面でのメイン仕様になりそうみたいです。

実際にやってみたい

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

HTML(※Android3.0以上で直接カメラ起動させたい場合はこれじゃダメです)

[html]
<input type=”file” accept=”image/*” capture=”camera” id=”capture”>
[/html]

カメラ(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 を試す

HTML

[html]
<input type=”file” accept=”image/*;capture=camera”>
[/html]

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

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”>ではこの画面をスルーしてすぐにカメラが起動します。

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


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

ファイルの出力


写真の撮影が終了するとブラウザの画面へと戻り、ファイル(パス)がinput要素に出力されます。

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

まとめ。

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

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