De Shape Detection API: een foto zegt meer dan duizend woorden, gezichten en streepjescodes

De Shape Detection API detecteert gezichten, streepjescodes en tekst in afbeeldingen.

Thomas Steiner

Wat is de vormdetectie-API?

Met API's zoals navigator.mediaDevices.getUserMedia en de Chrome voor Android- fotokiezer is het vrij eenvoudig geworden om afbeeldingen of live videogegevens van apparaatcamera's vast te leggen, of om lokale afbeeldingen te uploaden. Tot nu toe zijn deze dynamische afbeeldingsgegevens, evenals statische afbeeldingen op een pagina, niet toegankelijk via code, ook al kunnen afbeeldingen in werkelijkheid veel interessante kenmerken bevatten, zoals gezichten, streepjescodes en tekst.

Als ontwikkelaars in het verleden dergelijke functies op de client wilden extraheren om een ​​QR-codelezer te bouwen, moesten ze in het verleden vertrouwen op externe JavaScript-bibliotheken. Dit kan vanuit prestatieoogpunt duur zijn en het totale paginagewicht vergroten. Aan de andere kant beschikken besturingssystemen, waaronder Android, iOS en macOS, maar ook hardwarechips die in cameramodules worden aangetroffen, doorgaans al over krachtige en sterk geoptimaliseerde functiedetectoren, zoals de Android FaceDetector of de generieke iOS-functiedetector, CIDetector .

De Shape Detection API maakt deze implementaties zichtbaar via een reeks JavaScript-interfaces. Momenteel zijn de ondersteunde functies gezichtsdetectie via de FaceDetector interface, streepjescodedetectie via de BarcodeDetector interface en tekstdetectie (Optical Character Recognition (OCR)) via de TextDetector interface.

Voorgestelde gebruiksscenario's

Zoals hierboven beschreven ondersteunt de Shape Detection API momenteel de detectie van gezichten, streepjescodes en tekst. De volgende opsomming bevat voorbeelden van gebruiksscenario's voor alle drie de functies.

Gezichtsdetectie

  • Online sociale netwerksites of sites voor het delen van foto's laten hun gebruikers gewoonlijk mensen in afbeeldingen annoteren. Door de grenzen van gedetecteerde gezichten te markeren, kan deze taak worden vergemakkelijkt.
  • Inhoudssites kunnen afbeeldingen dynamisch bijsnijden op basis van potentieel gedetecteerde gezichten in plaats van te vertrouwen op andere heuristieken, of gedetecteerde gezichten markeren met Ken Burns -achtige pan- en zoomeffecten in verhaalachtige formaten.
  • Multimediaberichtensites kunnen hun gebruikers toestaan ​​grappige voorwerpen zoals zonnebrillen of snorren over gedetecteerde gezichtsherkenningspunten te leggen.

Detectie van streepjescodes

  • Webapplicaties die QR-codes lezen, kunnen interessante gebruiksscenario's ontsluiten, zoals online betalingen of webnavigatie, of streepjescodes gebruiken om sociale verbindingen tot stand te brengen in messenger-applicaties.
  • Met Shopping-apps kunnen hun gebruikers EAN- of UPC- barcodes van artikelen in een fysieke winkel scannen om online prijzen te vergelijken.
  • Luchthavens kunnen webkiosken aanbieden waar passagiers de Azteekse codes van hun instapkaarten kunnen scannen om gepersonaliseerde informatie over hun vluchten weer te geven.

Tekstdetectie

  • Online sociale netwerksites kunnen de toegankelijkheid van door gebruikers gegenereerde beeldinhoud verbeteren door gedetecteerde teksten toe te voegen als alt attributen voor <img> -tags wanneer er geen andere beschrijvingen worden gegeven.
  • Inhoudssites kunnen tekstdetectie gebruiken om te voorkomen dat er koppen bovenop hero-afbeeldingen met ingesloten tekst worden geplaatst.
  • Webapplicaties kunnen tekstdetectie gebruiken om teksten zoals bijvoorbeeld restaurantmenu's te vertalen.

Huidige status

Stap Status
1. Maak een uitleg Compleet
2. Maak een eerste ontwerp van specificatie Compleet
3. Verzamel feedback en herhaal het ontwerp In uitvoering
4. Oorsprongsproces Compleet
5. Lancering Barcodedetectie voltooid
Gezichtsdetectie wordt uitgevoerd
Tekstdetectie wordt uitgevoerd

Hoe u de vormdetectie-API gebruikt

Als u lokaal met de Shape Detection API wilt experimenteren, schakelt u de vlag #enable-experimental-web-platform-features in about://flags .

De interfaces van alle drie de detectoren, FaceDetector , BarcodeDetector en TextDetector , zijn vergelijkbaar. Ze bieden allemaal één asynchrone methode met de naam detect() die een ImageBitmapSource als invoer gebruikt (dat wil zeggen een CanvasImageSource , een Blob of ImageData ).

Voor FaceDetector en BarcodeDetector kunnen optionele parameters worden doorgegeven aan de constructor van de detector, waardoor hints kunnen worden gegeven aan de onderliggende detectoren.

Controleer zorgvuldig de ondersteuningsmatrix in de uitleg voor een overzicht van de verschillende platforms.

Werken met de BarcodeDetector

De BarcodeDetector retourneert de onbewerkte streepjescodewaarden die worden gevonden in de ImageBitmapSource en de selectiekaders, evenals andere informatie zoals de indelingen van de gedetecteerde streepjescodes.

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

Werken met de FaceDetector

De FaceDetector retourneert altijd de selectiekaders van gezichten die worden gedetecteerd in ImageBitmapSource . Afhankelijk van het platform is er mogelijk meer informatie beschikbaar over gezichtsherkenningspunten zoals ogen, neus of mond. Het is belangrijk op te merken dat deze API alleen gezichten detecteert. Het identificeert niet van wie een gezicht is.

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

Werken met de TextDetector

De TextDetector retourneert altijd de selectiekaders van de gedetecteerde teksten, en op sommige platforms de herkende tekens.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Functiedetectie

Het puur controleren op het bestaan ​​van de constructors om de Shape Detection API te detecteren, is niet voldoende. De aanwezigheid van een interface vertelt u niet of het onderliggende platform de functie ondersteunt. Dit werkt zoals bedoeld . Daarom raden we een defensieve programmeeraanpak aan door functiedetectie als volgt uit te voeren:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

De BarcodeDetector -interface is bijgewerkt met een getSupportedFormats() -methode en soortgelijke interfaces zijn voorgesteld voor FaceDetector en 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"
  ]
*/

Hiermee kunt u de specifieke functie detecteren die u nodig heeft, bijvoorbeeld het scannen van QR-codes:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Dit is beter dan het verbergen van de interfaces, omdat zelfs tussen platforms de mogelijkheden kunnen variëren en daarom moeten ontwikkelaars worden aangemoedigd om te controleren op de precieze mogelijkheden (zoals een bepaald streepjescodeformaat of gezichtsherkenningspunt) die ze nodig hebben.

Ondersteuning van besturingssystemen

Streepjescodedetectie is beschikbaar op macOS, ChromeOS en Android. Google Play-services zijn vereist op Android.

Beste praktijken

Alle detectoren werken asynchroon, dat wil zeggen dat ze de hoofddraad niet blokkeren. Vertrouw dus niet op realtime detectie, maar geef de detector de tijd om zijn werk te doen.

Als je een fan bent van Web Workers , zul je blij zijn te weten dat daar ook detectoren zichtbaar zijn. Detectieresultaten zijn serialiseerbaar en kunnen dus via postMessage() van de werker naar de hoofdapp worden doorgegeven. De demo laat dit in actie zien.

Niet alle platformimplementaties ondersteunen alle functies, dus zorg ervoor dat u de ondersteuningssituatie zorgvuldig controleert en de API gebruikt als een progressieve verbetering. Sommige platforms ondersteunen bijvoorbeeld mogelijk gezichtsdetectie op zichzelf, maar geen gezichtsherkenningsdetectie (ogen, neus, mond, enz.); of het bestaan ​​en de locatie van tekst kan worden herkend, maar de tekstinhoud niet.

Feedback

Het Chrome-team en de webstandaardengemeenschap willen graag horen over uw ervaringen met de Shape Detection API.

Vertel ons over het API-ontwerp

Is er iets aan de API dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heeft u een vraag of opmerking over het beveiligingsmodel?

Probleem met de implementatie?

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties?

  • Dien een bug in op https://new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige reproductie-instructies opneemt, en stel Componenten in op Blink>ImageCapture . Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Bent u van plan de API te gebruiken?

Bent u van plan de Shape Detection API op uw site te gebruiken? Uw publieke steun helpt ons prioriteit te geven aan functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Handige links