capture属性を使ってみる

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

capture属性

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

対応ブラウザ

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

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

user 内向きのカメラを使用。
environment 外向きのカメラを使用。

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

サンプルコード

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 iOS
capture属性なし カメラ・メディアから選択 カメラ・メディアから選択
capture=”user” 外向きのカメラ起動 内向きのカメラ起動
capture=”environment” 外向きのカメラ起動 外向きのカメラ起動
capture属性なし + accept=”image/*” カメラ・メディアから選択 カメラ・メディアから選択
capture=”user” + accept=”image/*” 外向きのカメラ起動 内向きのカメラ起動
capture=”environment” + accept=”image/*” 外向きのカメラ起動 外向きのカメラ起動
capture属性なし + accept=”audio/*” ボイスレコーダー・メディアから選択 カメラ・メディアから選択
capture=”user” + accept=”audio/*” ボイスレコーダー起動 内向きのカメラ起動
capture=”environment” + accept=”audio/*” ボイスレコーダー起動 外向きのカメラ起動
capture属性なし + accept=”video/*” カメラ・メディアから選択 カメラ・メディアから選択
capture=”user” + accept=”video/*” 外向きのカメラ起動 内向きのカメラ起動
capture=”environment” + accept=”video/*” 外向きのカメラ起動 外向きのカメラ起動

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

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031