HTML 属性: capture

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

capture 属性は、オプションとして、新しいファイルをキャプチャすることと、accept 属性で定義された種類の新しいメディアをどの機器でキャプチャするかを指定します。

値としては、user とenvironment があります。 capture 属性はfile 入力型が対応しています。

capture 属性は、accept 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。

値	説明
`user`	ユーザー側のカメラやマイクを使用します。
`environment`	外向きのカメラやマイクを使用します。

メモ:capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。

試してみましょう

<label for="selfie">あなたの顔の写真を撮りましょう:</label><input type="file" name="selfie" accept="image/*" capture="user" /><label for="picture">背面カメラを使って写真を取りましょう:</label><input  type="file"   name="picture"  accept="image/*"  capture="environment" />

label {  display: block;  margin-top: 1rem;}input {  margin-bottom: 1rem;}

例

ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェイスが表示されます。

html

<p>  <label for="soundFile">あなたの声はどのような音ですか？:</label>  <input type="file" capture="user" accept="audio/*" /></p><p>  <label for="videoFile">動画をアップロード:</label>  <input type="file" capture="environment" accept="video/*" /></p><p>  <label for="imageFile">自分の写真をアップロードしてください:</label>  <input type="file" capture="user" accept="image/*" /></p>

なお、これらはモバイル端末でより効果的に機能します。お使いの端末がデスクトップコンピューターの場合、一般的なファイルピッカーが表示されるでしょう。