HTML5とJavaScriptでカメラ撮影：解像度やサイズを指定する2つの方法

スマートフォンで撮影した写真のファイルサイズが大きすぎると、アップロードや通信に時間がかかってしまいます。「もっと小さな画像を取得したい」という場面では、W3Cが標準化している2つのカメラ撮影手法から目的に合ったものを選ぶことができます。1つはHTMLだけで完結するシンプルな方法、もう1つはJavaScriptと組み合わせて細かく制御する方法です。

HTML Media Capture

HTMLだけで実装する場合は、inputタグにcapture属性とaccept="image/*"を指定します。これにより、端末側へ「カメラで撮影したい」という意図を伝えることができます。

ただしこの方法には重要な制限があります。撮影画像の解像度やサイズを直接指定することはできません。あくまでカメラ起動の意図を宣言する仕組みであり、画質や寸法の制御までは行えない点に注意が必要です。

Media Capture Streams（getUserMedia）

より高度な制御が必要なケースでは、Media Capture and Streams API（getUserMedia）を利用します。このAPIはカメラへの完全なプログラマティックアクセスを提供するため、動画や静止画の撮影用に独自のキャプチャダイアログを自由に実装できます。

さらに、width（幅）やheight（高さ）、frameRate（フレームレート）、facingMode（前面・背面カメラの指定）といった各種制約を細かく指定できるため、解像度を抑えた小さめの画像を意図的に取得することも可能になります。

一方で注意点もあります。このAPIのグローバルなブラウザサポート率はおよそ50%前後にとどまるため、社内システムのように対象ブラウザを限定できるクローズドな環境での利用が現実的な選択肢となるでしょう。