<input capture> が HTML 5.3 Editor's Draft に追加

今日のモバイルブラウザは <input type="file"> に対して accept 属性と共に capture 属性を付けることにより、ファイル選択ダイアログに代えて直接端末のカメラを起動させるといったことが可能です。

独立した仕様としては2010年よりHTML Media Capture(W3C) として存在しており、これは2018年2月に勧告となっていますが、ついにHTML 5.3 Editor's Draft に追加されました(w3c.github.io) 。今のところ WHATWG の HTML 仕様には含まれていませんが、モバイル用ブラウザの多くが以前から対応しており、ARカメラ機能を使ったサービスなどで実際に活用されているのを見かけます。

2018年4月27日追記4月26日付でHTML 5.3 Working Draft が更新され(W3C)そちらにも capture 属性が追加されました(W3C)

2021年3月18日追記WHATWG の HTML Living Standard に関しては Define <input capture>, ideally with a hint for which camera to use · Issue #1102 · whatwg/html(GitHub) で議論が行われています。

  1. これまでの仕様
  2. 最新仕様
  3. サポートブラウザ

これまでの仕様

§

黎明期の仕様では accept="image/*;capture=camera" のように、accept 属性のメディアタイプ値に capture パラメーターを付与する方式でしたが、2011年に capture 属性が登場しています。当初の属性値は以下の4つでした。

キーワード(属性値) 状態
camera 画像キャプチャ
camcorder ビデオキャプチャ
microphone サウンドキャプチャ
filesystem ファイルアップロード(デフォルト値)

例えば、

<input type="file" accept="image/*" capture="camera">

と書くと端末のカメラを起動させることが想定されていました。

2012年12月13日版(W3C) では boolean 型に変更され、

<input type="file" accept="image/*" capture>
<input type="file" accept="video/*" capture>

のように、accept 属性値との組み合わせで挙動を定義する方式となりました。

最新仕様

§

2017年5月4日版(W3C) では userenvironment の2つのキーワードが定義されました(勧告された2018年2月1日版(W3C) でも同様です)。第3の状態として、キーワードを指定しない場合は実装固有の状態となります。例えば以下のようなパターンが挙げられます。

端末のインカメラで写真撮影
<input type="file" accept="image/*" capture="user">
端末のアウトカメラで動画撮影
<input type="file" accept="video/*" capture="environment">
端末のマイクで録音
<input type="file" accept="audio/*" capture>

また、古い仕様で定義されていた capture="camera" 等は無効な値の扱いとなり、これは値を指定しない場合と同じく実装固有の状態とされています。

サポートブラウザ

§

モバイルブラウザのサポート状況は比較的良好です。

ただし、 Android のカメラアプリでは user / environment の指定を認識しないようで、capture 属性の指定に関わらず前回起動時に使われていたモードで起動してしまいます(アプリ起動後に手動でイン / アウトを切り替えることは可能です)[1]

このように HTML5 としては追加されたばかりの属性ですが、 HTML Media Capture として古くからある仕様でブラウザ対応も進んでいること、またPCブラウザなど未対応環境では単に属性が無視されるだけでとくにデメリットも見当たらないことから、必要な場面では積極的に使って構わないと思います。

もちろん、いずれの仕様にも書かれていることですが、セキュリティーとプライバシーの考慮(W3C) には注意する必要があるでしょう。

脚注

  • 1.

    Android 7 + Chrome 65, Firefox 59, Edge 1.0.0.1726 で確認 ↩ 戻る