■補講 Media Captureでカメラ画像を取り込む
これまでHTML+JavaScriptはカメラやマイクなどデバイスにアクセスすることができませんでした。現在、これらのデバイスに対してアクセスし利用するAPIが策定されています。それがMedia Captureです。
●W3C HTML Media Capture
http://www.w3.org/TR/html-media-capture/
●Capture API
http://www.w3.org/TR/media-capture-api/
Media Captureを利用するには主に2つの方法があります。1つはこれから説明するinput要素を使った方法です。もう1つがPhoneGapなどに見られるJavaScriptを使ってカメラデバイスにアクセスして処理する方法です。
Android 4を搭載したGalaxy NexusはHTMLから手軽にMedia Captureを利用することができるようになっています（実際にはAndroid 3、つまりタブレットからできるようになっています）。
このMedia Captureを利用すればカメラかで撮影した画像を取り込んでCanvasに描画し、加工することもできます。これまではPhoneGapやTitaniumなどのモバイルフレームワークを使わないと駄目だった事がHTML+JavaScriptだけでできてしまうわけです。
Media Captureでは取り込むデバイスとして
・スチルカメラ（静止画） camera
・ビデオカメラ camcorder
・マイク microphone
が定義されています（デフォルトではfilesystem、つまり一般的なファイル選択です）。
実際に使用するには以下のようにHTMLを書きます。
accept属性でデバイスを指定することで、通常はファイル選択ダイアログが表示されますが、自動的にカメラが起動するようになります。
ちなみにMedia Capture／Capture APIでは起動した後のカメラを制御することはできません。これはカメラに限らずビデオカメラでもマイクでも同様です。
カメラで撮影すると撮影した画像データが内部に保存されます。この保存されたファイルをFile APIを使って読み出すことができます。
実際にカメラで撮影した画像をCanvasに描画するプログラムが以下のものになります。File APIに関しては本書の第6章（特にレッスン23）を参照してください。
なお、ビデオカメラから取り込みたい場合はinput要素のacceptでcapture=cameraとなっているcameraをcamcorderにします。同様にマイクから取り込みたい場合はmicrophoneを指定します。
------------------------------------------------------------------------------------------------
■HTML (index.html)
------------------------------------------------------------------------------------------------
Media Captureを使ったカメラからの取り込み
Media Captureを使ったカメラからの取り込み