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

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

Thomas Steiner

Czym jest interfejs Character Detection API?

Dzięki interfejsom API takim jak navigator.mediaDevices.getUserMedia i selektorowi zdjęć w Chrome na Androida robienie zdjęć i danych wideo na żywo za pomocą kamer w urządzeniach jest stosunkowo łatwe, a także przesyłanie obrazów lokalnych. Do tej pory te dane dynamicznych obrazów – podobnie jak statyczne obrazy na stronie – nie były dostępne z użyciem kodu, chociaż obrazy mogą zawierać wiele ciekawych elementów, takich jak twarze, kody kreskowe i tekst.

W przeszłości programiści, którzy chcieli wyodrębnić takie funkcje po stronie klienta, aby utworzyć czytnik kodu QR, musieli korzystać z zewnętrznych bibliotek JavaScript. Może to być kosztowne z punktu widzenia efektywności i zwiększyć ogólną wagę strony. Z drugiej strony systemy operacyjne, w tym Android, iOS i macOS, a także układy sprzętowe stosowane w modułach kamery, zwykle mają wydajne i bardzo zoptymalizowane wzorce do wykrywania cech, takie jak Android FaceDetector lub ogólny detektor funkcji iOS CIDetector.

Interfejs kształtu wykrywającego kształt udostępnia te implementacje za pomocą zestawu interfejsów JavaScript. Obecnie obsługiwane są funkcje wykrywania twarzy przez interfejs FaceDetector, wykrywania kodów kreskowych przez interfejs BarcodeDetector oraz wykrywania tekstu (optyczne rozpoznawanie znaków (OCR)) w interfejsie TextDetector.

Sugerowane przypadki użycia

Jak już wspomnieliśmy, interfejs Character Detection API obsługuje obecnie wykrywanie twarzy, kodów kreskowych i tekstu. Na liście poniżej podajemy przykłady zastosowania wszystkich 3 funkcji.

Wykrywanie twarzy

  • W witrynach sieci społecznościowych i witrynach do udostępniania zdjęć użytkownicy często pozwalają dodawać adnotacje do osób na zdjęciach. To zadanie można ułatwić, wyróżniając granice wykrytych twarzy.
  • Witryny z treścią mogą dynamicznie przycinać obrazy na podstawie potencjalnie wykrytych twarzy, zamiast korzystać z innych metod heurystycznych. Można też wyróżniać wykryte twarze za pomocą efektów przesuwania i powiększania (podobnego do Ken Burnsa) w formatach fabularnych.
  • Witryny multimedialne mogą umożliwiać użytkownikom nakładanie śmiesznych obiektów, takich jak okulary przeciwsłoneczne lub wąsy, na wykryte punkty orientacyjne.

Wykrywanie kodu kreskowego

  • Aplikacje internetowe odczytujące kody QR mogą odblokowywać ciekawe przypadki użycia, np. płatności online lub nawigację w internecie, albo wykorzystywać kody kreskowe do nawiązywania więzi w aplikacjach do obsługi wiadomości.
  • Aplikacje zakupowe umożliwiają użytkownikom skanowanie kodów kreskowych EAN lub UPC produktów w sklepie stacjonarnym i porównywanie cen online.
  • Lotniska mogą udostępniać kioski internetowe, w których pasażerowie mogą skanować kody azteckie kart pokładowych, aby wyświetlać spersonalizowane informacje dotyczące lotów.

Wykrywanie tekstu

  • Witryny sieci społecznościowych mogą zwiększyć dostępność obrazów użytkowników, dodając wykryte teksty jako atrybuty alt w tagach <img>, jeśli nie podano innego opisu.
  • Witryny w sieci reklamowej mogą korzystać z wykrywania tekstu, aby nie umieszczać nagłówków na obrazach zawierających tekst.
  • Aplikacje internetowe mogą używać wykrywania tekstu do tłumaczenia tekstu, np. menu restauracji.

Obecny stan,

Step Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz wstępną wersję roboczą specyfikacji Zakończono
3. Zbieranie opinii i wprowadzanie poprawek w projektowaniu W toku
4. Testowanie origin Zakończono
5. Uruchom Wykrywanie kodu kreskowego Ukończono
Wykrywanie twarzy w toku
Wykrywanie tekstu w toku

Jak korzystać z interfejsu Character Detection API

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

Interfejsy wszystkich 3 wzorców do wykrywania treści: FaceDetector, BarcodeDetector i TextDetector są podobne. Wszystkie udostępniają jedną asynchroniczną metodę o nazwie detect(), która pobiera ImageBitmapSource jako dane wejściowe (czyli CanvasImageSource, Blob lub ImageData).

W przypadku FaceDetector i BarcodeDetector parametry opcjonalne mogą być przekazywane do konstruktora wzorca, dzięki czemu można przekazywać wskazówki do tych wzorców.

Omówienie różnych platform znajdziesz w tabeli pomocy podanej w opisie.

Współpraca z: BarcodeDetector

BarcodeDetector zwraca nieprzetworzone wartości kodu kreskowego znalezione w elemencie ImageBitmapSource i ramkach ograniczających, 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);
}

Współpraca z: FaceDetector

Funkcja FaceDetector zawsze zwraca ramki ograniczające twarzy wykrytego w obiekcie ImageBitmapSource. W zależności od platformy może być dostępnych więcej informacji o punktach orientacyjnych, takich jak oczy, nos czy usta. Pamiętaj, że ten interfejs API wykrywa tylko twarze. Nie określa on, do kogo należy dana 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);
}

Współpraca z: TextDetector

Pole TextDetector zawsze zwraca ramki ograniczające wykrytych tekstów, a na niektórych platformach rozpoznanych znaków.

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 funkcji

Samo sprawdzenie, czy istnieją konstruktory, aby wykryć interfejs Character Detection API, nie wystarczy. Sama obecność interfejsu nie decyduje o tym, czy platforma, z której on korzysta, obsługuje tę funkcję. Jest to działanie zgodne z oczekiwaniami. Dlatego zalecamy stosowanie programowania defensywnego przez wykrywanie 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))();

Zaktualizowaliśmy interfejs BarcodeDetector, aby uwzględniał metodę getSupportedFormats(). Zaproponowaliśmy podobne interfejsy dla FaceDetector i 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 wykrywać, których funkcji potrzebujesz, na przykład skanowanie kodów QR:

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

To lepsze rozwiązanie niż ukrywanie interfejsów, ponieważ nawet w przypadku różnych platform możliwości mogą się różnić. Dlatego zachęcamy deweloperów do sprawdzenia, czy dokładnie określone funkcje (np. konkretny format kodu kreskowego lub punkt orientacyjny twarzy) są, których potrzebują.

Obsługa systemu operacyjnego

Wykrywanie kodu kreskowego jest dostępne w systemach macOS, ChromeOS i Android. Usługi Google Play są wymagane na urządzeniu z Androidem.

Sprawdzone metody

Wszystkie wzorce do wykrywania treści działają asynchronicznie, co oznacza, że nie blokują wątku głównego. Dlatego nie polegaj na wykrywaniu w czasie rzeczywistym, ale lepiej daj mu trochę czasu na jego prawidłowe działanie.

Jeśli znasz narzędzia Web Workers, ucieszy Cię informacja, że dostępne są wzorce do wykrywania treści. Wyniki wykrywania są zserializowane, dzięki czemu można je przekazywać z instancji roboczej do głównej aplikacji przez postMessage(). Prezentacja pokazuje, jak to działa.

Nie wszystkie implementacje platformy obsługują wszystkie funkcje, więc dokładnie sprawdzaj stan pomocy i używaj interfejsu API jako stopniowe ulepszanie tej usługi. Na przykład niektóre platformy mogą obsługiwać wykrywanie twarzy samodzielnie, ale nie rozpoznają punktów orientacyjnych twarzy (oczy, nosa, ust itp.). Możliwe też, że istniejący tekst i lokalizacja tekstu mogą być rozpoznawane, ale nie tekst.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoje wrażenia z korzystania z interfejsu Character Detection API.

Opowiedz nam o projekcie interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje metod lub właściwości potrzebnych do realizacji Twojego pomysłu? Masz pytanie lub komentarz na temat modelu zabezpieczeń?

Problem z implementacją?

Czy wystąpił błąd związany z implementacją przeglądarki Chrome? A może implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtwarzania oraz ustaw Komponenty na Blink>ImageCapture. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.

Planujesz korzystać z interfejsu API?

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

Przydatne linki