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

こんにちは、ryohei(@ityryohei)です!

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

フォームからスマホのカメラを起動して撮影した写真を使用したいな。良い方法ないかな?

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

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

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

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

accept属性

accept属性は、inputtype属性の値に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でスマホカメラを起動して写真を撮影する方法のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍