Interfejs Character Detection API: obraz wart jest tysiąc słów, twarzy i kodów kreskowych

Interfejs Shape Detection API wykrywa twarze, kody kreskowe i tekst na obrazach.

Thomas Steiner

Czym jest interfejs Shape Detection API?

Dzięki interfejsom API, takim jak navigator.mediaDevices.getUserMedia i selektor zdjęć w Chrome na Androida, dość łatwo jest rejestrować obrazy lub dane wideo na żywo z aparatów urządzenia albo przesyłać lokalne obrazy. Do tej pory dane obrazów dynamicznych – podobnie jak obrazy statyczne na stronie – nie były dostępne w kodzie, mimo że obrazy mogą zawierać wiele interesujących elementów, takich jak twarze, kody kreskowe i tekst.

Na przykład w przeszłości, jeśli deweloperzy chcieli wyodrębnić takie funkcje na kliencie, aby utworzyć czytnik kodów QR, musieli korzystać z zewnętrznych bibliotek JavaScript. Może to być kosztowne z punktu widzenia wydajności i zwiększyć ogólną wagę strony. Z drugiej strony systemy operacyjne, takie jak Android, iOS i macOS, a także chipy sprzętowe w modułach aparatu, zwykle mają już wydajne i wysoce zoptymalizowane detektory funkcji, takie jak detektor funkcji ogólnych AndroidaFaceDetector lub detektor funkcji ogólnych iOSCIDetector.

Shape Detection API udostępnia te implementacje za pomocą zestawu interfejsów JavaScript. Obecnie obsługiwane funkcje to wykrywanie twarzy za pomocą interfejsu FaceDetector, wykrywanie kodów kreskowych za pomocą interfejsu BarcodeDetector oraz wykrywanie tekstu (optyczne rozpoznawanie znaków, OCR) za pomocą interfejsu TextDetector.

Sugerowane przypadki użycia

Jak wspomnieliśmy powyżej, interfejs Shape Detection API obsługuje obecnie wykrywanie twarzy, kodów kreskowych i tekstu. Poniżej znajdziesz przykłady zastosowań wszystkich 3 funkcji.

Wykrywanie twarzy

  • Serwisy społecznościowe i strony do udostępniania zdjęć często umożliwiają użytkownikom oznaczanie osób na zdjęciach. Możesz to ułatwić, wyróżniając granice wykrytych twarzy.
  • Witryny z treściami mogą dynamicznie przycinać obrazy na podstawie potencjalnie wykrytych twarzy, zamiast polegać na innych heurystykach, lub wyróżniać wykryte twarze za pomocą efektów panoramowania i powiększania podobnych do efektu Kena Burnsa w formatach przypominających historie.
  • Witryny do obsługi wiadomości multimedialnych mogą umożliwiać użytkownikom nakładanie zabawnych obiektów, takich jak okulary przeciwsłoneczne lub wąsy, na wykryte punkty charakterystyczne twarzy.

Wykrywanie kodów kreskowych

  • Aplikacje internetowe, które odczytują kody QR, mogą odblokowywać ciekawe przypadki użycia, takie jak płatności online czy nawigacja w internecie, lub używać kodów kreskowych do nawiązywania kontaktów społecznościowych w aplikacjach do przesyłania wiadomości.
  • Aplikacje zakupowe mogą umożliwiać użytkownikom skanowanie kodów kreskowych EAN lub UPC produktów w sklepie stacjonarnym w celu porównania cen online.
  • Lotniska mogą udostępniać kioski internetowe, w których pasażerowie mogą skanować kody Aztec na kartach pokładowych, aby wyświetlać spersonalizowane informacje o swoich lotach.

Wykrywanie tekstu

  • Internetowe serwisy społecznościowe mogą zwiększyć dostępność treści obrazów generowanych przez użytkowników, dodając wykryte teksty jako atrybuty alt do tagów <img>, gdy nie są dostępne żadne inne opisy.
  • Witryny z treściami mogą używać wykrywania tekstu, aby uniknąć umieszczania nagłówków na obrazach głównych zawierających tekst.
  • Aplikacje internetowe mogą używać wykrywania tekstu do tłumaczenia tekstów, takich jak menu restauracji.

Obecny stan,

Krok Stan
1. Tworzenie wyjaśnienia Zakończono
2. Tworzenie wstępnej wersji specyfikacji Zakończono
3. Zbieranie opinii i ulepszanie projektu W toku
4. Wersja próbna origin Zakończono
5. Uruchom Wykrywanie kodów kreskowych Gotowe
Wykrywanie twarzy W toku
Wykrywanie tekstu w toku

Jak korzystać z interfejsu Shape Detection API

.

Jeśli chcesz eksperymentować z interfejsem Shape Detection API lokalnie, włącz flagę #enable-experimental-web-platform-features w about://flags.

Interfejsy wszystkich 3 detektorów, FaceDetector, BarcodeDetector i TextDetector, są podobne. Wszystkie udostępniają jedną metodę asynchroniczną o nazwie detect(), która przyjmuje jako dane wejściowe obiekt ImageBitmapSource (czyli obiekt CanvasImageSource, Blob lub ImageData).

W przypadku funkcji FaceDetector i BarcodeDetector do konstruktora detektora można przekazywać opcjonalne parametry, które umożliwiają przekazywanie wskazówek do detektorów bazowych.

Zapoznaj się z macierzą obsługi w wyjaśnieniu, aby uzyskać przegląd różnych platform.

, aby poprosić o dostęp CORS.

Praca z BarcodeDetector

Funkcja BarcodeDetector zwraca surowe wartości kodów kreskowych znalezionych w ImageBitmapSource i ramki ograniczające, a także inne informacje, takie jak formaty wykrytych kodów kreskowych.

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

Praca z FaceDetector

Funkcja FaceDetector zawsze zwraca ramki ograniczające twarze wykryte w ImageBitmapSource. W zależności od platformy może być dostępnych więcej informacji o punktach charakterystycznych twarzy, takich jak oczy, nos czy usta. Warto pamiętać, że ten interfejs API wykrywa tylko twarze. Nie określa, do kogo należy twarz.

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

Praca z TextDetector

TextDetector zawsze zwraca ramki ograniczające wykrytych tekstów i na niektórych platformach rozpoznane znaki.

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

Wykrywanie cech

Samo sprawdzenie istnienia konstruktorów w celu wykrycia funkcji interfejsu Shape Detection API nie wystarczy. Obecność interfejsu nie oznacza, że platforma bazowa obsługuje daną funkcję. Jest to działanie zgodne z oczekiwaniami. Dlatego zalecamy podejście programowania defensywnego, które polega na wykrywaniu funkcji w ten sposób:

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

Interfejs BarcodeDetector został zaktualizowany i zawiera metodę getSupportedFormats(). Podobne interfejsy zostały zaproponowanedla FaceDetector i dla 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"
  ]
*/

Dzięki temu możesz wykryć konkretną funkcję, której potrzebujesz, np. skanowanie kodu QR:

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

Jest to lepsze rozwiązanie niż ukrywanie interfejsów, ponieważ nawet na różnych platformach możliwości mogą się różnić, dlatego deweloperzy powinni sprawdzać, czy mają dostęp do konkretnej funkcji (np. określonego formatu kodu kreskowego lub punktu charakterystycznego twarzy).

Obsługa systemu operacyjnego

Wykrywanie kodów kreskowych jest dostępne w systemach macOS, ChromeOS i Android. Usługi Google Play są wymagane na Androidzie.

Sprawdzone metody

Wszystkie detektory działają asynchronicznie, tzn. nie blokują głównego wątku. Nie polegaj więc na wykrywaniu w czasie rzeczywistym, ale daj detektorowi trochę czasu na wykonanie swojej pracy.

Jeśli lubisz Web Workers, ucieszy Cię wiadomość, że detektory są dostępne również w tym przypadku. Wyniki wykrywania można serializować, a tym samym przekazywać z instancji roboczej do głównej aplikacji za pomocą postMessage(). Demonstracja pokazuje, jak to działa.

Nie wszystkie implementacje platformy obsługują wszystkie funkcje, dlatego dokładnie sprawdź sytuację dotyczącą obsługi i używaj interfejsu API jako progresywnego ulepszenia. Na przykład niektóre platformy mogą obsługiwać samo wykrywanie twarzy, ale nie wykrywanie punktów charakterystycznych twarzy (oczu, nosa, ust itp.). Mogą też rozpoznawać istnienie i lokalizację tekstu, ale nie jego zawartość.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoje doświadczenia związane z interfejsem Shape Detection API.

Opisz projekt interfejsu API

Czy w API jest coś, co nie działa tak, jak oczekujesz? Czy brakuje metod lub właściwości, które są potrzebne do zrealizowania Twojego pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

Masz problem z implementacją?

Czy w implementacji Chrome występuje błąd? Czy implementacja różni się od specyfikacji?

Planujesz korzystać z interfejsu API?

Planujesz używać interfejsu Shape Detection API w swojej witrynie? Twoje publiczne wsparcie pomaga nam ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wspieranie.

Przydatne linki