Android版のFirefox9ベータ版からどうやらHTML Media Captureによってブラウザからカメラデバイスへアクセスできるようになってます。個人的にはかなり先進的な実装だとと思っているのですが、以外に注目されていないような気がします。そこで今回のエントリーではどんな感じなのかを簡単に取り上げてみたいと思います。

カメラを起動させるには？

カメラを起動させるためにはAPIとかいろいろあって難しそう…とかそんなことはありません。HTML Media Captureによってフォームを拡張しているだけなのでブラウザ上に反映させるだけなら次のような一行で済みます。

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

このコードをAndroid Firefox9以上で読み込ませると「capture」というボタンが追加されます。たったこれだけでWebアプリケーションの可能性が広がっちゃうんです。

動作画面

Android4.0端末であるGalaxy Nexusで動作させてみました。

こんな感じにinput要素が拡張され、「capture」ボタンをタッチすることでカメラデバイスへアクセスします。アクセスすると画面全体がオーバーレイされ、カメラの映像が中央に反映されます。そして「OK」をタッチするとinput要素にファイルのパスが出力されます。（AndroidやiOSの仕様からかファイルのパスは反映はされません。）

現在写真のサイズは指定できずに（？）W240px ×320Hpxですが、今後に期待したいです。もうちょっと大きいサイズがいいなあ。

サンプルを作ってみた

簡単なサンプルとしてFileAPIで写真ファイルを取得して描写するプログラムを作成してみました。今回はDOMツリーに画像を追加しているだけですが、Canvasとかに描写するといろいろと面白いことができそうです。

サンプル

• 撮影した写真をページ内に表示するサンプル

ソースコード

<input type="file" accept="image/*" onchange="preview(this)">
<div id="load">
<p>ここに画像を表示します。</p>
</div>

	function preview(ele) {
		if (!ele.files.length) return;	//ファイルが未選択の場合はreturn
		var file = ele.files[0];
		if (!/^image\/(png|jpeg|gif)$/.test(file.type)) return;	//MINEタイプをチェック

		var fr = new FileReader();
		fr.readAsDataURL(file);  // 画像ファイルをDataURLスキーム変換

		fr.onload = function() {
			var photo = document.createElement("img");
			photo.src = fr.result;

			var load = document.getElementById("load");
			load.appendChild(photo);
		};
	};

FileAPIに関しては以下の記事を参照。ありがとうございます！