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ń?
- Zgłoś problem ze specyfikacją w repozytorium interfejsu Machine Detection API na GitHubie. lub opisz swój problem.
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.
- Poinformuj nas, jak zamierzasz korzystać z tego narzędzia w wątku poświęconym dysku WICG.
- Wyślij tweeta na adres @ChromiumDev, używając hashtagu
#ShapeDetection
. i daj nam znać, gdzie i jak go używasz.
Przydatne linki
- Publiczne wyjaśnienie
- Prezentacja API | Źródło wersji demonstracyjnej interfejsu API
- Śledzenie błędu
- Wpis na temat ChromeStatus.com
- Komponent Blink:
Blink>ImageCapture