ImageCapture | Web API

在此页

构造函数
特性
方法
范例
规范
浏览器兼容性
相关话题

ImageCapture 接口在 MediaStream 图像捕获 API provides methods to enable the capture of images or photos from a camera or other photographic device. It provides an interface for capturing images from a photographic device referenced through a valid MediaStreamTrack .

构造函数

ImageCapture(): 创建新的 ImageCapture object which can be used to capture still frames (photos) from a given MediaStreamTrack which represents a video stream.

特性

ImageCapture.track 只读: 返回引用针对 MediaStreamTrack passed to the constructor.

方法

ImageCapture 接口基于 EventTarget , so it includes the methods defined by that interface as well as the ones listed below.

ImageCapture.takePhoto(): Takes a single exposure using the video capture device sourcing a MediaStreamTrack 并返回 Promise that resolves with a Blob containing the data.
ImageCapture.getPhotoCapabilities(): 返回 Promise that resolves with a PhotoCapabilities object containing the ranges of available configuration options.
ImageCapture.getPhotoSettings(): 返回 Promise that resolves with a PhotoSettings object containing the current photo configuration settings.
ImageCapture.grabFrame(): Takes a snapshot of the live video in a MediaStreamTrack ，返回 ImageBitmap , if successful.

范例

The following code is taken from Chrome's Grab Frame - Take Photo Sample 。由于 ImageCapture requires some place to capture an image from, the example below starts with a device's media device (in other words a camera).

This example shows, roughly, a MediaStreamTrack extracted from a device's MediaStream . The track is then used to create an ImageCapture object so that takePhoto() and grabFrame() can be called. Finally, it shows how to apply the results of these calls to a canvas object.

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

规范

规范	状态	注释
MediaStream 图像捕获 The definition of 'ImageCapture' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ImageCapture`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`ImageCapture()` 构造函数	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`getPhotoCapabilities`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`getPhotoSettings`	Chrome 61	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 61	Chrome Android 61	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 8.0
`grabFrame`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`takePhoto`	Chrome 60 60 不支持 59 — 60 `photoSettings` argument not supported.	Edge ≤79	Firefox ?	IE ?	Opera 47 47 不支持 46 — 47 `photoSettings` argument not supported.	Safari ?	WebView Android 60 60 不支持 59 — 60 `photoSettings` argument not supported.	Chrome Android 60 60 不支持 59 — 60 `photoSettings` argument not supported.	Firefox Android ?	Opera Android 44 44 不支持 43 — 44 `photoSettings` argument not supported.	Safari iOS ?	Samsung Internet Android 8.0 8.0 不支持 7.0 — 8.0 `photoSettings` argument not supported.
`track`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0

图例

完整支持
兼容性未知 ?
实验。期望将来行为有所改变。

元数据

最后修改： May 29, 2020

在此页

构造函数

特性

方法

范例

规范

浏览器兼容性

图例

相关话题