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 的“获取帧 - 拍照”示例。由于 ImageCapture 需要一些地方来捕获图像，因此以下示例从设备的媒体设备（换句话说，是相机）开始。

此示例大体上展示了从设备的 MediaStream 中提取的 MediaStreamTrack。然后使用该轨迹创建 ImageCapture 对象，以便可以调用 takePhoto() 和 grabFrame()。最后，它展示了如何将这些调用的结果应用于画布对象。

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 Image Capture
# imagecaptureapi

浏览器兼容性

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