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 inviareImageBitmap
aFaceDetector
oBarcodeDetector
. Scopri di più sull'API nel post del blog di Paul Kinlan.È possibile accedere al Flash della fotocamera (luce del dispositivo) tramite
FillLightMode
inPhotoCapabilities
, ma la modalità Torcia (lampo costantemente acceso) è disponibile inMediaTrackCapabilities
.
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.