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

HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。

私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。

HTMLだけでスマホのカメラにアクセスできるHTMLのcapture属性

You Can Access A User’s Camera with Just HTML
by Austin Gil (@heyAustinGil)

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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

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

HTMLのcapture属性とは

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

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

capture属性の値にはuserenvironmentを設定できます。

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

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

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



【訳者注】当方の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属性なしのファイル入力と本質的に同じです。セキュリティ上の懸念はありません。

capture属性のサポート状況

新しい Web APIや機能について話すときはいつでも、互換性について確認する必要があります。

サイトのキャプチャ

capture属性のサポート状況

右半分はグリーンですが、左半分はレッドになっています。しかし、これはスマホでしか機能しない属性なので、デスクトップでのサポート状況は問題ありません。前面と背面カメラはスマホにしかないので、理にかなっています。

対応ブラウザはすべてスマホ用のブラウザです。ですから、このcapture属性は問題ありません。

もう1つすばらしい点は、ユーザーがサポートされていないブラウザを使用してアクセスした場合でも、デフォルトのファイル ピッカーUIにフォールバックすることです。

プログレッシブエンハンスメント万歳!!!

終わりに

これがHTMLのcapture属性です。スマホのユーザーがアップロード時に写真や動画、音声の録音をすることがわかっている場合、より優れたユーザエクスペリエンスを提供するための非常に優れた方法です。

ここまで読んでいただきありがとうございます。

sponsors

top of page

©2022 coliss