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 givenMediaStreamTrack
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 aPromise
that resolves with aBlob
containing the data. ImageCapture.getPhotoCapabilities()
- Returns a
Promise
that resolves with aPhotoCapabilities
object containing the ranges of available configuration options. ImageCapture.getPhotoSettings()
- Returns a
Promise
that resolves with aPhotoSettings
object containing the current photo configuration settings. ImageCapture.grabFrame()
- Takes a snapshot of the live video in a
MediaStreamTrack
, returning anImageBitmap
, 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ImageCapture | Chrome Full support 59 | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support 46 | Safari ? | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 7.0 |
ImageCapture() constructor | Chrome Full support 59 | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support 46 | Safari ? | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 7.0 |
getPhotoCapabilities | Chrome Full support 59 | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support 46 | Safari ? | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 7.0 |
getPhotoSettings | Chrome Full support 61 | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support 46 | Safari ? | WebView Android Full support 61 | Chrome Android Full support 61 | Firefox Android ? | Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 8.0 |
grabFrame | Chrome Full support 59 | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support 46 | Safari ? | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 7.0 |
takePhoto | Chrome
Full support
60
| Edge Full support ≤79 | Firefox ? | IE ? | Opera
Full support
47
| Safari ? | WebView Android
Full support
60
| Chrome Android
Full support
60
| Firefox Android ? | Opera Android
Full support
44
| Safari iOS ? | Samsung Internet Android
Full support
8.0
|
track | Chrome Full support 59 | Edge Full support ≤79 | Firefox ? | IE ? | Opera Full support 46 | Safari ? | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android ? | Opera Android Full support 43 | Safari 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.