HTMLだけでスマホのカメラにアクセスできるの知ってた？前面・背面カメラにアクセスできるHTMLのcapture属性

Post on:2022年9月21日

はじめに

私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにしました。

動画がお好きな人はこちらをご覧ください。

HTMLのcapture属性とは

HTMLのcapture属性はキャプチャする機器を指定するもので、type="file"にしたinput要素に使用できます。

capture属性の興味深い点は、ユーザーがスマホでWebサイトにアクセスした場合です。ユーザーがそのinput要素を操作すると、デフォルトのファイルピッカーが表示される代わりに、スマホのカメラが開きます。値に応じて、前面または背面のカメラになります。

capture属性の値にはuserやenvironmentを設定できます。

user: ユーザー側（前面）のカメラとマイクが使用されます。
environment: 背面のカメラとマイクが使用されます。

capture属性をテストするために、次のindex.htmlファイルを作成しました。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    * {
      font-size: 1.5rem;
    }
  </style>
</head>

<body>
  <label for="environment">environmentの場合:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">userの場合:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >
</body>

</html>

<head>

<style>

* {

font-size: 1.5rem;

}

</style>

</head>

<body>

<label for="environment">environmentの場合:</label>

<br>

<input

type="file"

id="environment"

capture="environment"

accept="video/*"

<label for="user">userの場合:</label>

<br>

<input

type="file"

id="user"

capture="user"

accept="image/*"

</body>

</html>

上記のHTMLは、下記のようになります。
「ファイルを選択」ボタンをタップしてみてください。
※テストなので、実際にファイルを送信することはできません。

environmentの場合:

userの場合:

【訳者注】当方のiPhone（iOS16.01）とiPad（iPadOS15.7）で試したところ、environmentは背面カメラ、userは前面カメラが開きました。デスクトップのブラウザで開くと、ファイルピッカーが表示されます。

2つのinput要素があり、2つともcapture属性とaccept属性を持っています。1つ目のenvironmentは、あらゆる種類の動画でキャプチャするように設定されています。2つ目のuserは、任意の種類の画像でキャプチャするように設定されています。

デスクトップのブラウザで表示した場合、capture属性は何の意味もない属性です。input要素をクリックすると、ファイルピッカーが開くのが分かります。

そして、ここが興味深いポイントなのですが、、、

スマホでアクセスし、1つ目のinput要素（environment）をタップすると、カメラがビデオ録画モードで開きます。2つ目のinput要素（user）をタップすると、写真モードで開きます。
【訳者注】当方のiPhoneでもビデオ録画モードでした。

そして、写真や動画を撮影すると、そのファイルを送信することができます。
なんてクールなんでしょう！！！

これは、私のブログ記事「HTMLフォームの正しい構築方法」に追加する価値があることは間違いありません。

追記:
一部の人はこの機能がカメラへのアクセス許可を求めないことを指摘しており、セキュリティ上の懸念事項になると考えているようです。私はそうは思いません。このカメラアクセス機能は、WebサイトでWebカメラを使用したときに許可を求めるプロンプトが表示されるように、実際にはカメラのストリームをWebアプリで利用できるようにするものではありません。その代わり、カメラは撮影したファイルへのアクセスを提供するだけです。つまり、capture属性なしのファイル入力と本質的に同じです。セキュリティ上の懸念はありません。