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.

Thomas Steiner

Che cos'è l'API Shape Detection?

Con API come navigator.mediaDevices.getUserMedia e il selettore di foto di Chrome per Android, è diventato abbastanza facile acquisire immagini o dati video in diretta dalle fotocamere dei dispositivi o caricare immagini locali. Finora, i dati delle immagini dinamiche, così come le immagini statiche su una pagina, non sono stati accessibili tramite codice, anche se le immagini potrebbero 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 codice QR, dovevano fare affidamento su librerie JavaScript esterne. Potrebbe essere costoso dal punto di vista delle prestazioni e aumentare il peso complessivo della pagina. D'altra parte, i sistemi operativi come Android, iOS e macOS, ma anche i chip hardware presenti nei moduli delle videocamere, in genere dispongono già di rilevatori di funzionalità altamente efficienti e dalle prestazioni elevate, come il rilevatore di funzionalità generico Android FaceDetector o iOS CIDetector.

L'API Shape Detection espone queste implementazioni tramite un set di interfacce JavaScript. Attualmente le funzionalità supportate sono il rilevamento dei volti tramite l'interfaccia di FaceDetector, il rilevamento dei codici a barre tramite l'interfaccia BarcodeDetector e il rilevamento del testo (riconoscimento ottico dei caratteri (OCR)) tramite l'interfaccia di TextDetector.

Casi d'uso suggeriti

Come spiegato in precedenza, l'API Shape Detection supporta attualmente 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 online o i siti di condivisione di foto consentono in genere ai loro utenti di annotare le persone nelle immagini. Evidenziando i confini dei volti rilevati, è possibile semplificare questa operazione.
  • I siti di contenuti possono ritagliare dinamicamente le immagini in base ai volti potenzialmente rilevati, anziché affidarsi ad altre euristiche, o evidenziare i volti rilevati con effetti di panoramica e zoom, come quelli di Ken Burns, in formati simili a quelli per le storie.
  • I siti di messaggistica multimediale possono consentire agli 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 i pagamenti online o la navigazione web, oppure utilizzare codici a barre per stabilire connessioni sociali sulle applicazioni di messaggistica.
  • Le app per lo shopping consentono agli utenti di scansionare i codici a barre EAN o UPC degli articoli di un negozio fisico per confrontare i prezzi online.
  • Gli aeroporti possono fornire chioschi web su cui i passeggeri possono scansionare i codici aztechi delle loro carte d'imbarco per mostrare informazioni personalizzate relative ai voli.

Rilevamento testo

  • I siti di social network 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 intestazioni sopra immagini hero con testo.
  • Le applicazioni web possono usare il rilevamento del testo per tradurre testi, ad esempio menu di ristoranti.

Stato attuale

Passaggio Stato
1. Crea messaggio esplicativo Completato
2. Crea una bozza iniziale della specifica Completato
3. Raccogli feedback e ottimizza il design In progress
4. Prova dell'origine Completato
5. Avvia Rilevamento codice a barre Completato
Rilevamento dei volti in corso
Rilevamento del testo In corso

Come utilizzare l'API Shape Detection

Se vuoi fare esperimenti con l'API Shape Detection in locale, attiva il flag #enable-experimental-web-platform-features in about://flags.

Le interfacce dei tre rilevatori (FaceDetector, BarcodeDetector e TextDetector) sono simili. Forniscono tutte un unico metodo asincrono denominato detect() che utilizza ImageBitmapSource come input (ovvero CanvasImageSource, Blob o ImageData).

Per FaceDetector e BarcodeDetector, è possibile passare parametri facoltativi al costruttore del rilevatore che consentono di fornire suggerimenti ai rilevatori sottostanti.

Controlla attentamente la matrice di supporto nell'spiegazione per una panoramica delle diverse piattaforme.

Lavorare con BarcodeDetector

L'elemento BarcodeDetector restituisce i valori non elaborati dei codici a barre che trova nel ImageBitmapSource e nei riquadri di delimitazione, oltre ad 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 delimitazione dei volti che rileva in ImageBitmapSource. A seconda della piattaforma, potrebbero essere disponibili ulteriori informazioni relative ai punti di riferimento per i volti, come occhi, naso o bocca. È importante tenere presente 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 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 funzionalità

Non è sufficiente controllare semplicemente l'esistenza dei costruttori per rilevare l'API Shape Detection. La presenza di un'interfaccia non indica se la piattaforma sottostante supporta la funzionalità. Si tratta di come previsto. Per questo consigliamo un approccio di programmazione difensiva tramite il rilevamento delle funzionalità come questo:

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 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.');
}

Questo è meglio che nascondere le interfacce, perché anche le funzionalità possono variare da una piattaforma all'altra, pertanto gli sviluppatori dovrebbero essere incoraggiati a verificare con precisione la funzionalità (ad esempio un particolare formato di codice a barre o punto di riferimento) che richiedono.

Supporto del sistema operativo

Il rilevamento dei codici a barre è disponibile su macOS, ChromeOS e Android. Su Android è richiesto Google Play Services.

Best practice

Tutti i rilevatori funzionano in modo asincrono, ovvero non bloccano il thread principale. Quindi non devi fare affidamento sul rilevamento in tempo reale, ma lasciare trascorrere un po' di tempo al rilevatore.

Se sei un fan dei web worker, sarai felice di sapere che anche i rilevatori sono esposti al sito. I risultati del rilevamento sono serializzabili e possono quindi essere trasmessi dal worker all'app principale tramite postMessage(). La demo mostra questo comportamento.

Non tutte le implementazioni della piattaforma supportano tutte le funzionalità, perciò assicurati di verificare attentamente la situazione di assistenza 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 dei volti (occhi, naso, bocca e così via), oppure il rilevamento dell'esistenza e della posizione del testo, ma non i contenuti testuali.

Feedback

Il team di Chrome e la community degli standard web vogliono saperne di più sulle tue 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 realizzare la tua idea? Hai domande o commenti sul modello di sicurezza?

Problemi con l'implementazione?

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

  • Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, semplici istruzioni per la riproduzione e imposta Componenti su Blink>ImageCapture. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Prevedi 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 è fondamentale supportarle.

Link utili