ImageCapture：grabFrame() 方法

实验性：这是一个实验性技术
在生产环境中使用此技术之前，请仔细查看浏览器兼容性表。

grabFrame() 方法是ImageCapture接口的方法，它对MediaStreamTrack中的实时视频进行快照，并返回一个Promise，该 Promise 将解析为包含快照的ImageBitmap。

语法

js
grabFrame()

参数

无。

返回值

一个Promise，它解析为一个ImageBitmap对象。

异常

InvalidStateError DOMException

如果在构造函数中传递的MediaStreamTrack的readyState属性不是live，则抛出此异常。

UnknownError DOMException

如果操作由于任何原因无法完成，则抛出此异常。

示例

此示例摘自Simple Image Capture 演示。它展示了如何使用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);
    });
}

规范

规范
MediaStream Image Capture
# dom-imagecapture-grabframe

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。