ImageCapture

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.

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