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

Interfejs API wykrywania kształtów 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 Chrome na Androida wybieracz zdjęć można łatwo robić zdjęcia lub nagrywać filmy na żywo za pomocą aparatów urządzeń albo przesyłać zdjęcia z pamięci lokalnej. Do tej pory te dynamiczne dane obrazu (a także statyczne obrazy na stronie) nie były dostępne dla kodu, 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 zbudować czytnik kodów QR, musieli polegać na zewnętrznych bibliotekach JavaScript. Może to być kosztowne z punktu widzenia wydajności i zwiększać całkowity rozmiar strony. Z drugiej strony systemy operacyjne, takie jak Android, iOS i macOS, a także układy scalone w modułach kamer, zwykle mają już wydajne i wysoko zoptymalizowane detektory funkcji, takie jak detekcja funkcji AndroidaFaceDetector lub ogólny detekcja funkcji iOSCIDetector.

Interfejs 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 zastosowania

Jak wspomniano powyżej, interfejs Shape Detection API obsługuje obecnie wykrywanie twarzy, kodów kreskowych i tekstu. W tabeli poniżej znajdziesz przykłady zastosowania wszystkich 3 funkcji.

Wykrywanie twarzy

  • Strony internetowe do nawiązywania kontaktów towarzyskich lub udostępniania zdjęć często umożliwiają użytkownikom dodawanie adnotacji do osób na zdjęciach. Możesz to ułatwić, zaznaczając granice wykrytych twarzy.
  • Witryny z treściami mogą dynamicznie przycinać obrazy na podstawie potencjalnie wykrytych twarzy, zamiast polegać na innych metodach heurystycznych, lub wyróżniać wykryte twarze za pomocą efektów przesuwania i powiększania w stylu Kena Burnsa w formatach podobnych do relacji.
  • Witryny do przesyłania wiadomości multimedialnych mogą umożliwiać użytkownikom nakładanie na wykryte punkty orientacyjne twarzy zabawnych obiektów, takich jak okulary przeciwsłoneczne czy wąsy.

Wykrywanie kodów kreskowych

  • Aplikacje internetowe, które odczytują kody QR, mogą umożliwiać ciekawe zastosowania, takie jak płatności online czy nawigacja po Internecie, a także tworzenie połączeń 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ć kod Aztec kart pokładowych, aby wyświetlić spersonalizowane informacje dotyczące ich lotów.

Wykrywanie tekstu

  • Witryny społecznościowe mogą poprawić dostępność treści obrazowych tworzonych przez użytkowników, dodając wykryte teksty jako atrybuty alt dla tagów <img>, gdy nie podano innych opisów.
  • Witryny z treściami mogą używać wykrywania tekstu, aby uniknąć umieszczania nagłówków na obrazach nagłówkowych 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 Ukończone
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 pliku 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 parametr ImageBitmapSource (czyli CanvasImageSource, Blob lub ImageData).

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

Aby uzyskać przegląd różnych platform, dokładnie sprawdź matrycę obsługi w treści wyjaśniającej.

Praca z BarcodeDetector

Funkcja BarcodeDetector zwraca wartości kodów kreskowych w postaci nieprzetworzonej, które znajdują się w polu ImageBitmapSource, oraz 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 wokół twarzy wykrytej w polu ImageBitmapSource. W zależności od platformy może być dostępnych więcej informacji o elementach twarzy, takich jak oczy, nos czy usta. Pamiętaj, że ten interfejs API wykrywa tylko twarze. Nie identyfikuje, 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

Funkcja TextDetector zawsze zwraca ramki wykrytych tekstów, a 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 do wykrywania funkcji wykrywania interfejsu Shape Detection API nie wystarcza. Obecność interfejsu nie oznacza, że platforma obsługuje daną funkcję. Jest to działanie zgodne z oczekiwaniami. Dlatego zalecamy stosowanie podejścia programowania defensywnego, które polega na wykrywaniu funkcji w taki 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, aby zawierać metodę getSupportedFormats(). Zaproponowano też 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 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ż możliwości mogą się różnić nawet na różnych platformach. Deweloperzy powinni dokładnie sprawdzać, jakie funkcje są im potrzebne (np. określony format kodu kreskowego lub punkt orientacyjny na 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 urządzeniach z Androidem.

Sprawdzone metody

Wszystkie detektory działają asynchronicznie, co oznacza, że nie blokują głównego wątku. Nie polegaj na wykrywaniu w czasie rzeczywistym, ale daj detektorowi trochę czasu na działanie.

Jeśli lubisz Web Workers, z przyjemnością dowiesz się, że detektory są tam również dostępne. Wyniki wykrywania można serializować, dzięki czemu można je przekazywać z instancji roboczej do aplikacji głównej za pomocą postMessage(). Demo pokazuje, jak to działa.

Nie wszystkie implementacje platformy obsługują wszystkie funkcje, dlatego dokładnie sprawdź, czy interfejs API jest obsługiwany, i używaj go jako stopniowego ulepszenia. Na przykład niektóre platformy mogą obsługiwać wykrywanie twarzy, ale nie wykrywanie punktów orientacyjnych twarzy (oczu, nosa, ust itp.). Może być też rozpoznawane istnienie i położenie tekstu, ale nie jego treść.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia związane z interfejsem Shape Detection API.

Prześlij informacje o projektowaniu interfejsu API

Czy coś w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje Ci metod lub właściwości potrzebnych do zaimplementowania pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

Problem z implementacją?

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtwarzania błędu i ustaw Components na Blink>ImageCapture. Glitch świetnie sprawdza się do udostępniania szybkich i prostych sposobów odtwarzania.

Planujesz korzystać z interfejsu API?

Planujesz użyć w swojej witrynie interfejsu API wykrywania kształtów? Twoje publiczne wsparcie pomaga nam ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Przydatne linki