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


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

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

PhotoUploadのサンプルは、カメラを使用して画像をキャプチャする方法を示します。このサンプルのコードは、<Amazonアプリ・ゲームサービスSDK>/Web/Cookbook/PhotoUpload/にあります。Web App SDKは、Amazonアプリ・ゲームサービス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">