Frontend Shape Detection API: Průvodce integrací počítačového vidění v prohlížeči

Webový prohlížeč se vyvíjí v mocnou platformu pro více než jen zobrazování statického obsahu. Díky pokrokům v JavaScriptu a API prohlížečů můžeme nyní provádět složité úkoly přímo na straně klienta. Jedním z takových pokroků je Shape Detection API, API prohlížeče, které vývojářům umožňuje detekovat různé tvary v obrázcích a videích, včetně obličejů, čárových kódů a textu. To otevírá svět možností pro vytváření interaktivních a inteligentních webových aplikací, a to vše bez závislosti na serverovém zpracování pro základní úkoly počítačového vidění.

Co je Shape Detection API?

Shape Detection API poskytuje standardizovaný způsob přístupu k algoritmům počítačového vidění přímo v prohlížeči. Zpřístupňuje tři hlavní detektory:

• FaceDetector: Detekuje lidské obličeje v obrázcích a videích.
• BarcodeDetector: Detekuje a dekóduje různé formáty čárových kódů.
• TextDetector: Detekuje oblasti textu v obrázcích. (Poznámka: Zatím není široce implementován ve všech prohlížečích)

Tyto detektory pracují přímo na zařízení klienta, což znamená, že obrazová nebo video data nemusí být odesílána ke zpracování na server. To nabízí několik výhod, včetně:

• Soukromí: Citlivá data zůstávají na zařízení uživatele.
• Výkon: Snížená latence díky absenci cesty na server a zpět.
• Možnost offline provozu: Některé implementace mohou umožnit detekci offline.
• Snížené náklady na server: Menší zátěž na vaší backendové infrastruktuře.

Podpora v prohlížečích

Podpora Shape Detection API v prohlížečích se stále vyvíjí. Ačkoli je API dostupné v některých moderních prohlížečích jako Chrome a Edge, podpora v jiných, jako je Firefox a Safari, může být omezená nebo vyžadovat povolení experimentálních funkcí. Před použitím API v produkčním prostředí si vždy zkontrolujte nejnovější tabulky kompatibility prohlížečů. K ověření aktuální podpory jednotlivých funkcí můžete použít webové stránky jako caniuse.com.

Použití FaceDetector API

Začněme praktickým příkladem použití FaceDetector API k detekci obličejů v obrázku.

Základní detekce obličeje

Zde je základní úryvek kódu demonstrující, jak použít FaceDetector:

const faceDetector = new FaceDetector();

const image = document.getElementById('myImage'); // Předpokládejme, že se jedná o element <img>

faceDetector.detect(image)
  .then(faces => {
    faces.forEach(face => {
      console.log('Face detected at:', face.boundingBox);
      // Pomocí canvasu můžete kolem obličeje nakreslit obdélník
    });
  })
  .catch(error => {
    console.error('Face detection failed:', error);
  });

Vysvětlení:

1. Vytvoříme novou instanci třídy FaceDetector.
2. Získáme odkaz na obrazový element (<img>) v našem HTML.
3. Zavoláme metodu detect() instance FaceDetector a předáme jí obrazový element.
4. Metoda detect() vrací Promise, který se vyřeší polem objektů Face, z nichž každý představuje detekovaný obličej.
5. Procházíme pole objektů Face a do konzole vypisujeme ohraničující rámeček (bounding box) každého obličeje. Vlastnost boundingBox obsahuje souřadnice obdélníku obklopujícího obličej.
6. Zahrnujeme také blok catch() pro zpracování jakýchkoli chyb, které mohou během procesu detekce nastat.

Přizpůsobení možností detekce obličeje

Konstruktor FaceDetector přijímá volitelný objekt s konfiguračními možnostmi:

• maxDetectedFaces: Maximální počet detekovaných obličejů. Výchozí hodnota je 1.
• fastMode: Booleovská hodnota určující, zda použít rychlejší, ale potenciálně méně přesný režim detekce. Výchozí hodnota je false.

Příklad:

const faceDetector = new FaceDetector({ maxDetectedFaces: 5, fastMode: true });

Kreslení obdélníků kolem detekovaných obličejů

Chcete-li vizuálně zvýraznit detekované obličeje, můžete kolem nich nakreslit obdélníky pomocí HTML5 Canvas API. Zde je postup:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

const image = document.getElementById('myImage');

faceDetector.detect(image)
  .then(faces => {
    faces.forEach(face => {
      const { x, y, width, height } = face.boundingBox;

      context.beginPath();
      context.rect(x, y, width, height);
      context.lineWidth = 2;
      context.strokeStyle = 'red';
      context.stroke();
    });
  })
  .catch(error => {
    console.error('Face detection failed:', error);
  });

Důležité: Ujistěte se, že element canvas je správně umístěn nad obrazovým elementem.

Použití BarcodeDetector API

BarcodeDetector API vám umožňuje detekovat a dekódovat čárové kódy v obrázcích a videích. Podporuje širokou škálu formátů čárových kódů, včetně:

• EAN-13
• EAN-8
• UPC-A
• UPC-E
• Code 128
• Code 39
• Code 93
• Codabar
• ITF
• QR Code
• Data Matrix
• Aztec
• PDF417

Základní detekce čárového kódu

Zde je postup, jak použít BarcodeDetector:

const barcodeDetector = new BarcodeDetector();

const image = document.getElementById('myBarcodeImage');

barcodeDetector.detect(image)
  .then(barcodes => {
    barcodes.forEach(barcode => {
      console.log('Barcode detected:', barcode.rawValue);
      console.log('Barcode format:', barcode.format);
      console.log('Bounding Box:', barcode.boundingBox);
    });
  })
  .catch(error => {
    console.error('Barcode detection failed:', error);
  });

Vysvětlení:

1. Vytvoříme novou instanci třídy BarcodeDetector.
2. Získáme odkaz na obrazový element obsahující čárový kód.
3. Zavoláme metodu detect() a předáme jí obrazový element.
4. Metoda detect() vrací Promise, který se vyřeší polem objektů DetectedBarcode.
5. Každý objekt DetectedBarcode obsahuje informace o detekovaném čárovém kódu, včetně:
• rawValue: Dekódovaná hodnota čárového kódu.
• format: Formát čárového kódu (např. 'qr_code', 'ean_13').
• boundingBox: Souřadnice ohraničujícího rámečku čárového kódu.
6. Tyto informace vypisujeme do konzole.
7. Zahrnujeme zpracování chyb.

Přizpůsobení formátů detekce čárových kódů

Můžete specifikovat formáty čárových kódů, které chcete detekovat, předáním volitelného pole s nápovědami formátů do konstruktoru BarcodeDetector:

const barcodeDetector = new BarcodeDetector({ formats: ['qr_code', 'ean_13'] });

Tím se detekce omezí na QR kódy a čárové kódy EAN-13, což může potenciálně zlepšit výkon.

Použití TextDetector API (experimentální)

TextDetector API je navrženo k detekci oblastí textu v obrázcích. Je však důležité si uvědomit, že toto API je stále experimentální a nemusí být implementováno ve všech prohlížečích. Jeho dostupnost a chování mohou být nekonzistentní. Před pokusem o jeho použití si pečlivě zkontrolujte kompatibilitu prohlížečů.

Základní detekce textu (pokud je k dispozici)

Zde je příklad, jak byste *mohli* použít TextDetector, ale pamatujte, že nemusí fungovat:

const textDetector = new TextDetector();

const image = document.getElementById('myTextImage');

textDetector.detect(image)
  .then(texts => {
    texts.forEach(text => {
      console.log('Text detected:', text.rawValue);
      console.log('Bounding Box:', text.boundingBox);
    });
  })
  .catch(error => {
    console.error('Text detection failed:', error);
  });

Pokud je TextDetector k dispozici a detekce je úspěšná, pole texts bude obsahovat objekty DetectedText, každý s rawValue (detekovaný text) a boundingBox.

Úvahy a osvědčené postupy

• Výkon: Ačkoli zpracování na straně klienta v některých případech nabízí výhody ve výkonu, složitá analýza obrazu může být stále náročná na zdroje. Optimalizujte své obrázky a videa pro doručování po webu, abyste minimalizovali dobu zpracování. Zvažte použití volby fastMode v FaceDetector pro rychlejší, i když potenciálně méně přesnou, detekci.
• Soukromí: Zdůrazněte svým uživatelům výhody zpracování na straně klienta v oblasti soukromí. Buďte transparentní ohledně toho, jak API používáte a jak jsou jejich data zpracovávána (nebo v tomto případě nezpracovávána).
• Zpracování chyb: Vždy zahrňte robustní zpracování chyb, abyste elegantně zvládli případy, kdy API není podporováno nebo detekce selže. Poskytněte uživateli informativní chybové zprávy.
• Detekce funkcí: Před použitím Shape Detection API zkontrolujte, zda je podporováno v prohlížeči uživatele:

if ('FaceDetector' in window) {
  // FaceDetector je podporován
} else {
  console.warn('FaceDetector is not supported in this browser.');
  // Poskytněte alternativní implementaci nebo funkci zakažte
}

• Přístupnost: Zvažte dopady použití Shape Detection API na přístupnost. Pokud například používáte detekci obličeje k povolení určitých funkcí, poskytněte alternativní způsoby přístupu k těmto funkcím pro uživatele, které nelze detekovat.
• Etické ohledy: Buďte si vědomi etických důsledků používání detekce obličeje a dalších technologií počítačového vidění. Vyhněte se používání těchto technologií způsoby, které by mohly být diskriminační nebo škodlivé. Například si buďte vědomi potenciálních předsudků v algoritmech detekce obličeje, které by mohly vést k nepřesným nebo nespravedlivým výsledkům pro určité demografické skupiny. Aktivně pracujte na zmírnění těchto předsudků.

Případy použití a příklady

Shape Detection API otevírá širokou škálu vzrušujících možností pro vývoj webových aplikací. Zde je několik příkladů:

• Úprava obrázků a videa: Automaticky detekujte obličeje v obrázcích a videích pro aplikaci filtrů, efektů nebo redakcí.
• Rozšířená realita (AR): Použijte detekci obličeje k překrytí virtuálních objektů na tváře uživatelů v reálném čase.
• Přístupnost: Pomozte uživatelům se zrakovým postižením automatickou detekcí a popisem objektů v obrázcích. Například webová stránka by mohla použít detekci obličeje k oznámení, kdy je osoba přítomna ve streamu z webkamery.
• Bezpečnost: Implementujte skenování čárových kódů na straně klienta pro bezpečnou autentizaci nebo zadávání dat. To může být zvláště užitečné pro mobilní webové aplikace.
• Interaktivní hry: Vytvářejte hry, které reagují na výrazy obličeje nebo pohyby uživatelů. Představte si hru, kde ovládáte postavu mrkáním nebo úsměvem.
• Skenování dokumentů: Automaticky detekujte oblasti textu ve skenovaných dokumentech pro zpracování OCR (optické rozpoznávání znaků). Ačkoli samotný TextDetector nemusí provádět OCR, může pomoci lokalizovat oblasti textu pro další zpracování.
• E-commerce: Umožněte uživatelům skenovat čárové kódy produktů ve fyzických obchodech, aby je rychle našli na e-commerce webu. Uživatel by mohl například naskenovat čárový kód knihy v knihovně, aby ji našel k prodeji online.
• Vzdělávání: Interaktivní výukové nástroje, které používají detekci obličeje k měření zapojení studentů a přizpůsobení výukového zážitku. Například doučovací program by mohl sledovat výrazy obličeje studenta, aby určil, zda je zmatený nebo frustrovaný, a poskytl odpovídající pomoc.

Globální příklad: Globální e-commerce společnost může integrovat skenování čárových kódů do svých mobilních webových stránek, což zákazníkům v různých zemích umožní rychle najít produkty bez ohledu na místní jazyk nebo konvence pojmenování produktů. Čárový kód poskytuje univerzální identifikátor.

Alternativy k Shape Detection API

Ačkoli Shape Detection API poskytuje pohodlný způsob provádění úkolů počítačového vidění v prohlížeči, existují i alternativní přístupy, které je třeba zvážit:

• Zpracování na straně serveru: Můžete posílat obrázky a videa na server ke zpracování pomocí specializovaných knihoven a frameworků pro počítačové vidění, jako je OpenCV nebo TensorFlow. Tento přístup nabízí větší flexibilitu a kontrolu, ale vyžaduje více infrastruktury a zavádí latenci.
• WebAssembly (Wasm): Můžete zkompilovat knihovny pro počítačové vidění napsané v jazycích jako C++ do WebAssembly a spustit je v prohlížeči. Tento přístup nabízí téměř nativní výkon, ale vyžaduje více technických znalostí a může zvýšit počáteční velikost stahované aplikace.
• JavaScriptové knihovny: Několik JavaScriptových knihoven poskytuje funkcionalitu počítačového vidění, jako například tracking.js nebo face-api.js. Tyto knihovny mohou být snazší k použití než WebAssembly, ale nemusí být tak výkonné.

Závěr

Frontend Shape Detection API je mocný nástroj pro implementaci počítačového vidění do vašich webových aplikací. Využitím zpracování na straně klienta můžete zlepšit výkon, chránit soukromí uživatelů a snížit náklady na server. Ačkoli se podpora v prohlížečích stále vyvíjí, API nabízí pohled do budoucnosti webového vývoje, kde lze složité úkoly provádět přímo v prohlížeči. Jak se bude podpora v prohlížečích zlepšovat a API dozrávat, můžeme očekávat ještě více inovativních a vzrušujících aplikací této technologie. Experimentujte s API, prozkoumejte jeho možnosti a přispějte k jeho evoluci, abyste utvářeli budoucnost webu.

Pamatujte, že při práci s technologiemi počítačového vidění je třeba vždy upřednostňovat etické ohledy a soukromí uživatelů.