目次
本記事では、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でスマホカメラを起動して写真を撮影する方法のご紹介でした！
