HTMLだけでスマートフォンのカメラにアクセスするクールな方法

映画やドラマには、ハッカーなどが特殊なソフトウェアやスパイウェアを使って人のスマートフォンのカメラを乗っ取ってしまうシーンが登場します。しかし、そのようなツールを使わなくても、HTMLだけでカメラを起動できる「capture属性」を発見したとして、ウェブデザインやソフトウェア開発を手がける動画配信者のオースティン・ギル氏が実演を交えて機能を分かりやすく解説しています。

TIL: You Can Access A User's Camera with Just HTML
https://austingil.com/html-capture-attribute/

ギル氏が「見たことも聞いたこともなかったクールなHTML属性」としてcaptureについて解説したムービーは、以下から見ることができます。

Accessing the User's Camera with HTML Only | Web Dev Office Hours - YouTube


ギル氏がcaptureを見つけたのは、ベッドで休みながらMDNドキュメントをチェックしていたときのことでした。

特に興味を引かれたのは、モバイルデバイスでサイトを訪問したユーザーに使うと、スマートフォンのファイルピッカーの代わりに直接カメラを起動できるという点です。さらに「user」「environment」などの値で前面カメラか背面カメラかを指定することも可能です。

さっそく、ギル氏は実際にcaptureを使ったHTMLを書いて実験してみることにしました。

この機能をデスクトップPCのブラウザで試しても、ファイルピッカーが開くだけです。

ギル氏は次に、スマートフォンでアクセスしてenvironmentを値にしたcaptureを使ってみました。

すると、録画モードでカメラが起動しました。

userでは写真が撮影できます。この状態で写真を撮ると、画像ファイルがHTML側に送られるとのこと。前述の通りenvironmentやuserは前面カメラか背面カメラを指定する値ですが、ギル氏が試した端末ではなぜかムービーか写真かになってしまったそうです。

スマートフォンでこのリンクからMDNドキュメントにアクセスし、「ファイルの選択」のボタンをタップすると自分でも試すことができます。

captureの互換性はこんな感じ。端末の前面カメラや背面カメラを使う機能なので、カメラがないかあっても1つしかないPC向けのブラウザは全滅している一方で、Android版ChromeやiOSのSafariなどモバイル向けのブラウザは対応しています。

ギル氏はこのcaptureについて「なんてクールなんでしょう」「プログレッシブエンハンスメント最高！」とコメントしました。

ギル氏がcaptureについて取り上げたのがきっかけでこの機能が話題になった際、反応した人の中には「カメラへのアクセス許可の要求が表示されないので、セキュリティ上の懸念があるのではないか」と指摘する人がいたとのこと。しかし、この機能はカメラそのものではなくカメラで撮影したファイルへのアクセスを提供するものであり、他の方法でファイルを指定するのと本質的には同じなので、ギル氏は「特別セキュリティを心配する必要はありません」と述べました。