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 |
瀏覽器相容性
載入中…