Media Capture and Streams APIは、利用者の許可を受けて、ブラウザからカメラやマイクを使うための仕組みです。受け取った映像や音声は、ブラウザ内でひとまとまりのデータとして扱えます。
利用者の許可を受けて映像を取り込む
カメラを使いたいのか、マイクを使いたいのかという条件を指定すると、ブラウザが許可の状態を確認し、必要に応じて利用者に許可を求めます。許可されると、映像や音声をまとめたMediaStreamを受け取れます。この処理にはnavigator.mediaDevices.getUserMedia()を使います。
映像だけが必要な場合は、videoを有効、audioを無効にします。こうした利用条件は制約と呼ばれます。
カメラの確認には時間がかかるため、結果はすぐに返るとは限りません。JavaScriptでは、あとから結果を受け取るPromiseという仕組みで扱います。利用者が拒否した場合や、条件に合う機器が見つからない場合は、エラーとして処理されます。
取得した映像のまとまりをvideo要素のsrcObjectへ設定すると、画面にカメラ映像を表示できます。映像の一場面を画像として加工する場合は、video要素をCanvasへ描画するなど、別のAPIと組み合わせます。
カメラを使い終わったら停止する
カメラやマイクは個人の映像や音声を扱うため、利用者の許可なしには使えません。また、通信が保護されたHTTPSのページや、開発用のlocalhostなどから利用する必要があります。このような安全性の条件を満たすページは、セキュアコンテキストと呼ばれます。
映像や音声のまとまりは、映像用、音声用といった個別の流れに分かれています。この一つずつの流れをMediaStreamTrackと呼びます。
カメラを使い終わったら、各Trackのstop()を呼び出して停止します。停止したTrackは入力元から切り離され、状態を表すreadyStateはendedになります。同じカメラを別のTrackも使っている場合、機器自体がすぐ停止するとは限りません。
このAPIはカメラ映像を取得する方法を提供しますが、その後のデータをサーバーへ送るか、ブラウザ内だけで扱うかまでは決めません。映像の保存先や送信処理は、利用するWebアプリ側の実装によって変わります。
使ったアプリ
- タイムスキャンカメラ — ブラウザからカメラ映像を受け取る部分
- Chrono Sculpture — 5秒間の撮影に使うカメラ映像を受け取る部分