【HTML】スマホカメラを起動して写真を撮影する

こんにちは、Ryohei（@ityryohei）です！

本記事では、HTMLのフォーム等で、input要素を使ってスマホカメラを起動し、写真を撮影する方法をご紹介しています。

上記の疑問にお答えします

では、解説していきます。

inputのaccept属性・capture属性でスマホカメラを起動する

フォームでスマホカメラを起動するには、input要素のcapture属性とaccept属性を使用します。これらを正しく指定することで、スマホのカメラを使用して写真を撮影することができるようになります。

accept属性

accept属性は、inputのtype属性の値にfileを指定した際にのみ有効な属性です。値にはファイル入力で受け付けるファイルタイプを指定します。

audio/*	音声ファイル
video/*	ビデオファイル
image/*	画像ファイル
ファイル拡張子	.jpgや.pdfといった拡張子で取り扱うファイル
MIMEタイプ	有効なMIMEタイプで拡張子のないものtext/plain等

capture属性

caputure属性は、accept属性で画像もしくは動画ファイルを指定した場合に、どのカメラを使用して撮影をするかを指定することができます。正しく指定されていない場合はfilesystem（ウィンドウズでいうエクスプローラー）が起動します。

camera	カメラ
camcorder	ビデオカメラ
microphone	音声レコーダー
filesystem	ファイル選択システム

上記の2つの属性を使って、フォームでスマホカメラを起動して写真を撮影することができます。

フォームでスマホカメラを起動して写真を撮影する

前項でご紹介した内容を使って、スマホカメラを起動してみます。ここでは画像を取り扱うため、accept属性にはimage/*を、caputure属性にはcameraを指定します。

HTML

<label for="upload">写真を撮影してアップロードする</label>
<input id="upload" type="file" name="image" accept="image/*" capture="camera">

実行結果は下記の通りです。スマホでアクセスして要素をクリックするとカメラが起動するかと思います。もしカメラが有効でない場合はファイル選択が起動します。

See the Pen 7588 by ryohei (@intotheprogram) on CodePen.

これでフォームでスマホカメラを起動して写真を撮影することができます。以降の処理については、ファイルアップロードと同様に撮影したファイルを扱うことができます。

最後に

クライアントからスマホカメラで撮影したファイルを取り扱いたい要望があり、本記事の内容をまとめました。これまで触れたことのない処理なので、どんな風に実装するのかワクワクして調べまていたのですが、inputのfileで実現できるとは……驚きです。HTMLはどんどん使いやすく進化していますし、今後も発展していくでしょうから、新しい技術で知識をアップデートしていきたいところですね。

以上、HTMLでスマホカメラを起動して写真を撮影する方法のご紹介でした！