ImageCapture

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

ImageCaptureMediaStream 画像キャプチャ API のインターフェイスで、カメラなどの撮影機器から画像や写真をキャプチャできるようにするメソッドを提供します。有効な MediaStreamTrack を通して、参照される撮影機器から画像をキャプチャするためのインターフェイスを提供します。

コンストラクター

ImageCapture() Experimental

新しい ImageCapture オブジェクトを作成します。このオブジェクトは、指定された MediaStreamTrack (映像ストリームを表します)から静止フレーム(写真)をキャプチャするために使用することができます。

インスタンスプロパティ

ImageCapture.track 読取専用 Experimental

コンストラクターに渡した MediaStreamTrack への参照を返します。

インスタンスメソッド

ImageCapture.takePhoto() Experimental

MediaStreamTrack をソースとする動画キャプチャ機器を使用して単一の撮影を行い、データを含む Blob で解決する Promise を返します。

ImageCapture.getPhotoCapabilities() Experimental

利用できる構成オプションの範囲を格納したオブジェクトで解決する Promise を返します。

ImageCapture.getPhotoSettings() Experimental

現在の写真の設定を格納したオブジェクトで解決する Promise を返します。

ImageCapture.grabFrame() Experimental

ライブ動画のスナップショットを MediaStreamTrack で受け取り、成功すれば ImageBitmap を返します。

以下のコードは Chrome の Grab Frame - Take Photo Sample から引用しています。 ImageCapture は画像をキャプチャする場所を要求されるので、下記の例では端末のメディア機器(言い換えればカメラ)から始めます。

この例では、大まかに、端末の MediaStream から抽出した MediaStream を表示しています。このトラックを使用して ImageCapture オブジェクトを作成し、 takePhoto()grabFrame() を呼び出すことができます。最後に、これらの呼び出しの結果をキャンバスオブジェクトに適用する方法を示します。

js
let imageCapture;

function onGetUserMediaButtonClick() {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((mediaStream) => {
      document.querySelector("video").srcObject = mediaStream;

      const track = mediaStream.getVideoTracks()[0];
      imageCapture = new ImageCapture(track);
    })
    .catch((error) => console.error(error));
}

function onGrabFrameButtonClick() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      const canvas = document.querySelector("#grabFrameCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.error(error));
}

function onTakePhotoButtonClick() {
  imageCapture
    .takePhoto()
    .then((blob) => createImageBitmap(blob))
    .then((imageBitmap) => {
      const canvas = document.querySelector("#takePhotoCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.error(error));
}

/* Utils */

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split("px")[0];
  canvas.height = getComputedStyle(canvas).height.split("px")[0];
  let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * ratio) / 2;
  let y = (canvas.height - img.height * ratio) / 2;
  canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  canvas
    .getContext("2d")
    .drawImage(
      img,
      0,
      0,
      img.width,
      img.height,
      x,
      y,
      img.width * ratio,
      img.height * ratio,
    );
}

document.querySelector("video").addEventListener("play", () => {
  document.querySelector("#grabFrameButton").disabled = false;
  document.querySelector("#takePhotoButton").disabled = false;
});

仕様書

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.