<input capture>
が HTML 5.3 Editor's Draft に追加
今日のモバイルブラウザは <input type="file">
に対して accept
属性と共に capture
属性を付けることにより、ファイル選択ダイアログに代えて直接端末のカメラを起動させるといったことが可能です。
独立した仕様としては2010年よりHTML Media Captureとして存在しており、これは2018年2月に勧告となっていますが、ついにHTML 5.3 Editor's Draft に追加されました(w3c.github.io
)。今のところ WHATWG の HTML 仕様には含まれていませんが、モバイル用ブラウザの多くが以前から対応しており、ARカメラ機能を使ったサービスなどで実際に活用されているのを見かけます。
2018年4月27日追記4月26日付でHTML 5.3 Working Draft が更新され、そちらにも capture
属性が追加されました。
2021年3月18日追記WHATWG の HTML Living Standard に関しては Define <input capture>
, ideally with a hint for which camera to use · Issue #1102 · whatwg/html で議論が行われています。
これまでの仕様
黎明期の仕様では accept="image/*;capture=camera"
のように、accept
属性のメディアタイプ値に capture
パラメーターを付与する方式でしたが、2011年に capture
属性が登場しています。当初の属性値は以下の4つでした。
キーワード(属性値) | 状態 |
---|---|
camera |
画像キャプチャ |
camcorder |
ビデオキャプチャ |
microphone |
サウンドキャプチャ |
filesystem |
ファイルアップロード(デフォルト値) |
例えば、
<input type="file" accept="image/*" capture="camera">
と書くと端末のカメラを起動させることが想定されていました。
2012年12月13日版では boolean 型に変更され、
<input type="file" accept="image/*" capture>
<input type="file" accept="video/*" capture>
のように、accept
属性値との組み合わせで挙動を定義する方式となりました。
最新仕様
2017年5月4日版では user
と environment
の2つのキーワードが定義されました(勧告された2018年2月1日版でも同様です)。第3の状態として、キーワードを指定しない場合は実装固有の状態となります。例えば以下のようなパターンが挙げられます。
端末のインカメラで写真撮影
<input type="file" accept="image/*" capture="user">
端末のアウトカメラで動画撮影
<input type="file" accept="video/*" capture="environment">
端末のマイクで録音
<input type="file" accept="audio/*" capture>
また、古い仕様で定義されていた capture="camera"
等は無効な値の扱いとなり、これは値を指定しない場合と同じく実装固有の状態とされています。
サポートブラウザ
モバイルブラウザのサポート状況は比較的良好です。
- Can I use...
- MDN(
developer.mozilla.org
)
ただし、 Android のカメラアプリでは user
/ environment
の指定を認識しないようで、capture
属性の指定に関わらず前回起動時に使われていたモードで起動してしまいます(アプリ起動後に手動でイン / アウトを切り替えることは可能です)[1]。
このように HTML5 としては追加されたばかりの属性ですが、 HTML Media Capture として古くからある仕様でブラウザ対応も進んでいること、またPCブラウザなど未対応環境では単に属性が無視されるだけでとくにデメリットも見当たらないことから、必要な場面では積極的に使って構わないと思います。
もちろん、いずれの仕様にも書かれていることですが、セキュリティーとプライバシーの考慮には注意する必要があるでしょう。
脚注
-
1.
Android 7 + Chrome 65, Firefox 59, Edge 1.0.0.1726 で確認 ↩ 戻る