ImageCapture

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

A interface ImageCapture da MediaStream Image Capture API fornece métodos para permitir a captura de images ou fotos de uma câmera ou de um dispositivo fotográfico. É fornecido uma interface para capturar images de um dispositive fotográfico referenciado por meio de um MediaStreamTrack válido.

Construtor

ImageCapture()
Cria um novo objeto ImageCapture que pode ser usado para capturar quadros estáticos (fotos) de um determinado MediaStreamTrack que representa um fluxo de vídeo.

Propriedades

ImageCapture.track Somente leitura
Retorna uma referência ao MediaStreamTrack passado ao construtor.

Métodos

A interface do ImageCapture é baseada em EventTarget}, portanto inclui os métodos definidos por essa interface e os listados abaixo.

ImageCapture.takePhoto()
Faz uma única exposição usando o dispositivo de captura de vídeo que busca um MediaStreamTrack e retorna um Promise que resolve com um Blob que contém o dados.
ImageCapture.getPhotoCapabilities()
Retorna um Promise que resolve com um objeto PhotoCapabilities que contém os intervalos de opções de configuração disponíveis.
ImageCapture.getPhotoSettings()
Retorna um Promise que é resolvido com um objeto PhotoSettings que contém as definições de configuração de foto atuais.
ImageCapture.grabFrame()
Tira uma captura instantânea do vídeo ao vivo em um MediaStreamTrack, retornando um ImageBitmap, se for bem-sucedido.

Exemplo

O código a seguir foi retirado do Chrome's Grab Frame - Take Photo Sample. Como o ImageCapture requer algum lugar para capturar uma imagem, o exemplo abaixo começa com o dispositivo de mídia de um dispositivo (em outras palavras, uma câmera).

Este exemplo mostra, aproximadamente, um MediaStreamTrack extraído do MediaStream de um dispositivo. A faixa é usada para criar um objeto ImageCapture, para que seja possível chamar takePhoto() e grabFrame(). Por fim, mostra como aplicar os resultados dessas chamadas a um objeto de tela.

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

Especificações

Especificação Status Comentário
MediaStream Image Capture
The definition of 'ImageCapture' in that specification.
Rascunho atual Initial definition.

Compatibilidade do navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ImageCapture
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0
ImageCapture() constructor
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0
getPhotoCapabilities
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0
getPhotoSettings
Experimental
Chrome Full support 61Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari ? WebView Android Full support 61Chrome Android Full support 61Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 8.0
grabFrame
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari 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 Full support ≤79Firefox ? IE No support NoOpera 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.
Firefox Android ? Opera Android Full support 44
Full support 44
No support 43 — 44
Notes
Notes photoSettings argument not supported.
Safari iOS ? Samsung Internet Android Full support 8.0
Full support 8.0
No support 7.0 — 8.0
Notes
Notes photoSettings argument not supported.
track
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No 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.