ImageCapture - 提供了从相机捕获图像的方法

ImageCapture 是 MediaStream Image Capture API 的接口，提供了从相机或其他摄影设备捕获图像或照片的方法，提供了用于从通过有效 MediaStreamTrack 引用的摄影设备捕获图像的接口。

构造函数

ImageCapture()

创建一个新的 ImageCapture 对象，可用于捕获代表视频流的给定 MediaStreamTrack 的静止帧（照片）。

属性

ImageCapture.track 只读

返回对传递给构造函数的 MediaStreamTrack 的引用。

方法

ImageCapture 接口基于 EventTarget，因此它包含该接口定义的方法以及下面列出的方法。

ImageCapture.takePhoto()

使用视频捕获设备进行单次曝光，获取 MediaStreamTrack 并返回 Promise，其中包含了 Blob 数据。

ImageCapture.getPhotoCapabilities()

返回 Promise，它解析为包含可用配置选项范围的 PhotoCapabilities 对象。

ImageCapture.getPhotoSettings()

返回 Promise，它解析为包含当前照片配置设置的 PhotoSettings 对象。

ImageCapture.grabFrame()

在 MediaStreamTrack 中拍摄实时视频的快照，如果成功则返回 ImageBitmap。

实例

以下代码取自 Chrome 的 Grab Frame - 拍照片样本。由于 ImageCapture 需要一些地方来捕获图像，下面的实例从设备的媒体设备（换句话说是相机）开始。

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

var 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.log(error));
}

function onGrabFrameButtonClick() {
  imageCapture.grabFrame()
  .then(imageBitmap => {
    const canvas = document.querySelector('#grabFrameCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
}

function onTakePhotoButtonClick() {
  imageCapture.takePhoto()
  .then(blob => createImageBitmap(blob))
  .then(imageBitmap => {
    const canvas = document.querySelector('#takePhotoCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
}

/* 工具 */

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', function() {
  document.querySelector('#grabFrameButton').disabled = false;
  document.querySelector('#takePhotoButton').disabled = false;
});

规范

规范	状态	备注
MediaStream Image Capture ImageCapture 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 不支持 photoSettings 参数。