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

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

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

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

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

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

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

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

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 を投げます。

let imageCapture = new ImageCapture(track);

インターフェイス

ImageCaptureExperimental

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

仕様書

ブラウザーの互換性

関連情報

• MediaStream
• MediaStreamTrack