デバイスセンサーからメディアをキャプチャする方法
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">