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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ImageCapture
Experimental
ImageCapture() constructor
Experimental
getPhotoCapabilities
Experimental
getPhotoSettings
Experimental
grabFrame
Experimental
takePhoto
Experimental
track
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

関連情報