L'API Shape Detection rileva volti, codici a barre e testo nelle immagini.
Che cos'è l'API Shape Detection?
Con API come navigator.mediaDevices.getUserMedia
e il selettore di foto
di Chrome per Android,
è diventato piuttosto semplice acquisire immagini o dati video in diretta dalle fotocamere dei dispositivi o caricare immagini locali. Finora, questi dati delle immagini dinamiche, così come le immagini statiche di una pagina, non sono stati accessibili tramite codice, anche se le immagini possono contenere molte funzionalità interessanti, come volti, codici a barre e testo.
Ad esempio, in passato, se gli sviluppatori volevano estrarre queste funzionalità sul
client per creare un lettore di codici QR, dovevano
fare affidamento su librerie JavaScript esterne. Questo potrebbe essere costoso dal punto di vista delle prestazioni e aumentare il peso complessivo della pagina. D'altra parte, i sistemi operativi, tra cui Android, iOS e macOS, ma anche i chip hardware presenti nei moduli della fotocamera, in genere dispongono già di rilevatori di funzionalità performanti e altamente ottimizzati, come FaceDetector
di Android o CIDetector
il rilevatore di funzionalità generico di iOS.
L'API Shape Detection espone queste implementazioni tramite
un insieme di interfacce JavaScript. Al momento, le funzionalità supportate sono il rilevamento dei volti tramite l'interfaccia FaceDetector
, il rilevamento dei codici a barre tramite l'interfaccia BarcodeDetector
e il rilevamento del testo (riconoscimento ottico dei caratteri, OCR) tramite l'interfaccia TextDetector
.
Casi d'uso suggeriti
Come descritto in precedenza, l'API Shape Detection attualmente supporta il rilevamento di volti, codici a barre e testo. Il seguente elenco puntato contiene esempi di casi d'uso per tutte e tre le funzionalità.
Rilevamento facciale
- I siti di social networking o di condivisione di foto online consentono comunemente ai propri utenti di taggare le persone nelle immagini. Questa attività può essere facilitata evidenziando i confini dei volti rilevati.
- I siti di contenuti possono ritagliare dinamicamente le immagini in base ai volti potenzialmente rilevati anziché affidarsi ad altre euristiche oppure evidenziare i volti rilevati con effetti di panoramica e zoom simili a quelli di Ken Burns nei formati simili alle storie.
- I siti di messaggistica multimediale possono consentire ai propri utenti di sovrapporre oggetti divertenti come occhiali da sole o baffi sui punti di riferimento del volto rilevati.
Rilevamento dei codici a barre
- Le applicazioni web che leggono i codici QR possono sbloccare casi d'uso interessanti come pagamenti online o navigazione web oppure utilizzare i codici a barre per stabilire connessioni social sulle applicazioni di messaggistica.
- Le app di shopping possono consentire ai propri utenti di scansionare i codici a barre EAN o UPC degli articoli in un negozio fisico per confrontare i prezzi online.
- Gli aeroporti possono fornire chioschi web in cui i passeggeri possono scansionare i codici Aztec delle loro carte di imbarco per visualizzare informazioni personalizzate relative ai loro voli.
Rilevamento testo
- I siti di social networking online possono migliorare l'accessibilità dei contenuti delle immagini generate dagli utenti aggiungendo i testi rilevati come attributi
alt
per i tag<img>
quando non vengono fornite altre descrizioni. - I siti di contenuti possono utilizzare il rilevamento del testo per evitare di posizionare i titoli sopra le immagini hero con testo contenuto.
- Le applicazioni web possono utilizzare il rilevamento del testo per tradurre testi come, ad esempio, i menu dei ristoranti.
Stato attuale
Passaggio | Stato |
---|---|
1. Creare una spiegazione | Completato |
2. Crea la bozza iniziale delle specifiche | Completato |
3. Raccogli feedback e itera il design | In progress |
4. Prova dell'origine | Completato |
5. Avvia | Rilevamento dei codici a barre completato |
Rilevamento facciale In corso | |
Rilevamento testo In corso |
Come utilizzare l'API Shape Detection
Se vuoi sperimentare con l'API Shape Detection in locale,
attiva il flag #enable-experimental-web-platform-features
in about://flags
.
Le interfacce di tutti e tre i rilevatori, FaceDetector
, BarcodeDetector
e TextDetector
, sono simili. Tutti forniscono un singolo metodo asincrono
chiamato detect()
che accetta un
ImageBitmapSource
come input (ovvero un
CanvasImageSource
, un
Blob
o
ImageData
).
Per FaceDetector
e BarcodeDetector
, è possibile passare parametri facoltativi
al costruttore del rilevatore che consentono di fornire suggerimenti ai
rilevatori sottostanti.
Consulta attentamente la matrice di supporto nella spiegazione per una panoramica delle diverse piattaforme.
Lavorare con BarcodeDetector
BarcodeDetector
restituisce i valori non elaborati dei codici a barre trovati in
ImageBitmapSource
e i rettangoli di selezione, nonché altre informazioni come
i formati dei codici a barre rilevati.
const barcodeDetector = new BarcodeDetector({
// (Optional) A series of barcode formats to search for.
// Not all formats may be supported on all platforms
formats: [
'aztec',
'code_128',
'code_39',
'code_93',
'codabar',
'data_matrix',
'ean_13',
'ean_8',
'itf',
'pdf417',
'qr_code',
'upc_a',
'upc_e'
]
});
try {
const barcodes = await barcodeDetector.detect(image);
barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
console.error('Barcode detection failed:', e);
}
Lavorare con FaceDetector
FaceDetector
restituisce sempre i riquadri di selezione dei volti rilevati in
ImageBitmapSource
. A seconda della piattaforma, potrebbero essere disponibili ulteriori informazioni
sui punti di riferimento del viso come occhi, naso o bocca.
È importante notare che questa API rileva solo i volti.
Non identifica a chi appartiene un volto.
const faceDetector = new FaceDetector({
// (Optional) Hint to try and limit the amount of detected faces
// on the scene to this maximum number.
maxDetectedFaces: 5,
// (Optional) Hint to try and prioritize speed over accuracy
// by, e.g., operating on a reduced scale or looking for large features.
fastMode: false
});
try {
const faces = await faceDetector.detect(image);
faces.forEach(face => drawMustache(face));
} catch (e) {
console.error('Face detection failed:', e);
}
Lavorare con TextDetector
TextDetector
restituisce sempre i rettangoli di selezione dei testi rilevati
e, su alcune piattaforme, i caratteri riconosciuti.
const textDetector = new TextDetector();
try {
const texts = await textDetector.detect(image);
texts.forEach(text => textToSpeech(text));
} catch (e) {
console.error('Text detection failed:', e);
}
Rilevamento delle funzionalità
La semplice verifica dell'esistenza dei costruttori per il rilevamento delle funzionalità dell'API Shape Detection non è sufficiente. La presenza di un'interfaccia non indica se la piattaforma sottostante supporta la funzionalità. Questo comportamento è intenzionale. Per questo motivo, ti consigliamo un approccio di programmazione difensiva eseguendo il rilevamento delle funzionalità in questo modo:
const supported = await (async () => 'FaceDetector' in window &&
await new FaceDetector().detect(document.createElement('canvas'))
.then(_ => true)
.catch(e => e.name === 'NotSupportedError' ? false : true))();
L'interfaccia BarcodeDetector
è stata aggiornata per includere un metodo getSupportedFormats()
e sono state proposte interfacce simili
per FaceDetector
e
per TextDetector
.
await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
[
"aztec",
"code_128",
"code_39",
"code_93",
"data_matrix",
"ean_13",
"ean_8",
"itf",
"pdf417",
"qr_code",
"upc_e"
]
*/
In questo modo puoi rilevare la funzionalità specifica di cui hai bisogno, ad esempio la scansione del codice QR:
if (('BarcodeDetector' in window) &&
((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
console.log('QR code scanning is supported.');
}
È meglio nascondere le interfacce perché anche tra le piattaforme le funzionalità possono variare e quindi gli sviluppatori devono essere incoraggiati a verificare con precisione la funzionalità (ad esempio un particolare formato di codice a barre o punto di riferimento facciale) di cui hanno bisogno.
Supporto del sistema operativo
Il rilevamento dei codici a barre è disponibile su macOS, ChromeOS e Android. Google Play Services sono necessari su Android.
Best practice
Tutti i rilevatori funzionano in modo asincrono, ovvero non bloccano il thread principale. Pertanto, non fare affidamento sul rilevamento in tempo reale, ma lascia un po' di tempo al rilevatore per fare il suo lavoro.
Se sei un fan dei
Web Worker,
sarai felice di sapere che anche i rilevatori sono esposti lì.
I risultati del rilevamento sono serializzabili e possono quindi essere passati dal worker
all'app principale tramite postMessage()
. La demo mostra questo in azione.
Non tutte le implementazioni della piattaforma supportano tutte le funzionalità, quindi assicurati di controllare attentamente la situazione del supporto e utilizza l'API come miglioramento progressivo. Ad esempio, alcune piattaforme potrebbero supportare il rilevamento dei volti in sé, ma non il rilevamento dei punti di riferimento del volto (occhi, naso, bocca e così via); oppure potrebbero essere riconosciuti l'esistenza e la posizione del testo, ma non i contenuti del testo.
Feedback
Il team di Chrome e la community degli standard web vogliono conoscere le tue esperienze con l'API Shape Detection.
Descrivi la progettazione dell'API
C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà che ti servono per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza?
- Segnala un problema relativo alle specifiche nel repository GitHub dell'API Shape Detection o aggiungi i tuoi commenti a un problema esistente.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome? O l'implementazione è diversa dalla specifica?
- Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e imposta Componenti su
Blink>ImageCapture
.
Hai intenzione di utilizzare l'API?
Hai intenzione di utilizzare l'API Shape Detection sul tuo sito? Il tuo supporto pubblico ci aiuta a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.
- Condividi il modo in cui prevedi di utilizzarlo nel thread di discussione WICG.
- Invia un tweet a @ChromiumDev utilizzando l'hashtag
#ShapeDetection
e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione pubblica
- API Demo | Origine di API Demo
- Bug di monitoraggio
- Voce di ChromeStatus.com
- Componente Blink:
Blink>ImageCapture