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

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

Czym jest interfejs Machine Detection API?

Za pomocą interfejsów API takich jak navigator.mediaDevices.getUserMedia oraz Chrome na Androida selektor zdjęć, zdjęcia lub dane wideo na żywo są dość łatwe, z aparatów fotograficznych ani do przesyłania lokalnych zdjęć. Do tej pory dane obrazu dynamicznego, a także statycznych obrazów na stronie – nie były dostępne przez kod, Mogą one zawierać wiele ciekawych obiektów, takich jak twarze, kody kreskowe i tekst.

Jeśli na przykład wcześniej deweloperzy chcieli wyodrębniać takie funkcje w czytnika kodów QR, korzystanie z zewnętrznych bibliotek JavaScript. Może to być drogie rozwiązanie z perspektywy wydajności i zwiększenia ogólnej wagi strony. Z drugiej strony systemów operacyjnych, w tym Android, iOS i macOS, ale też sprzętu. układy scalone występujące w modułach aparatów, zwykle już mają wysoką wydajność zoptymalizowanych wzorców do wykrywania funkcji, takich jak FaceDetector lub ogólny wzorzec do wykrywania funkcji w iOS, CIDetector

Interfejs shape Detection API udostępnia te implementacje za pomocą z zestawem interfejsów JavaScript. Obecnie obsługiwane funkcje to FaceDetector, wykrywanie kodu kreskowego za pomocą Interfejs BarcodeDetector oraz wykrywanie tekstu rozpoznawania (OCR) za pomocą interfejsu TextDetector.

Sugerowane zastosowania

Jak pisaliśmy powyżej, interfejs Machine Detection API obecnie obsługuje wykrywanie twarzy, kodów kreskowych i tekstu. Ta lista punktowana zawiera przykłady przypadków użycia wszystkich 3 funkcji.

Wykrywanie twarzy

  • Sieci społecznościowe lub witryny do udostępniania zdjęć często umożliwiają użytkownikom dodawać adnotacje do ludzi na obrazach. Wyróżniając granice wykrytych twarzy, można ułatwić ich wykonanie.
  • Witryny w sieci reklamowej mogą dynamicznie przycinać obrazy na podstawie wykrywania i wyróżniaj wykryte twarze, zamiast polegać na innych danych heurystycznych w stylu Kena Burnsa efekty przesunięcia i powiększenia w formatach fabularnych.
  • Witryny multimedialne mogą umożliwiać użytkownikom nakładanie na nie zabawnych elementów, takich jak okulary przeciwsłoneczne lub wąsy w wykrytych punktach orientacyjnych twarzy.

Wykrywanie kodu kreskowego

  • Aplikacje internetowe, które odczytują kody QR, mogą odblokować interesujące przypadki użycia, płatności online lub nawigację w sieci albo za pomocą kodów kreskowych w komunikatorach.
  • Aplikacje zakupowe mogą umożliwiać użytkownikom skanowanie EAN lub Kody kreskowe UPC w sklepie stacjonarnym, aby porównać ceny online.
  • Na lotniskach dostępne są kioski internetowe, w których pasażerowie mogą zeskanować wchodzenie na pokład karty Kody azteckie do wyświetlenia spersonalizowane informacje związane z lotami.

Wykrywanie tekstu

  • Witryny społecznościowe online mogą poprawić dostępność treści graficzne tworzone przez użytkowników poprzez dodanie wykrytych tekstów w atrybutach alt dla tagów <img>, gdy nie ma innych opisów.
  • Witryny z treścią mogą używać wykrywania tekstu, aby uniknąć umieszczania nagłówków nad Banery powitalne z tekstem.
  • Aplikacje internetowe mogą używać wykrywania tekstu do tłumaczenia takich tekstów, jak: np. menu restauracji.

Obecny stan,

Krok Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz początkową wersję roboczą specyfikacji Zakończono
3. Zbieraj opinie iterację projektu W toku
4. Wersja próbna origin Zakończono
5. Wprowadzenie na rynek Wykrywanie kodu kreskowego: Ukończono
Wykrywanie twarzy w toku
Wykrywanie tekstu w toku

Jak korzystać z interfejsu Machine Detection API

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

interfejsy wszystkich 3 detektorów: FaceDetector, BarcodeDetector i TextDetector są podobne. Wszystkie udostępniają jedną metodę asynchroniczną o nazwie detect(), która zajmuje ImageBitmapSource. jako danych wejściowych (czyli CanvasImageSource, Blob lub ImageData).

W przypadku FaceDetector i BarcodeDetector można przekazywać opcjonalne parametry do konstruktora wzorca do wykrywania treści, który umożliwia przekazywanie wskazówek do lub bazowych wzorców do wykrywania treści.

Uważnie sprawdź tablicę pomocniczą w Wyjaśnienie o różnych platformach.

Współpraca z BarcodeDetector

Funkcja BarcodeDetector zwraca nieprzetworzone wartości kodu kreskowego znalezione w ImageBitmapSource i ramek ograniczających, a także inne informacje, formatów 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

FaceDetector zawsze zwraca ramki ograniczające twarzy wykrytych w ImageBitmapSource. W zależności od platformy więcej informacji dotyczące elementów twarzy, takich jak oczy, nos czy usta. Pamiętaj, że ten interfejs API wykrywa tylko twarze. Nie wskazuje, 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);
}

Współpraca z TextDetector

TextDetector zawsze zwraca ramki ograniczające wykrytych tekstów, a na niektórych platformach – rozpoznawane postacie.

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

Po prostu sprawdzam, czy istnieją konstruktory do wykrywania cech Interfejs Machine Detection API nie wystarcza. Obecność interfejsu nie informuje o tym, czy dana funkcja jest dostępna na platformie. Jest to zamierzone. Dlatego zalecamy stosowanie programowania obronnego, polegającego na wykrywaniu cech charakterystycznych. podobny do tego:

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ędnić metodę getSupportedFormats(). i podobnych interfejsów zostały zaproponowane przez FaceDetector oraz dla domeny 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ć funkcję, której potrzebujesz, na przykład skanowanie kodu 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, bo nawet w przypadku różnych platform możliwości mogą się różnić. dlatego należy zachęcać programistów do sprawdzania, (np. w określonym formacie kodu kreskowego lub punktu orientacyjnego twarzy).

Obsługa systemów operacyjnych

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

Sprawdzone metody

Wszystkie detektory działają asynchronicznie, tzn. nie blokują głównego w wątku. Dlatego nie polegaj na wykrywaniu w czasie rzeczywistym, lecz pozwól minie czas, jaki detektor wykona swoją pracę.

Jeśli jesteś fanem/fanką: Usługi internetowe, warto wiedzieć, że w tym miejscu są też widoczne detektory. Wyniki wykrywania są serializowalne i dlatego mogą być przekazywane z instancji roboczej do głównej aplikacji na koncie postMessage(). Prezentacja pokazuje, jak to działa.

Nie wszystkie implementacje platform obsługują wszystkie funkcje, tej sytuacji pomocy technicznej i używać interfejsu API w trybie progresywnym, jego rozszerzenie. Na przykład niektóre platformy mogą obsługiwać wykrywanie twarzy per se, a nie wykrywanie punktów orientacyjnych (oczy, nos, usta itp.); lub istnienie i lokalizacja tekstu może zostać rozpoznana, ale nie zawartość tekstu.

Prześlij opinię

Zespół Chrome i społeczność ds. standardów internetowych chcą dowiedzieć się więcej o Twoim do wykorzystania w interfejsie Status Detection API.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? lub czy brakuje metod lub właściwości potrzebnych do implementacji co? Masz pytanie lub komentarz na temat modelu zabezpieczeń?

Problem z implementacją?

Czy wystąpił błąd z implementacją Chrome? Czy wdrożenie różni się od specyfikacji?

  • Zgłoś błąd na https://new.crbug.com. Pamiętaj, aby jako jak najwięcej szczegółów, proste instrukcje dotyczące odtwarzania Komponenty na Blink>ImageCapture. Błąd to świetny sposób na szybkie i łatwe udostępnianie.

Planujesz korzystać z interfejsu API?

Zastanawiasz się, czy nie zastosować w swojej witrynie interfejsu Condition Detection API? Twoje poparcie publiczne pomaga nam ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jest ich wsparcie.

Przydatne linki