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 device. It provides an interface for capturing images from a photographic device referenced through a valid MediaStreamTrack.

Constructor

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ImageCapture
59
≤79
No
No
46
No
59
59
No
43
No
7.0
ImageCapture
59
≤79
No
No
46
No
59
59
No
43
No
7.0
getPhotoCapabilities
59
≤79
No
No
46
No
59
59
No
43
No
7.0
getPhotoSettings
61
≤79
No
No
46
No
61
61
No
43
No
8.0
grabFrame
59
≤79
No
No
46
No
59
59
No
43
No
7.0
takePhoto
60
59-60
photoSettings argument not supported.
≤79
No
No
47
46-47
photoSettings argument not supported.
No
60
59-60
photoSettings argument not supported.
60
59-60
photoSettings argument not supported.
No
44
43-44
photoSettings argument not supported.
No
8.0
7.0-8.0
photoSettings argument not supported.
track
59
≤79
No
No
46
No
59
59
No
43
No
7.0

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture