ImageCapture

The ImageCapture interface of the MediaStream Image Capture API provides methods to enable the capture of images or photos from a camera or other photographic deviceprovides an interface for capturing images from a photographic device referenced through a valid MediaStreamTrack.

Constructor

ImageCapture.ImageCapture()
Creates a new ImageCapture object which can be used to capture still frames (photos) from a given MediaStreamTrack which represents a video stream.

Properties

ImageCapture.track Read only
Returns a reference to the MediaStreamTrack passed to the constructor.

Methods

The 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()
Returns a Promise that resolves with a PhotoCapabilities object containing the ranges of available configuration options. 
ImageCapture.getPhotoSettings()
Returns a 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.

Example

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;
});

Specifications

Specification Status Comment
MediaStream Image Capture
The definition of 'ImageCapture' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
ImageCapture() constructor
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
getPhotoCapabilities
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
getPhotoSettings
Experimental
Chrome Full support 61Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 61Chrome Android Full support 61Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android ?
grabFrame
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
takePhoto
Experimental
Chrome Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Edge ? Firefox ? IE ? Opera Full support 47
Full support 47
No support 46 — 47
Notes
Notes photoSettings argument not supported.
Safari ? WebView Android Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Chrome Android Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0
track
Experimental
Chrome Full support 59Edge ? Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Edge Mobile ? Firefox Android ? Opera Android Full support 46Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

Document Tags and Contributors

Contributors to this page: Sheppy, fscholz, LauJi, FloraFauna, jpmedley
Last updated by: Sheppy,