MediaStream 画像キャプチャ API

画像または映像ストリームを検索するプロセスは、以下のように行われます。サンプルコードは、 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);

ImageCapture Experimental

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

• MediaStream
• MediaStreamTrack