ImageCapture
ImageCapture 介面是 MediaStream Image Capture API 的一部分，它提供了一種方法，可以從相機或其他攝影裝置捕獲影像或照片。它為透過有效的 MediaStreamTrack 引用捕獲攝影裝置影像提供了一個介面。
建構函式
ImageCapture()-
建立一個新的
ImageCapture物件，該物件可用於從代表影片流的給定MediaStreamTrack中捕獲靜態幀（照片）。
例項屬性
ImageCapture.track只讀-
返回傳遞給建構函式的
MediaStreamTrack的引用。
例項方法
ImageCapture.takePhoto()-
使用來自
MediaStreamTrack的影片捕獲裝置拍攝單次曝光，並返回一個Promise，該 Promise 會解析為一個包含資料的Blob。 ImageCapture.getPhotoCapabilities()-
返回一個
Promise，該 Promise 會解析為一個包含可用配置選項範圍的物件。 ImageCapture.getPhotoSettings()-
返回一個
Promise，該 Promise 會解析為一個包含當前照片配置設定的物件。 ImageCapture.grabFrame()-
從
MediaStreamTrack中的即時影片拍攝快照，如果成功，則返回一個ImageBitmap。
示例
以下程式碼摘自 Chrome 的 Grab Frame - Take Photo 示例。由於 ImageCapture 需要一個地方來捕獲影像，因此下面的示例從裝置的媒體裝置（換句話說，就是相機）開始。
此示例大致展示了一個從裝置 MediaStream 中提取的 MediaStreamTrack。然後使用該軌道建立 ImageCapture 物件，以便可以呼叫 takePhoto() 和 grabFrame()。最後，它展示瞭如何將這些呼叫的結果應用於 canvas 物件。
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;
});
規範
| 規範 |
|---|
| MediaStream 影像捕獲 # imagecaptureapi |
瀏覽器相容性
載入中…