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 per acquisire immagini statiche e configurare le impostazioni hardware della fotocamera. Questa API è disponibile in Chrome 59 su Android e computer. Abbiamo anche pubblicato una libreria polyfill ImageCapture.

L'API consente di controllare le funzionalità della fotocamera, come zoom, luminosità, contrasto, ISO e bilanciamento del bianco. Il bello è che Image Capture ti consente di accedere alle funzionalità di risoluzione completa di qualsiasi fotocamera o webcam del dispositivo disponibile. Le tecniche precedenti per scattare foto sul web utilizzavano istantanee video, che hanno una risoluzione inferiore a quella disponibile per le immagini fisse.

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

Lavori in corso

L'API Image Capture accede 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 di DevTools.

Acquisisci

Puoi acquisire le foto in due modi: in formato pieno e con istantanea rapida. takePhoto() restituisce un Blob, il risultato di una singola esposizione fotografica, che può essere scaricato, memorizzato dal browser o visualizzato in un elemento <img>. Questo metodo utilizza la risoluzione più alta disponibile per le fotocamere. 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, uno snapshot del video in diretta, che potrebbe, ad esempio, essere disegnato su un <canvas> e poi sottoposto a post-elaborazione per modificare in modo selettivo i valori di colore. Tieni presente che ImageBitmap avrà solo la risoluzione della sorgente video, che in genere è inferiore alle funzionalità di acquisizione di immagini fisse della videocamera. 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 applicate in MediaStreamTrack o se possono essere visualizzate solo dopo takePhoto(). Ad esempio, una modifica del livello zoom viene immediatamente propagata al MediaStreamTrack, mentre la riduzione degli occhi rossi, se impostata, viene applicata solo durante lo scatto della foto.

Le funzionalità e le impostazioni della videocamera "Live" vengono gestite tramite l'anteprima MediaStreamTrack: MediaStreamTrack.getCapabilities() restituisce un MediaTrackCapabilities dizionario 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 correnti concrete. Lo zoom, la luminosità e la 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 fotocamera "Non in diretta" vengono gestite tramite l'oggetto ImageCapture: ImageCapture.getPhotoCapabilities() restituisce un PhotoCapabilities oggetto che fornisce l'accesso alle funzionalità della fotocamera disponibili "Non in diretta". Di conseguenza, a partire da Chrome 61, ImageCapture.getPhotoSettings() restituisce un PhotoSettings oggetto con le impostazioni correnti concrete. La risoluzione delle foto, la riduzione degli occhi rossi e la 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

Le impostazioni della videocamera "Live" possono essere configurate tramite i applyConstraints() vincoli MediaStreamTrack dell'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 grabFrame() e takePhoto().

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

grabFrame() prende semplicemente il VideoFrame successivo disponibile nel MediaStreamTrack all'interno del processo di rendering, mentre takePhoto() interrompe il MediaStream, riconfigura la fotocamera, scatta la foto (di solito in un formato compresso, da qui Blob) e poi riprende il MediaStreamTrack. In sostanza, questo significa che takePhoto() consente di accedere a tutte le funzionalità di risoluzione delle 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 del <canvas> sono impostate sulla risoluzione dello stream video, mentre le dimensioni naturali del <img> corrispondono alla risoluzione massima delle immagini fisse della fotocamera. Il CSS, ovviamente, viene utilizzato per impostare le dimensioni di visualizzazione di entrambi.

L'intera gamma di risoluzioni della fotocamera disponibili per le immagini fisse può essere ottenuta e impostata utilizzando i valori MediaSettingsRange per PhotoCapabilities.imageHeight e imageWidth. Tieni presente che le limitazioni minime e massime di larghezza e altezza per getUserMedia() si riferiscono ai video, che (come discusso) possono essere diverse dalle funzionalità della fotocamera per le immagini fisse. In altre parole, potresti non essere in grado di accedere alle funzionalità di risoluzione completa del tuo dispositivo quando salvi da getUserMedia() in una tela. La demo del vincolo di risoluzione di WebRTC mostra come impostare i vincoli getUserMedia() per la risoluzione.

Altro?

Demo ed esempi di codice

Assistenza

  • Chrome 59 su Android e computer.
  • Chrome Canary su Android e computer precedenti alla versione 59 con le funzionalità della piattaforma web sperimentale abilitate.

Scopri di più