知名度が低いウェブ標準ひとり Advent Calendar 2021 – 17 日目

今日は capture です。カメラを起動します。

あ、なんか CodePen のランダム URL 部分がちょっと格好良い……。

基本的な使い方

デモはスマホで見てね。

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

あとは CSS で良い感じにカメラボタンっぽくしてやると良さそう。

PC 用のウェブブラウザーは未対応だけど普通にファイルを開くだけなので大きな問題ではないかと。

値

  • capture, capture="" – 実装固有
  • capture="user" – ユーザー側
  • capture="environment" – 環境側

指定の「側」が端末にない場合は実装固有のものになります。

動画や音声も

実はカメラに限らず accept に応じて capture 対象が選ばれます。

手元の Android Pixel 5 だと accept="video/*" で動画撮影モードで起動したし accept="audio/*" ではボイスレコーダーが出てきました。

それぞれデモに入ってます。

accept="text/*" でメモ帳が出てきたら面白いなと思ったけどそんなことはなかった。

おしまい

利用者側で適宜ファイルなりカメラなりを選択できる OS 側の UI が一番便利かなとは思います。

ところでなんで MDN に実装状況載ってないんだろ？