Scattare foto e controllare le impostazioni della fotocamera

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

Image Capture è un'API che consente di acquisire fermi immagine e configurare l'hardware della fotocamera impostazioni. Questa API è disponibile in Chrome 59 su Android e computer. Abbiamo anche ha pubblicato una libreria polyfill Image Capture.

L'API consente di controllare le funzionalità della fotocamera, ad esempio zoom, luminosità, contrasto, ISO e bilanciamento del bianco. Inoltre, l'acquisizione di immagini ti consente di accedere alla massima risoluzione di qualsiasi fotocamera o webcam disponibile sul dispositivo. Le precedenti tecniche per scattare foto sul Web utilizzavano le istantanee video, che hanno una risoluzione inferiore rispetto a quella disponibile per le immagini fisse.

Viene creato un oggetto ImageCapture con MediaStreamTrack come origine. La L'API ha quindi due metodi di acquisizione takePhoto() e grabFrame() e altri modi per recuperare le funzionalità e le impostazioni della videocamera e per modificarle impostazioni.

Edilizia

L'API Image Capture ottiene l'accesso a una fotocamera tramite un MediaStreamTrack ottenuto da 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);
}

Puoi provare questo codice dalla console DevTools.

Acquisisci

L'acquisizione può essere eseguita in due modi: frame intero e istantanea rapida. takePhoto() restituisce Blob, il risultato di una singola esposizione fotografica, che può essere scaricato, memorizzato dal browser o visualizzato in un <img> . Questo metodo utilizza la massima risoluzione disponibile per la fotocamera fotografica. Ad esempio:

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() restituisce un oggetto ImageBitmap, un'istantanea di un video in diretta, che potrebbero (ad esempio) essere tracciati su <canvas> e poi vengono post-elaborati modificare selettivamente i valori dei colori. Tieni presente che ImageBitmap avrà solo dell'origine video, che solitamente è inferiore a quella della videocamera di immagini statiche. Ad esempio:

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));

Funzionalità e impostazioni

Esistono diversi modi per modificare le impostazioni di acquisizione, a seconda se le modifiche vengono riflesse in MediaStreamTrack o possono essere visualizzato dopo il giorno takePhoto(). Ad esempio, una modifica al livello zoom viene immediatamente propagata al valore MediaStreamTrack mentre la riduzione degli occhi rossi, se impostata, è applicata solo quando la foto è stata scattata.

"Pubblicata" le funzionalità e le impostazioni della fotocamera vengono manipolate tramite l'anteprima MediaStreamTrack: MediaStreamTrack.getCapabilities() restituisce un MediaTrackCapabilities: con le capacità concrete supportate e gli intervalli o valori, ad esempio intervallo zoom supportato o modalità di bilanciamento del bianco consentite. Di conseguenza, MediaStreamTrack.getSettings() restituisce un MediaTrackSettings con le attuali impostazioni concrete. Zoom, luminosità e modalità torcia appartengono a categoria, ad esempio:

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;
}

"Non dal vivo" le funzionalità e le impostazioni della fotocamera vengono manipolate Oggetto ImageCapture: ImageCapture.getPhotoCapabilities() restituisce un PhotoCapabilities: che dà accesso a "Non-Live" funzionalità della fotocamera disponibili. Di conseguenza, a partire da Chrome 61, ImageCapture.getPhotoSettings() restituisce un PhotoSettings con le attuali impostazioni concrete. La risoluzione della foto, gli occhi rossi riduzione e modalità flash (ad eccezione della torcia) appartengono a questa sezione, ad esempio:

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));

Configurazione

"Pubblicata" le impostazioni della videocamera possono essere configurate tramite l'anteprima applyConstraints() di MediaStreamTrack vincoli , ad esempio:

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

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

"Non dal vivo" le impostazioni della videocamera sono configurate con l'opzione facoltativa di takePhoto() PhotoSettings dizionario, ad esempio:

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));

Funzionalità della fotocamera

Se esegui il codice riportato sopra, noterai una differenza nelle dimensioni tra Risultati per grabFrame() e takePhoto().

Il metodo takePhoto() consente di accedere alla risoluzione massima della videocamera.

grabFrame() prende solo il prossimo VideoFrame disponibile in MediaStreamTrack all'interno del processo del renderer, mentre takePhoto() interrompe MediaStream, riconfigura la fotocamera, scatta la foto (solitamente in un formato compresso, quindi Blob) e poi riattiva MediaStreamTrack. In sostanza, questo significa che takePhoto() dà accesso alla risoluzione massima dell'immagine statica funzionalità della fotocamera. In precedenza, era possibile "scattare una foto" solo di chiamando drawImage() su un elemento canvas, utilizzando un video come origine (in base un esempio qui).

Per ulteriori informazioni, consulta la sezione README.md.

In questa demo, le dimensioni <canvas> sono impostate sulla risoluzione del video stream, mentre le dimensioni naturali di <img> rappresentano il numero massimo di immagini fisse massima della fotocamera. Il CSS, ovviamente, è usato per impostare lo stato dimensione di entrambi.

È possibile ottenere e impostare l'intera gamma di risoluzioni della fotocamera disponibili per le immagini fisse utilizzando i valori MediaSettingsRange per PhotoCapabilities.imageHeight e imageWidth. Tieni presente che i vincoli di larghezza e altezza minima e massima per getUserMedia() sono per i video, che (come discusso) potrebbero essere diversi funzionalità della fotocamera per le immagini fisse. In altre parole, potresti non essere in grado accedi alle funzionalità di massima risoluzione del tuo dispositivo durante il salvataggio getUserMedia() a una tela. La demo del vincolo di risoluzione di WebRTC mostra come impostare vincoli getUserMedia() per la risoluzione.

Altro?

  • L'API Shape Detection funziona bene con Acquisizione di immagini: grabFrame() può essere chiamato ripetutamente per fornire ImageBitmap a FaceDetector o BarcodeDetector. Scopri di più sulle API tratto dal post del blog di Paul Kinlan.

  • È possibile accedere al Flash della fotocamera (luce del dispositivo) tramite FillLightMode PhotoCapabilities , ma la modalità Torcia (lampeggiante costantemente) è disponibile nella MediaTrackCapabilities

Demo ed esempi di codice

Assistenza

  • Chrome 59 su Android e computer.
  • Chrome Canary su Android e computer precedenti alla versione 59 con Funzionalità della piattaforma web sperimentale attivate.

Scopri di più