ImageCapture：grabFrame() 方法
ImageCapture 接口的 grabFrame() 方法会截取 MediaStreamTrack 中的实时视频快照，并返回一个 Promise，该 Promise 在解决时带有一个包含快照的 ImageBitmap。
语法
js
grabFrame()
参数
无。
返回值
一个 Promise，它会解决为一个 ImageBitmap 对象。
异常
InvalidStateErrorDOMException-
如果构造函数中传入的
MediaStreamTrack的readyState属性不是live，则抛出此异常。 UnknownErrorDOMException-
如果由于任何原因操作无法完成，则抛出此异常。
示例
此示例摘自 Simple Image Capture demo。它展示了如何使用 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 图像捕获 # dom-imagecapture-grabframe |
浏览器兼容性
加载中…