ImageCapture

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

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

コンストラクター

ImageCapture()

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

インスタンスプロパティ

ImageCapture.track 読取専用

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

インスタンスメソッド

ImageCapture.takePhoto()

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

ImageCapture.getPhotoCapabilities()

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

ImageCapture.getPhotoSettings()

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

ImageCapture.grabFrame()

ライブ動画のスナップショットを 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;
});