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 immagini fisse e configurare le impostazioni hardware della fotocamera. Questa API è disponibile in Chrome 59 su Android e computer. Inoltre, abbiamo pubblicato una raccolta di polyfill di Image Capture.

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

Viene creato un oggetto ImageCapture con MediaStreamTrack come origine. L'API ha quindi due metodi di acquisizione, takePhoto() e grabFrame(), nonché due modi per recuperare le funzionalità e le impostazioni della fotocamera e per modificare queste 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 un Blob, il risultato di una singola esposizione fotografica, che può essere scaricato, archiviato dal browser o visualizzato in un elemento <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 potrebbe, ad esempio, essere tracciata su <canvas> e poi post-elaborata per modificare selettivamente i valori dei colori. Tieni presente che ImageBitmap avrà solo la risoluzione dell'origine video, che di solito è inferiore alle funzionalità dei fermi immagine della fotocamera. 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 che le modifiche vengano riportate in MediaStreamTrack o siano visibili solo dopo il giorno takePhoto(). Ad esempio, una modifica del livello di zoom viene immediatamente propagata al valore MediaStreamTrack, mentre la riduzione degli occhi rossi, se impostata, viene applicata solo quando viene scattata la foto.

Le funzionalità e le impostazioni della fotocamera "in diretta" vengono manipolate tramite l'anteprima MediaStreamTrack: MediaStreamTrack.getCapabilities() restituisce un dizionario MediaTrackCapabilities con le funzionalità supportate concrete e gli intervalli o i valori consentiti, ad esempio l'intervallo di zoom supportato o le modalità di bilanciamento del bianco consentite. Di conseguenza, MediaStreamTrack.getSettings() restituisce un MediaTrackSettings con le impostazioni attuali concrete. Zoom, luminosità e modalità torcia appartengono a questa 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;
}

Le funzionalità e le impostazioni della videocamera "Non in diretta" vengono manipolate tramite l'oggetto ImageCapture: ImageCapture.getPhotoCapabilities() restituisce un oggetto PhotoCapabilities che fornisce l'accesso alle funzionalità della fotocamera "Non in diretta" disponibili. Di conseguenza, a partire da Chrome 61, ImageCapture.getPhotoSettings() restituisce un oggetto PhotoSettings con le impostazioni attuali effettive. Risoluzione delle foto, riduzione degli occhi rossi e modalità flash (tranne la 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 in corso…

Le impostazioni della videocamera "In diretta" possono essere configurate tramite i vincoli applyConstraints() di MediaStreamTrack di anteprima, ad esempio:

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

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

Le impostazioni della videocamera "Non in diretta" vengono configurate con il dizionario facoltativo PhotoSettings di takePhoto(), 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 i risultati di grabFrame() e takePhoto().

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

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

Per ulteriori informazioni, consulta la sezione README.md.

In questa demo, le dimensioni <canvas> sono impostate sulla risoluzione dello stream video, mentre le dimensioni naturali di <img> corrispondono alla risoluzione massima delle immagini fisse della videocamera. Il CSS, ovviamente, viene utilizzato per impostare le dimensioni di visualizzazione 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() si riferiscono ai video, che (come discusso) potrebbero essere diversi dalle funzionalità della fotocamera per le immagini fisse. In altre parole, potresti non essere in grado di accedere alle funzionalità alla massima risoluzione del tuo dispositivo quando salvi da getUserMedia() a una tela. La demo dei vincoli di risoluzione di WebRTC mostra come impostare i vincoli getUserMedia() per la risoluzione.

Altro?

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

  • È possibile accedere al Flash della fotocamera (luce del dispositivo) tramite FillLightMode in PhotoCapabilities, ma la modalità Torcia (lampo costantemente acceso) è disponibile in 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ù