デバイスセンサーからメディアをキャプチャする方法

HTML5では、標準のファイル入力要素を使用して、デバイスのセンサーからカメラやマイクなどのメディアをキャプチャできます。W3Cにはメディアのキャプチャ方法について記載された、HTMLメディアのキャプチャに関するドキュメントが用意されています。

PhotoUploadのサンプルは、カメラを使用して画像をキャプチャする方法を示します。このサンプルのコードは、<Amazonアプリ・ゲームサービスSDK>/Web/Cookbook/PhotoUpload/にあります。Web App SDKは、SDKのダウンロードページからダウンロードできます。

ファイル入力属性

標準のファイル入力要素にaccept属性とcapture属性を追加すると、ユーザーがデバイスのセンサーを使用してメディアをキャプチャできるようになります。

accept属性は一連のカンマ区切りのトークンを取り、それらの値は次のいずれかの値とASCIIマッチ（大文字小文字を区別しない）している必要があります。トークンの重複は許可されません。

トークン	意味
audio/*	音声ファイルが承認されたことを示します。
video/*	ビデオファイルが承認されたことを示します。
image/*	画像ファイルが承認されたことを示します。
パラメーターが設定されていない有効なMIMEタイプ	指定されたタイプのファイルが承認されたことを示します。
「.」で始まる文字列（U+002E）	指定されたファイル拡張子のファイルが承認されたことを示します。

capture属性はブール型で、存在するかしないかのどちらかです。注： 2012年7月12日付けのW3C HTMLメディアキャプチャ仕様に準拠している一部の古いブラウザでは、captureが次の値のいずれかに割り当てられることを想定しています。

フォーマットされたHTML：

「capture」属性の値	メディアキャプチャの制御タイプ
camera	カメラ
camcorder	ビデオカメラ
microphone	音声レコーダー
filesystem	汎用のファイルピッカー

デバイスのキャプチャが機能するには、accept属性とcapture属性の両方が存在している必要があります。accept属性で指定されているMIMEタイプがどれもデバイスで対応していない場合、capture属性は無視されます。

これらの属性を最新のブラウザで使用した例を次に示します。

<input type="file" name="image" accept="image/*" capture>
<input type="file" name="video" accept="video/*" capture>
<input type="file" name="sound" accept="audio/*" capture>

これらの属性を古いバージョンのブラウザで使用した例を次に示します。

<input type="file" name="image" accept="image/*" capture="camera">
<input type="file" name="video" accept="video/*" capture="camcorder">
<input type="file" name="sound" accept="audio/*" capture="microphone">