Tirar fotos e controlar as configurações da câmera

Miguel Casas-Sanchez
X GitHub
Sam Dutton
François Beaufort
François Beaufort
GitHub

A Image Capture é uma API para capturar imagens estáticas e configurar o hardware da câmera configurações. Essa API está disponível no Chrome 59 para Android e computadores. Nós também publicou uma biblioteca de polyfill ImageCapture (link em inglês).

A API permite controlar os recursos da câmera, como zoom, brilho, contraste, ISO e balanço de branco. E o melhor de tudo é que a captura de imagens permite acessar os recursos de resolução máxima de todas as webcams ou câmeras de dispositivos disponíveis. As técnicas anteriores para tirar fotos na Web usavam snapshots de vídeo, que têm resolução menor do que a disponível para imagens estáticas.

Um objeto ImageCapture é construído com uma MediaStreamTrack como origem. A A API tem dois métodos de captura: takePhoto() e grabFrame(), além de maneiras de recuperar os recursos e configurações da câmera e alterar essas configurações.

Construção

A API Image Capture recebe acesso a uma câmera por um MediaStreamTrack obtido de getUserMedia():

navigator.mediaDevices.getUserMedia({video: true})
    .then(gotMedia)
    .catch(error => console.error('getUserMedia() error:', error));

function gotMedia(mediaStream) {
    const mediaStreamTrack = mediaStream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(mediaStreamTrack);
    console.log(imageCapture);
}

Teste esse código no console do DevTools.

Capturar

A captura pode ser feita de duas maneiras: frame completo e snapshot rápido. takePhoto() retorna um Blob, o resultado de uma única exposição fotográfica, que podem ser baixados, armazenados pelo navegador ou exibidos em um <img> . Esse método usa a resolução de câmera fotográfica mais alta disponível. Exemplo:

const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('takePhoto() error:', error));

grabFrame() retorna um objeto ImageBitmap, um snapshot do vídeo ao vivo, que poderia, por exemplo, ser desenhada em uma <canvas> e, em seguida, pós-processados para alterar seletivamente os valores de cor. Observe que a ImageBitmap terá apenas as a resolução da fonte de vídeo, que costuma ser menor do que a câmera recursos de imagem estática. Exemplo:

const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
    .then(imageBitmap => {
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    })
    .catch(error => console.error('grabFrame() error:', error));

Recursos e configurações

Existem várias formas de manipular as configurações de captura, dependendo se as mudanças seriam refletidas no MediaStreamTrack ou só podem ser visto depois de takePhoto(). Por exemplo, uma mudança no nível do zoom é feita propagada para o MediaStreamTrack, enquanto a redução de olhos vermelhos, quando definida, é aplicado somente quando a foto está sendo tirada.

"Ativo" os recursos e as configurações da câmera são manipulados pela visualização MediaStreamTrack: MediaStreamTrack.getCapabilities() retorna um MediaTrackCapabilities com as capacidades concretas suportadas e os intervalos ou intervalos valores, por exemplo, ao intervalo de zoom ou aos modos de balanço de branco permitidos. Fazendo a correspondência, MediaStreamTrack.getSettings() retorna uma MediaTrackSettings com as configurações atuais concretas. Os modos de zoom, brilho e lanterna pertencem ao essa categoria, por exemplo:

var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
    zoomSlider.min = capabilities.zoom.min;
    zoomSlider.max = capabilities.zoom.max;
    zoomSlider.step = capabilities.zoom.step;
    zoomSlider.value = settings.zoom;
}

"Não ao vivo" os recursos e as configurações da câmera são manipulados pela Objeto ImageCapture: ImageCapture.getPhotoCapabilities() retorna um PhotoCapabilities que fornece acesso aos eventos "Não ativos" os recursos de câmera disponíveis. A partir do Chrome 61, ImageCapture.getPhotoSettings() retorna um PhotoSettings com as configurações atuais concretas. A resolução da foto, olhos vermelhos o modo de redução e de flash (exceto lanterna) pertencem a esta seção, por exemplo:

var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
    .then(function(photoCapabilities) {
    widthSlider.min = photoCapabilities.imageWidth.min;
    widthSlider.max = photoCapabilities.imageWidth.max;
    widthSlider.step = photoCapabilities.imageWidth.step;
    return imageCapture.getPhotoSettings();
    })
    .then(function(photoSettings) {
    widthSlider.value = photoSettings.imageWidth;
    })
    .catch(error => console.error('Error getting camera capabilities and settings:', error));

Configurando

"Ativo" as configurações da câmera podem ser definidas por meio da visualização applyConstraints() de MediaStreamTrack restrições , por exemplo:

var zoomSlider = document.querySelector('input[type=range]');

mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
    .catch(error => console.error('Uh, oh, applyConstraints() error:', error));

"Não ao vivo" as configurações da câmera sejam definidas com o atributo opcional takePhoto() PhotoSettings dicionário, por exemplo:

var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('Uh, oh, takePhoto() error:', error));

Recursos da câmera

Se você executar o código acima, notará uma diferença nas dimensões entre as grabFrame() e takePhoto() resultados.

O método takePhoto() dá acesso à resolução máxima da câmera.

O grabFrame() leva apenas o próximo VideoFrame disponível na MediaStreamTrack no processo do renderizador, enquanto takePhoto() interrompe o MediaStream. reconfigura a câmera, tira a foto (geralmente em formato compactado, daí o Blob) e, em seguida, retoma a MediaStreamTrack. Basicamente, isso significa que takePhoto() ofereça acesso à resolução total da imagem estática recursos da câmera. Antes, só era possível "tirar uma foto" de chamar drawImage() em um elemento canvas usando um vídeo como origem (de acordo com o aqui).

Mais informações podem ser encontradas na seção README.md.

Nesta demonstração, as dimensões <canvas> são definidas para a resolução do vídeo. stream, enquanto o tamanho natural de <img> é a imagem estática máxima e a resolução da câmera. O CSS é usado para definir a exibição o tamanho de ambos.

Você pode obter e configurar toda a gama de resoluções de câmera disponíveis para imagens estáticas usando os valores MediaSettingsRange para PhotoCapabilities.imageHeight e imageWidth As restrições de largura e altura mínimas e máximas getUserMedia() são para vídeo, que, conforme discutido, podem ser diferentes do recursos da câmera para imagens estáticas. Em outras palavras, talvez você não consiga acessar todos os recursos de resolução máxima do seu dispositivo ao salvar getUserMedia() a uma tela. A demonstração de restrição de resolução do WebRTC mostra como definir restrições getUserMedia() para resolução.

Mais alguma coisa?

Demonstrações e exemplos de código

Suporte

  • Chrome 59 no Android e em computadores.
  • Chrome Canary para Android e computadores anteriores à 59a versão com Recursos experimentais da Plataforma Web da Web ativados.

Saiba mais