こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

お問い合わせフォームを入力している際、身分証明書など何かしら写真を添付する必要がある場面もあるかと思います。
お問い合わせフォームの入力を中断して、カメラを起動して撮影して、それを写真履歴から探して指定する。。。
PCだと仕方ないですが、スマホの場合は、そのまま撮影してそれを添付出来たらいいのになと思ったことはないですか？
実はそんなことが出来るんです。
この記事ではスマホのカメラを起動して撮影する方法をご紹介したいと思います。

スマホのカメラを起動する方法

スマホカメラを起動する場合、使用するタグは<input type="file">になります。

写真の場合

スマホのカメラを起動して写真を撮る方法をご紹介します。
<input type="file">にcapture属性を指定することで背面カメラ（environment）かインカメラ（user）のどちらかを起動するかを指定します。
また、accept属性で写真を撮るための指定としてimage/*を指定します。

背面カメラを起動する方法

背面カメラを起動し写真を撮る場合の指定はこちら。

<input type="file" capture="environment" accept="image/*">

背面カメラを起動する場合はcapture属性にはenvironment、写真る場合はaccept属性にはimage/*を指定します。

実装サンプルはこちら。ただし、カメラが起動するのはスマホのみでPCの場合はエクスプローラーが表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

インカメラを起動する方法

インカメラを起動し写真を撮る場合の指定はこちら。

<input type="file" capture="user" accept="image/*">

インカメラを起動する場合はcapture属性にはuser、写真を撮る場合はaccept属性にはimage/*を指定します。

実装サンプルはこちら。ただし、カメラが起動するのはスマホのみでPCの場合はエクスプローラーが表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

動画の場合

スマホのカメラを起動して動画を撮る方法をご紹介します。
<input type="file">にcapture属性を指定することで背面カメラ（environment）かインカメラ（user）のどちらかを起動するかを指定します。
また、accept属性で写真を撮るための指定としてvideo/*を指定します。

背面カメラを起動する方法

背面カメラを起動し動画を撮る場合の指定はこちら。

<input type="file" capture="environment" accept="video/*">

背面カメラを起動する場合はcapture属性にはenvironment、写真を撮る場合はaccept属性にはvideo/*を指定します。

実装サンプルはこちら。ただし、カメラが起動するのはスマホのみでPCの場合はエクスプローラーが表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

インカメラを起動する方法

インカメラを起動し動画を撮る場合の指定はこちら。

<input type="file" capture="user" accept="video/*">

インカメラを起動する場合はcapture属性にはuser、写真を撮る場合はaccept属性にはvideo/*を指定します。

実装サンプルはこちら。ただし、カメラが起動するのはスマホのみでPCの場合はエクスプローラーが表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

capture属性とaccept属性

最後にcapture属性とaccept属性を整理して表にしてみました。

	capture属性	accept属性
背面カメラが起動して写真を撮影したい場合	environment	image/*
インカメラが起動して写真を撮影したい場合	user	image/*
背面カメラが起動して動画を撮影したい場合	environment	video/*
インカメラが起動して動画を撮影したい場合	user	video/*

まとめ

いかがでしたか？
お問い合わせフォームで写真を撮影してそのままその画像や動画を貼り付けたいという場合に使えますね。
実際に実装するまでそんなことが出来るなんて知らなかったのですごく勉強になりました

これからもHTMLやCSSはどんどん便利になっていくのかなと思うとワクワクしますね。