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 Chrome per Android
selettore di foto,
è diventato piuttosto facile acquisire immagini o dati video in diretta dal dispositivo
fotocamere o caricare immagini locali. Finora, questi dati di immagini dinamiche, così come
statiche su una pagina, non sono accessibili tramite il codice, anche se
le immagini possono contenere molte caratteristiche interessanti, come volti,
codici a barre e testo.
Ad esempio, in passato, se gli sviluppatori volessero estrarre queste caratteristiche nella
di creare un lettore di codice QR, doveva
fare affidamento su librerie JavaScript esterne. Questo potrebbe essere costoso
del rendimento e aumentare il peso complessivo della pagina. Dall'altra parte
sistemi operativi come Android, iOS e macOS, ma anche hardware
presenti nei moduli della fotocamera, in genere hanno già prestazioni
di funzionalità ottimizzate come Android
FaceDetector
o il rilevatore di funzionalità generiche per iOS,
CIDetector
.
L'API Shape Detection espone queste implementazioni tramite
un insieme di interfacce JavaScript. Al momento, le funzionalità supportate sono volti
rilevamento tramite l'interfaccia FaceDetector
, rilevamento del codice a barre tramite
interfaccia BarcodeDetector
e rilevamento del testo (carattere ottico
di riconoscimento, (OCR)) attraverso l'interfaccia di TextDetector
.
Casi d'uso suggeriti
Come spiegato 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 social network o i siti di condivisione di foto online consentono solitamente agli utenti annotare persone nelle immagini. Evidenziando i confini dei volti rilevati, questa attività può essere agevolata.
- I siti di contenuti possono ritagliare dinamicamente le immagini in base ai potenziali rilevamenti volti invece di affidarsi ad altre euristiche o evidenziare i volti rilevati con elementi simili a Ken Burns effetti di panoramica e zoom in formati simili a una storia.
- I siti di messaggistica multimediale consentono agli utenti di sovrapporre oggetti divertenti come occhiali da sole o baffi sui punti di riferimento rilevati per i volti.
Rilevamento dei codici a barre
- Le applicazioni web che leggono i codici QR possono creare casi d'uso interessanti come pagamenti online o navigazione sul web, oppure utilizzare i codici a barre per definire e connessioni su applicazioni di messaggistica.
- Le app di Shopping possono consentire agli utenti di scansionare EAN o Codici a barre UPC di articoli in un negozio fisico per confrontare i prezzi online.
- Gli aeroporti possono fornire chioschi web dove i passeggeri possono controllare l'imbarco tessere codici aztechi da mostrare informazioni personalizzate relative ai voli.
Rilevamento testo
- I siti di social network online possono migliorare l'accessibilità
contenuti di immagini generati 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 le intestazioni sopra 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. Crea messaggio esplicativo | Completato |
2. Crea la bozza iniziale delle specifiche | Completato |
3. Raccogli feedback e eseguire l'iterazione del design | In progress |
4. Prova dell'origine | Completato |
5. lancio | Rilevamento codice a barre Completato |
Rilevamento facciale in corso | |
Rilevamento del testo in corso |
Come utilizzare l'API Shape Detection
Se vuoi sperimentare l'API Shape Detection in locale,
attiva #enable-experimental-web-platform-features
in about://flags
.
Le interfacce di tutti e tre i rilevatori, FaceDetector
, BarcodeDetector
e
TextDetector
sono simili. Offrono tutti un singolo metodo asincrono
chiamato detect()
che prende un
ImageBitmapSource
come input (ovvero
CanvasImageSource
, un
Blob
oppure
ImageData
).
Per FaceDetector
e BarcodeDetector
, è possibile passare i parametri facoltativi
al costruttore del rilevatore che consentono di fornire suggerimenti
i rilevatori sottostanti.
Controlla attentamente la matrice di supporto nel explainer di delle varie piattaforme.
Lavorare con BarcodeDetector
L'istruzione BarcodeDetector
restituisce i valori non elaborati del codice a barre che trova
ImageBitmapSource
e i riquadri di delimitazione, 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
L'elemento FaceDetector
restituisce sempre i riquadri di delimitazione dei volti che rileva
ImageBitmapSource
. In base alla piattaforma, puoi trovare ulteriori informazioni
per i punti di riferimento dei volti, come occhi, naso o bocca.
È importante tenere presente che questa API rileva solo i volti.
ma 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 riquadri di delimitazione 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 caratteristiche
Un semplice controllo dell'esistenza dei costruttori per rilevare le caratteristiche L'API Shape Detection non è sufficiente. La presenza di un'interfaccia non indica se la piattaforma sottostante supporta la funzionalità. Questa operazione funziona come previsto. Per questo consigliamo un approccio di programmazione difensiva mediante il rilevamento delle funzionalità nel seguente 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 di BarcodeDetector
è stata aggiornata per includere un metodo getSupportedFormats()
e interfacce simili sono stati proposti
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 che nascondere le interfacce perché anche su più piattaforme, le funzionalità possono variare pertanto gli sviluppatori dovrebbero essere incoraggiati a verificare con precisione la capacità (ad esempio un particolare formato di codice a barre o punto di riferimento facciale) che richiedono.
Supporto dei sistemi operativi
Il rilevamento dei codici a barre è disponibile su macOS, ChromeOS e Android. Google Play Services sono richieste su Android.
Best practice
Tutti i rilevatori funzionano in modo asincrono, ovvero non bloccano la . Quindi non fare affidamento sul rilevamento in tempo reale, ma lascia che affinché il rilevatore svolga il proprio compito.
Se sei un fan di
Web worker,
ti farà piacere sapere che anche i rilevatori sono esposti in quel punto.
I risultati del rilevamento sono serializzabili e quindi possono essere passati dal worker
all'app principale tramite postMessage()
. La demo mostra questo esempio in azione.
Non tutte le implementazioni della piattaforma supportano tutte le funzionalità, quindi assicurati di controllare la situazione dell'assistenza con attenzione e utilizzare l'API come soluzione miglioramento. Ad esempio, alcune piattaforme potrebbero supportare il rilevamento dei volti di per sé, ma non rilevamento dei punti di riferimento del volto (occhi, naso, bocca e così via); o il possono 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 la tua esperienze con l'API Shape Detection.
Parlaci della progettazione dell'API
C'è qualcosa nell'API che non funziona come previsto? Oppure: mancano metodi o proprietà per l'implementazione ? Hai una domanda o un commento sul modello di sicurezza?
- Segnala un problema relativo alle specifiche sul repository GitHub dell'API Shape Detection o aggiungi le tue opinioni a un problema esistente.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione rispetto alle specifiche?
- Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere questi elementi
il maggior numero possibile di dettagli, semplici istruzioni per la riproduzione e
Componenti a
Blink>ImageCapture
. Glitch è la soluzione ideale per condividere riproduzioni in modo facile e veloce.
Hai intenzione di utilizzare l'API?
Vuoi utilizzare l'API Shape Detection sul tuo sito? Il tuo supporto pubblico ci aiuta a stabilire la priorità delle funzionalità e mostra ad altri fornitori di browser è fondamentale supportarli.
- Spiega come intendi utilizzarlo nel thread del discorso di WicG.
- Invia un tweet a @ChromiumDev utilizzando l'hashtag
#ShapeDetection
: e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione pubblica
- Demo dell'API | Origine demo API
- Monitoraggio del bug
- Voce ChromeStatus.com
- Componente lampeggiante:
Blink>ImageCapture