カメラから映像を取り込み表示する (getUserMedia)

説明

カメラから映像を取り込み表示するには、あらかじめmanifest.webappファイルにpermissionsを設定しておく必要があります。ここではUserMediaを使って取り込むのでvideo-captureを指定します。descriptionだけ指定すれば使用可能になります。なお、UserMediaを使用する場合、Webアプリではユーザーにカメラの使用許可を求めるダイアログが表示されます。
次にHTMLではvideo要素を用意しautoplay="1"を記述しておきます。この記述がないとカメラからの映像が自動的に表示されません。
JavaScriptではgetUserMedia()メソッドを利用しますが、Firefox OSではwindow.navigator.mozGetUserMediaがgetUserMediaのメソッドになっています。まだ、ベンダープレフィックスを指定する必要があります。getUserMedia()の最初のパラメーターには取り込む種類を指定します。{ video : true, audio : true }とすれば映像と音声が取り込まれます。{ video: true, audio: false }なら映像だけが取り込まれます。
getUserMedia()の2番目のパラメーターには映像データが正常に送られてきた場合に呼び出す関数を指定します。この関数には送られてきた映像データが、そのまま渡されます。このデータをそのままvideo要素のsrcプロパティに代入すれば映像が表示されます。
getUserMedia()の3番目のパラメーターにはエラーが発生した場合に呼び出す関数を指定します。この関数にはエラーの種類が渡されます。ユーザーがカメラ等からの取り込みを許可しなかった場合でもエラーの扱いになります。

[サンプルをダウンロード]

ポイントとなるコード部分

navigator.getUserMedia = window.navigator.mozGetUserMedia;	// 将来はmozが消えるはず
navigator.getUserMedia({ video: true, audio: false }, 	// ビデオのみ利用
	function(stream){	// 成功時の処理
		document.getElementById("myVideo").src = window.URL.createObjectURL(stream);
		document.getElementById("stat").innerHTML = "映像取り込み中";
	},
	function(err) {	// 失敗時の処理
		document.getElementById("stat").innerHTML = "エラー:"+err;
	}
)