HTML Living Standard/capture属性
表示
capture属性
[編集]capture属性は、デバイスのカメラやマイクを利用してデータを直接取得するために使用する属性です。この属性は特に<input type="file">
要素で使用され、ユーザーがファイル選択ダイアログを開く代わりに、カメラやマイクを直接起動してメディアを記録するよう促します。
基本構文
[編集]<input type="file" capture>
capture
属性は、値を指定せず存在するだけで有効になります。また、必要に応じて値をuser
またはenvironment
に指定して、カメラの種類(フロントカメラまたは背面カメラ)を指定することが可能です。
効果
[編集]capture
属性を使用することで、以下のような動作が実現されます:
- スマートフォンやタブレットなどのデバイスでは、ユーザーがカメラやマイクを直接起動して写真や音声を記録できます。
- デスクトップブラウザでは、この属性は無視される場合があります。
使用例
[編集]写真の撮影に使用
[編集]<label for="cameraInput">写真を撮影してください:</label> <input type="file" id="cameraInput" accept="image/*" capture="environment">
この例では、背面カメラ(environment
)を使用して写真を撮影するよう促します。
音声の記録に使用
[編集]<label for="audioInput">音声を記録してください:</label> <input type="file" id="audioInput" accept="audio/*" capture>
この例では、デバイスのマイクを使用して音声を記録するよう促します。
注意点
[編集]capture
属性は、主にモバイルブラウザで機能します。一部のデスクトップブラウザではサポートされていない場合があります。- 必ず
accept
属性と併用して、期待するメディアタイプ(例:画像、音声、動画)を指定してください。 - ユーザーのプライバシーを保護するため、カメラやマイクへのアクセスはユーザーの許可が必要です。
- 一部のブラウザやデバイスでの動作は一貫していない場合があるため、ユーザー体験を損なわないようにフォールバック機能を設けることを検討してください。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome (モバイル) 対応 Edge 一部対応 Firefox 一部対応 Safari (モバイル) 対応 Opera (モバイル) 対応