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` (en-US) 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` (en-US) que representa um fluxo de vídeo.

Propriedades
------------

`ImageCapture.track` (en-US) Somente leitura 

Retorna uma referência ao `MediaStreamTrack` (en-US) 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` (en-US) 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` (en-US), 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` (en-US) 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.


```js
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
--------------

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.