L'API Shape Detection: un'immagine vale più di mille parole, volti e codici a barre

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?

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.

Link utili