サクッと試す！HTML＋JavaScript APIの最新事情(2) その場で撮影してアップロード！HTML Media Captureを試そう

はじめに

私たちを取り巻くWeb技術は、もはや社会的なインフラとしてめまぐるしく進化しています。HTMLやCSSはもちろんのこと、JavaScriptやライブラリ、フレームワークなど、それぞれがニーズにキャッチアップする形で、機能強化を繰り返しています。その中でも、Web技術の中核に位置するにもかかわらず、意外と見過ごされがちなのがHTMLの進化です。本連載は、このHTMLと関連するJavaScript APIにフォーカスして、その新機能を手軽に試していただこうというものです。理解も利用もたやすいHTMLなので、ライトな気持ちで「こんなことができるようになったのか」を感じていただきます。

［NOTE］サンプルについて
本記事の配布サンプルは、以下のURLから入手できます。
https://github.com/wateryinhare62/mynavi_html

連載第2回の目的

この回では、静止画や動画、音声をその場で撮影、録音してアップロードできるHTML Media Captureを紹介します。通常は、ファイルとして用意しておく必要のあるメディアデータを、その場で用意できる機能です。例えば、以下のようなシチュエーションが考えられます。

・リアルタイム報告アプリ
モバイルデバイスのカメラを使って現場の画像や動画を撮影し、リアルタイムでの管理者への報告や部門における共有に利用できます。

・商品のバーコードスキャン
モバイルデバイスのカメラを使って商品のバーコードやQRコードをスキャンし、そのデータをアプリに即座に入力することで、商品管理や在庫管理などに利用できます。

・証明書や書類の即時キャプチャ
本人確認が必要な決済システムや登録システムなどにおいて、ユーザーの各種証明書や書類をモバイルデバイスのカメラを使って撮影しアップロードすることで、オンラインで完結するシステムの構築に利用できます。

いずれも、画像や動画を受け取ってからの処理をどのようなものにするかで、大きな利用の可能性を秘めるものです。本記事は、その入口となるHTML Media Captureの機能と利用法について紹介します。

HTML Media Captureとは

今回のテーマであるHTML Media Captureとは、アップロードしたいメディアファイルをデバイス内蔵のカメラやマイクを使ってその場で撮影、録音して作成できる機能です（図1）。通常、ファイルのアップロード機能は既存のファイルに対してのものですが、その場で撮影、録音して作られたファイルをアップロードできるので、リアルタイム性が重視されるモバイルデバイスでは特に有用な機能といえます。

図1：HTML Media Captureのイメージ

HTML Media Capture自体は2010年の登場と、決して新しいとはいえない仕様なのですが、2018年の勧告に至るまでに仕様が何度か変化しました。本記事は、この2018年勧告の仕様に基づいています。現状では、プラットフォームやブラウザによって対応状況がまちまちという状況です。実際は、モバイルデバイスにほぼ限定された機能で、モバイルデバイス用の主要なブラウザでサポートされますが、PCのブラウザではサポートされません。後ほど例を示しますが、利用にあたってはまずこの点を押さえておきましょう。図2は、「Can I use」（HTMLなどのブラウザにおけるサポート状況を確認できるサイト）での確認結果です。

図2：HTML Media Captureのサポート状況

サーバ環境の準備

HTML Media Captureの性質上、本記事のサンプルの利用には、サーバ機能が必要です。モバイルデバイスからHTMLファイルにアクセスしたり、アップロードされたファイルを受信したりできるようにするためです。本記事では著者が用意したサーバにHTMLファイルを配置し、さらにPHP言語で記述した簡単なサーバサイドスクリプトを配置し（リスト1）、アップロードされたファイルの情報を表示できるようにしました。

リスト1：upload.php

<?php
echo '<pre>';
print_r($_FILES);
echo '</pre>';
?>

アップロードされたファイルの情報だけを確認できればよいので、アップロードしたファイルは利用せずに、リクエスト終了後にそのまま削除されるのに任せています。
サーバ機能は、XAMPP（https://www.apachefriends.org/download.html）などをインストールすることで、ローカルのPCなどに各自で構築することもできます。XAMPPを含めてサーバ環境を自分で用意する読者は、上記のスクリプトファイルを設置し、サンプル中のform要素のaction属性には、そのURLを指定してください。

静止画を撮影してアップロードする

まずは、最も一般的と思われる静止画のアップロードから紹介します。HTML Media Captureの機能は、type属性が"file"であるinput要素、すなわちファイルアップロードのコントロールにて利用可能です。このinput要素に、capture属性とaccept属性を指定してメディアのキャプチャを可能にします。

・capture属性：どのデバイスでキャプチャするか指定する。user（ユーザ側のカメラやマイク）とenvironment（外側のカメラやマイク）が指定可能なほか、値のないブール属性としてデバイスの実装依存も指定可能
・accept属性：メディアのタイプ（image/*、video/*、audio/*など。本記事ではHTML Media Captureにて有用なものについてのみ言及）

capture属性は、ブラウザ間の互換性としてはLimited availability（下記、NOTEを参照）となっています。これはブラウザによりサポートされていない場合があるということですが、実際はモバイル用のブラウザでのみサポートされるという限定された状態のようです。
accept属性は、ブラウザ間の互換性としてはBaselineであり、Widely availableです。受け入れ可能なファイルの種類を指定する、以前より広く使われている一般的な属性です。

［NOTE］BaselineとLimited availability
Baselineとは、ある機能が長期にわたる継続的なサポートにより広く利用可能になったか、現在使われている安定版のブラウザで新たに利用可能になった状態をいいます。つまり、Baselineとは、ブラウザ間の互換性が高く安心して使える状態の機能ということになります。Baselineは、W3C WebDX Community Groupのコミュニティ活動として策定されており、さらに以下の状態があります。

・Widely available：何年も前から複数ブラウザでサポートされる信頼できる状態
・Newly available：最新ブラウザで動作するが古いブラウザでは動作しないこともある状態

Baselineとは別に、Limited availabilityという状態もあります。これは、利用できても限定的であるということを意味しています。利用においては十分な検討を行い、できればBaselineに達するまで利用を避けるべき機能です。

リスト2は、静止画を撮影してアップロードすることを意図したフォームです。

リスト2：capture_image.html

<form enctype="multipart/form-data" action="https://annex.naosan.jp/upload.php" method="POST">  (1)
  <input type="hidden" name="MAX_FILE_SIZE" value="10000000" /> (2)
  <label for="frontcamera">フロントカメラで静止画撮影：</label>
  <input type="file" id="frontcamera" name="imagefile" capture="user" accept="image/*" />   (3)
  <input type="submit" value="送信" />
</form>

（1）はファイルをアップロードするフォームでは一般的な指定です。（2）は、受信側がPHPスクリプトである場合に必要とされる指定で、指定サイズ（この場合は10,000,000バイト）を超えるファイルを受け取らないようにする安全のための指定です。
ポイントは、（3）のようにinput要素（type="file"）に指定されたcapture属性、accept属性です。

・capture="user"：ユーザ側のカメラすなわちフロントカメラを使用
・accept="image/*"：静止画ファイルを受け入れる（形式は問わない）

capture="user"をcapture="environment"に変更すると、外側のカメラすなわちバックカメラを使った撮影になりますので試してみるとよいでしょう。
まずは、PCのブラウザ（ここではWindows版のGoogle Chrome）で試してみます。HTMLファイルを開くと図3のようなフォームが表示されます。［ファイルを選択］ボタンをクリックすると、画像ファイルを選択するダイアログボックスが表示されます（図4）。適当なファイルを選んで［送信］ボタンをクリックすると（図5）、図6のようにアップロードされたファイルの情報が表示されます。

図3：静止画撮影フォーム（PC）

図4：静止画ファイル選択中（PC）

図5：静止画ファイル選択後（PC）

図6：静止画ファイルのアップロード後（PC）

前述のようにPCのブラウザはHTML Media Captureをサポートしません。capture属性の有無にかかわらず、カメラを使った撮影ではなくファイルシステム上のファイルを直接アップロードするという動きになります。
同じHTMLファイルを、今度はモバイルデバイス（iPhone、iOS 18、Google Chrome）で開いて同様の操作を行うと、今度は図7～図10のようにフロントカメラが起動し、撮影してできた静止画ファイルをアップロードするようになります。

図7：静止画撮影フォーム（iPhone）

↓

図8：静止画撮影中（iPhone）

↓

図9：静止画撮影後のフォーム（iPhone）

↓

図10：静止画ファイルのアップロード後（iPhone）

最後の図10を見ると、撮影してできたファイルはimage.jpg、ファイルタイプはimage/jpegとなるといったことが分かります。

［NOTE］
モバイルデバイスを使った実行例は、筆者が日常的に利用しているiPhoneとGoogle Chromeでの手順を示しています。デバイスとOSの種類やバージョン（iOS、Android OSなど）、ブラウザの種類やバージョン（Chrome、Safari、Firefoxなど）、OSのセキュリティ設定の組み合わせによっては、記載通りの動作にならないこともあります。

動画を撮影してアップロードする

今度は動画をアップロードしてみましょう。動画なので、バックカメラを使ってみることにします。フォームの基本的な構造は静止画アップロードと同じなので、要所のみ示すことにします（リスト3）。

リスト3：capture_video.html

<input type="file" id="backcamera" name="videofile" capture="environment" accept="video/*" />

静止画と異なる点は、capture属性とaccept属性です。

・capture="environment"：外側のカメラすなわちバックカメラを使用
・accept="video/*"：動画ファイルを受け入れる（形式は問わない）

バックカメラが起動し、撮影してできた動画ファイルをアップロードするようになります。アップロード後の画面は図11のようになります。

図11：動画ファイルのアップロード後（iPhone、全体を見るために横向きに表示）

図11を見ると、撮影してできたファイルは7657832….mov（かなり長いファイル名）、ファイルタイプはvideo/quicktimeとなるといったことが分かります。ちなみに筆者所有のAndroidスマートフォン（Android OS 10）では、ファイルは250408….mp4（日付と時刻からなるファイル名）など、タイプはvideo/mp4となりました。