ImageCapture

ImageCapture interface of the 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 只读
Returns a reference to the MediaStreamTrack passed to the constructor.

方法

ImageCapture interface is based on 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 and returns a 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 , returning an ImageBitmap , if successful.

范例

The following code is taken from Chrome's Grab Frame - Take Photo Sample . Since 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;
});
					

规范

规范 状态 Comment
MediaStream Image Capture
The definition of 'ImageCapture' in that specification.
工作草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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

图例

完整支持
完整支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。