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 オブジェクトのプロパティを用いて使いたいものを選ぶことができます。

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

let imageCapture = new ImageCapture(track);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年3月14日 by MDN contributors.

View this page on GitHub • Report a problem with this content

MediaStream 画像キャプチャ API
インターフェイス
1. ImageCapture

MediaStream 画像キャプチャ API

In this article

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

インターフェイス

仕様書

ブラウザーの互換性

関連情報

Help improve MDN