ImageCapture: grabFrame() メソッド

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

grabFrame() は ImageCapture インターフェイスのメソッドで、 MediaStreamTrack 内のライブ動画のスナップショットを取り、スナップショットを格納した ImageBitmap で解決するプロミス (Promise) を返します。

構文

js
grabFrame()

引数

なし。

返値

ImageBitmap オブジェクトで解決する Promise です。

例外

InvalidStateError DOMException

コンストラクターで渡した MediaStreamTrack の readyState プロパティが live でない場合に発生します。

UnknownError DOMException

何らかの理由で処理を完了できない場合に発生します。

例

この例は、このシンプルな画像キャプチャのデモから抜粋したものです。 grabFrame() が返す Promise を使用して、返されたフレームを <canvas> 要素にコピーする方法を示しています。簡単にするために、 ImageCapture オブジェクトをインスタンス化する方法は示していません。

js
let grabFrameButton = document.querySelector("button#grabFrame");
let canvas = document.querySelector("canvas");

grabFrameButton.onclick = grabFrame;

function grabFrame() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      console.log("Grabbed frame:", imageBitmap);
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
      canvas.classList.remove("hidden");
    })
    .catch((error) => {
      console.error("grabFrame() error: ", error);
    });
}

仕様書

Specification
MediaStream Image Capture
# dom-imagecapture-grabframe

ブラウザーの互換性

BCD tables only load in the browser