カメラから映像を取り込み画像としてページ内に表示/追加する (getUserMedia)

説明

カメラから映像を取り込み画像としてページ内に表示するには、あらかじめmanifest.webappファイルにpermissionsを設定しておく必要があります。ここではUserMediaを使って取り込むのでvideo-captureを指定します。descriptionだけ指定すれば使用可能になります。なお、UserMediaを使用する場合、Webアプリではユーザーにカメラの使用許可を求めるダイアログが表示されます。
次にHTMLではvideo要素を用意しautoplay="1"を記述しておきます。この記述がないとカメラからの映像が自動的に表示されません。ページ内に取り込んだ画像を表示する際にimg要素を使いますが、このimg要素はプログラム内で生成します。

JavaScriptではgetUserMedia()メソッドを利用しますが、Firefox OSではwindow.navigator.mozGetUserMediaがgetUserMediaのメソッドになっています。まだ、ベンダープレフィックスを指定する必要があります。getUserMedia()の最初のパラメーターには取り込む種類を指定します。{ video : true, audio : true }とすれば映像と音声が取り込まれます。{ video: true, audio: false }なら映像だけが取り込まれます。
getUserMedia()の2番目のパラメーターには映像データが正常に送られてきた場合に呼び出す関数を指定します。この関数には送られてきた映像データが、そのまま渡されます。このデータをそのままvideo要素のsrcプロパティに代入すれば映像が表示されます。
getUserMedia()の3番目のパラメーターにはエラーが発生した場合に呼び出す関数を指定します。この関数にはエラーの種類が渡されます。ユーザーがカメラ等からの取り込みを許可しなかった場合でもエラーの扱いになります。
カメラからの映像を画像として表示するには、canvas要素を利用します。つまりCanvasに映像を描画し、その画像データをimg要素に転送します。これはCanvas内に描画した画像はtoDataURL()メソッドを使って変換し、その結果をimg要素のsrcプロパティに入れます。あとは、img要素をページの末尾に追加します。サンプルでは新しい画像が最初に来るようにinsertBefore()メソッドを使っています。
なお、サンプルの場合、撮影枚数の限界は4000枚弱です。3800枚程度が安全圏といったところです。また、撮影速度は秒間4枚が限度でボタンクリックの場合は1秒間に2枚程度にまで速度が低下します。

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

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

context.drawImage(myVideo, 0, 0, 80, 107);	// 80x107サイズで描画
var imgObj = document.createElement("img");	// 新規にimg要素を生成
imgObj.src = canvasObj.toDataURL();	// DataURL形式に変換してからsrcに入れる
imgObj.className = "photo";	// photoクラスを設定
cont.insertBefore(imgObj, cont.firstChild);	// 画像として追加する
count++;	// 撮影枚数を追加
stat.textContent = "撮影枚数:"+count;