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
ImageCaptureque pode ser usado para capturar quadros estáticos (fotos) de um determinadoMediaStreamTrackque representa um fluxo de vídeo.
Propriedades
ImageCapture.trackSomente leitura-
Retorna uma referência ao
MediaStreamTrackpassado 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
MediaStreamTracke retorna umPromiseque resolve com umBlobque contém o dados. ImageCapture.getPhotoCapabilities()-
Retorna um
Promiseque resolve com um objetoPhotoCapabilitiesque contém os intervalos de opções de configuração disponíveis. ImageCapture.getPhotoSettings()-
Retorna um
Promiseque é resolvido com um objetoPhotoSettingsque 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 umImageBitmap, 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
| Specification |
|---|
| MediaStream Image Capture # imagecaptureapi |
Compatibilidade com navegadores
Loading…