連写する (getUserMedia)

説明

カメラからの映像を連写するには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番目のパラメーターにはエラーが発生した場合に呼び出す関数を指定します。この関数にはエラーの種類が渡されます。ユーザーがカメラ等からの取り込みを許可しなかった場合でもエラーの扱いになります。
Fx0端末でより高速に連写（映像をキャプチャーして画像にする）するには、サンプルのようにsetInterval()メソッドを使います。setTimeout()メソッドはsetInterval()メソッドの2倍くらいのコストがかかります。次にキャプチャーした映像データを逐次img要素に代入するのではなくサンプルのように配列に入れておき、最後に表示することで高速化できます。drawImage()メソッドでの描画サイズが小さければ、より高速連写ができます。
また、サンプルではキャプチャー枚数をリアルタイムに表示していますが、これをやめればさらに30%ほど高速化できます。

	context.drawImage(myVideo, 0, 0, 80, 107);	// 80x107サイズで描画
	videoArray[count++] = canvasObj.toDataURL();	// DataURL形式に変換し配列に格納
	stat.textContent = count;
	if (count < maxCount){ return; }