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 |
浏览器兼容性
加载中…