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.

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