ImageCapture

A interface ImageCapture da MediaStream Image Capture API (en-US) 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() (en-US): 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 (en-US) 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() (en-US): 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() (en-US): Retorna um Promise que resolve com um objeto PhotoCapabilities (en-US) que contém os intervalos de opções de configuração disponíveis.
ImageCapture.getPhotoSettings() (en-US): Retorna um Promise que é resolvido com um objeto PhotoSettings que contém as definições de configuração de foto atuais.
ImageCapture.grabFrame() (en-US): Tira uma captura instantânea do vídeo ao vivo em um MediaStreamTrack, retornando um ImageBitmap (en-US), 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 (en-US) 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 com navegadores

BCD tables only load in the browser