capture属性を使ってみる

input type=fileに対して設定できるcapture属性について、いくつか設定を行い動作を試してみます。

capture属性

capture属性はinput type=fileに指定できる属性で、設定することでローカルファイルを参照する代わりにカメラを起動させることができます。

対応ブラウザ

capture属性の対応ブラウザはこちら
機能の性質上PCでは対応していないですが、スマートフォンの主要なブラウザでは対応しています。

値

capture属性に設定できる値は以下の2つです。

後のデモの結果でもありますが、内向き・外向きに関しては端末によって挙動が異なる場合があるようです。

サンプルコード

capture属性のないパターンとcapture属性にuser・environmentを設定した3パターンを、accept属性の内容を変更していくつか試してみます。

<p>通常のinput file</p>
<input type="file">
<hr>
<p>capture="user"</p>
<input type="file" capture="user">
<hr>
<p>capture="environment"</p>
<input type="file" capture="environment">
<hr>

<p>通常のinput file + accept="image/*"</p>
<input type="file" accept="image/*">
<hr>
<p>capture="user" + accept="image/*"</p>
<input type="file" capture="user" accept="image/*">
<hr>
<p>capture="environment" + accept="image/*"</p>
<input type="file" capture="environment" accept="image/*">
<hr>

<p>通常のinput file + accept="audio/*"</p>
<input type="file" accept="audio/*">
<hr>
<p>capture="user" + accept="audio/*"</p>
<input type="file" capture="user" accept="audio/*">
<hr>
<p>capture="environment" + accept="audio/*"</p>
<input type="file" capture="environment" accept="audio/*">
<hr>

<p>通常のinput file + accept="video/*"</p>
<input type="file" accept="video/*">
<hr>
<p>capture="user" + accept="video/*"</p>
<input type="file" capture="user" accept="video/*">
<hr>
<p>capture="environment" + accept="video/*"</p>
<input type="file" capture="environment" accept="video/*">
<hr>

capture属性のデモページ

手持ちのAndroid、iOS端末での確認結果は以下の通りです。

Android

capture属性の有無のみ

capture属性なしの場合、参照先をカメラ・ビデオカメラ・メディアから選択する形になります。

capture=”user”の場合、外向きのカメラが起動します。

capture=”environment”の場合、外向きのカメラが起動します。

capture属性 + accept=”image/*”

capture属性なし + accept=”image/*”の場合、メディアの画像一覧から選択する形になりますが、左上からカメラを起動することもできます。

capture=”user” + accept=”image/*”の場合、外向きのカメラが起動します。

capture=”environment” + accept=”image/*”の場合、外向きのカメラが起動します。

capture属性 + accept=”audio/*”

capture属性なし + accept=”audio/*”の場合、参照先をボイスレコーダー・メディアから選択する形になります。

capture=”user” + accept=”audio/*”の場合、ボイスレコーダーのアプリが起動します。

capture=”environment” + accept=”audio/*”の場合、ボイスレコーダーのアプリが起動します。

capture属性 + accept=”video/*”

capture属性なし + accept=”video/*”の場合、メディアの動画一覧から選択する形になりますが、左上からカメラを起動することもできます。

capture=”user” + accept=”video/*”の場合、外向きのカメラが起動します。

capture=”environment” + accept=”video/*”の場合、外向きのカメラが起動します。

iOS

capture属性の有無のみ

capture属性なしの場合、参照先を「写真ライブラリ」「写真またはビデオを撮る」「ファイルを選択」から選択する形になります。

capture=”user”の場合、内向きのカメラが起動します。

capture=”environment”の場合、外向きのカメラが起動します。

capture属性 + accept=”image/*”

capture属性なし + accept=”image/*”の場合、参照先を「写真ライブラリ」「写真を撮る」「ファイルを選択」から選択する形になります。

capture=”user” + accept=”image/*”の場合、内向きのカメラが起動します。

capture=”environment” + accept=”image/*”の場合、外向きのカメラが起動します。

capture属性 + accept=”audio/*”

capture属性なし + accept=”audio/*”の場合、参照先を「写真ライブラリ」「ビデオを撮る」「ファイルを選択」から選択する形になります。

capture=”user” + accept=”audio/*”の場合、内向きのカメラが起動します。

capture=”environment” + accept=”audio/*”の場合、外向きのカメラが起動します。

capture属性 + accept=”video/*”

capture属性なし + accept=”video/*”の場合、参照先を「写真ライブラリ」「ビデオを撮る」「ファイルを選択」から選択する形になります。

capture=”user” + accept=”video/*”の場合、内向きのカメラが起動します。

capture=”environment” + accept=”video/*”の場合、外向きのカメラが起動します。

まとめ

今回の結果は手持ちの端末で試した範囲になるので、特にAndroidは端末によっては今回の動作と異なる挙動となる可能性があります。