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

L'API Rilevamento forme 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 tempo reale dalle fotocamere del dispositivo o caricare immagini locali. Finora, questi dati sulle immagini dinamiche, così come le immagini statiche su una pagina, non erano 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. Ciò potrebbe essere costoso dal punto di vista del rendimento 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 il rilevatore di funzionalità Android FaceDetector o il rilevatore di funzionalità generico di iOS, CIDetector.

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

Casi d'uso suggeriti

Come descritto sopra, l'API di rilevamento delle forme supporta attualmente il rilevamento di volti, codici a barre e testo. L'elenco puntato seguente 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 di solito agli utenti di annotare le persone nelle immagini. Questa operazione può essere semplificata evidenziando i confini dei volti rilevati.
  • I siti di contenuti possono ritagliare dinamicamente le immagini in base ai volti potenzialmente rilevati anziché fare affidamento su altre strategie di euristica oppure evidenziare i volti rilevati con effetti di panoramica e zoom simili a quelli di Ken Burns in formati simili alle storie.
  • I siti di messaggistica multimediale possono consentire agli utenti di sovrapporre oggetti divertenti come occhiali da sole o baffi ai punti di riferimento del viso 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 sociali su applicazioni di messaggistica.
  • Le app di shopping possono consentire agli 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 tessere di imbarco per visualizzare informazioni personalizzate relative ai loro voli.

Rilevamento testo

  • I siti di social network online possono migliorare l'accessibilità dei 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 le immagini hero con testo al loro interno.
  • 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 un'animazione esplicativa Completato
2. Creare una bozza iniziale della specifica Completato
3. Raccogli feedback e esegui l'iterazione sul design In progress
4. Prova dell'origine Completato
5. Avvia Rilevamento dei codici a barre Completato
Rilevamento dei volti In corso
Rilevamento testo in corso

Come utilizzare l'API Shape Detection

.

Se vuoi eseguire esperimenti con l'API di rilevamento delle forme localmente, 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. Forniscono tutti un singolo metodo asincrono chiamato detect() che accetta un ImageBitmapSource come input (ovvero un CanvasImageSource, un Blob o un ImageData).

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

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

Lavorare con BarcodeDetector

BarcodeDetector restituisce i valori non elaborati dei codici a barre trovati in ImageBitmapSource e nelle caselle delimitanti, 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 le caselle delimitanti dei volti rilevati nel ImageBitmapSource. A seconda della piattaforma, potrebbero essere disponibili ulteriori informazioni su elementi distintivi 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 le caselle delimitanti 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 di funzionalità

Il semplice controllo dell'esistenza dei costruttori per rilevare la funzionalità dell'API di rilevamento delle forme non è sufficiente. La presenza di un'interfaccia non indica se la piattaforma di base supporta la funzionalità. Questo comportamento funziona come previsto. Per questo motivo, consigliamo un approccio di programmazione difensiva mediante il rilevamento delle funzionalità come segue:

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 in modo da includere un metodo getSupportedFormats() e sono state proposte interfacce simili per FaceDetector e 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 di codici 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 tra le piattaforme le funzionalità possono variare e quindi gli sviluppatori dovrebbero essere incoraggiati a verificare con precisione la funzionalità (ad esempio un determinato formato di codice a barre o un 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 obbligatori 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 concedi un po' di tempo al rilevatore per svolgere il suo compito.

Se sei un fan dei worker web, ti farà piacere sapere che i rilevatori sono esposti anche lì. I risultati del rilevamento sono serializzabili e possono quindi essere trasmessi dal worker all'app principale tramite postMessage(). La demo mostra come funziona.

Non tutte le implementazioni della piattaforma supportano tutte le funzionalità, quindi assicurati di verificare attentamente la situazione di assistenza e di utilizzare l'API come miglioramento progressivo. Ad esempio, alcune piattaforme potrebbero supportare il rilevamento dei volti per sé, ma non il rilevamento dei punti di riferimento del viso (occhi, naso, bocca e così via); oppure l'esistenza e la posizione del testo potrebbero essere riconosciute, 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 di rilevamento delle forme.

Fornisci informazioni sul design dell'API

C'è qualcosa nell'API che non funziona come previsto? In alternativa, mancano metodi o proprietà per implementare la tua idea? 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 è 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. Glitch è ideale per condividere riproduzioni rapide e semplici.

Hai intenzione di utilizzare l'API?

Hai intenzione di utilizzare l'API di rilevamento delle forme sul tuo sito? Il tuo supporto pubblico ci aiuta a dare la priorità alle funzionalità e mostra agli altri fornitori di browser quanto è importante supportarle.

Link utili