MediaStream 画像キャプチャ API

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

MediaStream 画像キャプチャ API は、映像デバイスから画像や動画をキャプチャするための API です。データをキャプチャするだけでなく、画像サイズ、赤目軽減、フラッシュの有無、現在の設定などのデバイスの機能に関する情報を取得することもできます。逆に、API では、デバイスが許可する制限内で機能を設定できます。

MediaStream 画像キャプチャの概念と使用方法

画像または映像ストリームを検索するプロセスは、以下のように行われます。サンプルコードは、 Chrome の画像キャプチャの例を基にしています。

まず、MediaDevices.getUserMedia() を呼び出してデバイスへの参照を取得します。getUserMedia() メソッドではより詳細な機能を要求できますが、以下の例では単に利用可能な任意の映像デバイスを要求しています。このメソッドは、MediaStream オブジェクトで解決する Promise を返します。

js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // ストリームについて何らかの処理を行う
});

次に、メディアストリームから映像部分を分離します。これは、MediaStream.getVideoTracks() を呼ぶことで行います。これは MediaStreamTrack オブジェクトの配列を返します。以下のコードでは、MediaStreamTrack の配列の最初のアイテムが使いたいものだと仮定しています。MediaStreamTrack オブジェクトのプロパティを用いて使いたいものを選ぶことができます。

js
const track = mediaStream.getVideoTracks()[0];

この時点で、映像を取得する前にデバイスの機能の設定をしたいかもしれません。これは、他の操作をする前にトラックオブジェクトの applyConstraints() を呼ぶことでできます。

js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// ズームに対応しているかをチェックする
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });

最後に、MediaStreamTrack オブジェクトを ImageCapture() コンストラクターに渡します。MediaStream にはいくつかのトラックの種類があり、それらを取得する複数の方法を提供していますが、ImageCapture コンストラクターは MediaStreamTrack.kind"video" でない場合、種類が NotSupportedError である DOMException を投げます。

js
let imageCapture = new ImageCapture(track);

インターフェイス

ImageCapture Experimental

有効な MediaStreamTrack を通じて参照される映像デバイスから画像をキャプチャするためのインターフェイスです。

仕様書

Specification
MediaStream Image Capture
# imagecaptureapi

ブラウザーの互換性

BCD tables only load in the browser

関連情報