4
min read

Proměna webových zážitků pomocí MediaPipe a JavaScriptu: Komplexní hluboký ponor do problematiky

Tento článek se zabývá bezproblémovým spojením JavaScriptu a frameworku MediaPipe společnosti Google a ukazuje jejich společný potenciál na praktických příkladech kódu, reálných případech použití a návodech krok za krokem pro vytváření inovativních webových aplikací, zejména v oblasti rozšířené reality (AR), s rozšířenými interaktivními funkcemi.
March 19, 2025
[Updated]

Proměna webových zážitků pomocí MediaPipe a JavaScriptu: Komplexní hluboký ponor do problematiky

Tento článek se zabývá bezproblémovým spojením JavaScriptu a frameworku MediaPipe společnosti Google a ukazuje jejich společný potenciál na praktických příkladech kódu, reálných případech použití a návodech krok za krokem pro vytváření inovativních webových aplikací, zejména v oblasti rozšířené reality (AR), s rozšířenými interaktivními funkcemi.

19. března 2025
4
min read

V dynamickém prostředí vývoje webových stránek se inovace často objevují díky harmonické integraci nejmodernějších technologií. Jedna taková synergie existuje mezi JavaScriptem a rámcem MediaPipe společnosti Google, který nabízí možnost revoluce v oblasti webových zážitků prostřednictvím počítačového vidění a strojového učení v reálném čase. V tomto podrobném průzkumu se budeme pohybovat v oblasti JavaScriptu a MediaPipe a odhalíme jejich kombinovaný potenciál pomocí praktických příkladů kódu, případů použití a návodů krok za krokem.

Odhalení sady nástrojů MediaPipe

Než se ponoříme do praktických implementací, pochopíme všestrannou sadu nástrojů, kterou MediaPipe přináší. MediaPipe, vytvořený společností Google, vybavuje vývojáře předpřipravenými modely strojového učení pro úlohy, jako je rozpoznávání obličejů, odhadování polohy a další. Bezproblémovou integrací těchto modelů s jazykem JavaScript se nám otevírají dveře k mnoha kreativním aplikacím.

Předpoklady

Chcete-li se vydat na tuto poutavou cestu, je nezbytné mít pevné znalosti základů jazyka JavaScript a vývoje webových aplikací. Ujistěte se, že máte k dispozici editor kódu, Node.js a zařízení s webovou kamerou pro experimentování.

Případ použití: Příklad: Filtry pro rozšířenou realitu

Představte si webovou aplikaci, která zkrášluje obličeje uživatelů interaktivními a zábavnými filtry rozšířené reality (AR). Tento scénář z reálného světa nám poslouží jako plátno pro zkoumání.

Krok 1: Inicializace projektu

  1. Vytvořte nový adresář projektu a nastavte projekt Node.js:

mkdir ar-filters-appcd ar-filters-appnpm init -y

  1. Nainstalujte požadované závislosti:
npm install @mediapipe/face_mesh @mediapipe/camera_utils @mediapipe/drawing_utils

  1. Struktura projektu je následující:

ar-filters-app/├── index.html├── index.html├── js/│   ├── main.js│   └── filters.js├── styles/│   └── main.css├── assets/│   ├── filters/│   │   ├── glasses.png│   │   └── crown.png│   └── effects/│       ├── sparkle.gif│       └── rainbow.gif└── images/    └── sample.jpg    

Krok 2: Inicializace MediaPipe

V souboru main.js inicializujte modul obličejové sítě a kameru MediaPipe:

import { Camera } from "@mediapipe/camera_utils";import { FaceMesh } from "@mediapipe/face_mesh";import { drawConnectors, drawLandmarks } from "@mediapipe/drawing_utils";const video = document.querySelector("video");const canvas = document.querySelector("canvas");const context = canvas.getContext("2d");const faceMesh = new FaceMesh({  locateFile: (file) => `../node_modules/@mediapipe/face_mesh/${file}`,});const camera = new Camera(video, {  onFrame: async () => {    await faceMesh.send({ image: video });    drawFaceMeshResults();  },  facingMode: "user",  width: 640,  height: 480,});camera.start();function drawFaceMeshResults() {  // Implement face mesh result rendering here}

Krok 3: Použití filtrů AR

V souboru filters.js aplikujte filtry AR na zjištěné orientační body obličeje:

const filterCanvas = document.createElement("canvas");const filterContext = filterCanvas.getContext("2d");const glassesImage = document.getElementById("glasses");const crownImage = document.getElementById("crown");faceMesh.onResults((results) => {  // Extract face landmarks from results  const landmarks = results.multiFaceLandmarks;  // Clear the filter canvas  filterContext.clearRect(0, 0, filterCanvas.width, filterCanvas.height);  // Apply filters to landmarks  landmarks.forEach((landmark) => {    const noseBridge = landmark[5];    const leftEye = landmark[159];    const rightEye = landmark[386];    // Apply glasses filter    const glassesX = leftEye.x;    const glassesY = noseBridge.y - 10;    filterContext.drawImage(glassesImage, glassesX, glassesY, 100, 40);    // Apply crown filter    const crownX = rightEye.x - 50;    const crownY = rightEye.y - 100;    filterContext.drawImage(crownImage, crownX, crownY, 100, 100);  });  // Draw filtered images on the main canvas  context.drawImage(filterCanvas, 0, 0, canvas.width, canvas.height);});

Krok 4: Stylování a uživatelské rozhraní

V souboru main.css nastylovat prvky video a plátno:

body {  margin: 0;  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background-color: #f0f0f0;}video,canvas {  border: 2px solid #333;  max-width: 100%;}

Krok 5: Ukončení akce

V souboru dex.html vše spojte dohromady:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="styles/main.css">  <title>AR Filters App</title></head><body>  <video autoplay playsinline></video>  <canvas></canvas>  <script type="module" src="js/main.js"></script>  <script type="module" src="js/filters.js"></script></body></html>


Závěr

Toto komplexní zkoumání odhalilo silné spojení JavaScriptu a MediaPipe, jak ukazuje naše aplikace filtrů pro rozšířenou realitu. Ponořením se do poskytnutých kroků, příkladů kódu a praktických případů použití jste se vydali na cestu, která přesahuje rámec filtrů rozšířené reality - rozšiřuje se na přetváření webových zážitků. Až budete pokračovat ve využívání síly MediaPipe a JavaScriptu, nezapomeňte, že inovace nezná hranic. Šťastné kódování!

Read also

Recommended Reads for You

Vendor Lock-in – Skryté náklady a jak jim předcházet

9
minut na čtení
20. prosince 2024
Vendor lock-in nastává, když se firma spoléhá na produkt či službu jediného dodavatele natolik, že přechod k jinému by byl příliš nákladný, složitý nebo by narušil provoz. Důsledkem mohou být ztráta dat, peněz i stability podnikání. Barbora Thornton, COO společnosti Moravio, se k tomuto důležitému tématu podělí o své zkušenosti.

Sourcing remote IT kapacit od Barbory Thornton, COO v Moravio

6
minut na čtení
7. října 2024
Tipy, výzvy a proč to může být správná volba

Integrace AI v podnikání - pohled AI inženýra z Moravio

10
minut na čtení
24. září 2024
Ladislav Husty, zkušený inženýr AI, sdílí své zkušenosti s integrací AI do podnikání
New articles

New blog posts you may be interested in

Automatizace analýzy zákaznické komunikace: Jak LLM a moderní AI nástroje mění péči o zákazníka

8
minut na čtení
10. června 2025
Zjistěte, jak umělá inteligence a velké jazykové modely (LLM) automatizují analýzu zákaznické komunikace z hovorů, e-mailů a chatů. Zlepšete zákaznickou zkušenost, snižte náklady a získejte okamžité poznatky.

Z přednáškového sálu do Kalifornie: Naše cesta skrze program IBOD na SDSU

4
minut na čtení
4. června 2025
Abychom lépe porozuměli americkému trhu, spojili jsme síly se studenty ze San Diego State University v rámci programu IBOD. Společně jsme propojili akademický výzkum s reálnými byznysovými zkušenostmi – a získali cenné poznatky.

Připravte svou společnost na budoucnost AI – Data a API dříve než UI

4
minut na čtení
27. května 2025
Nedávno jsme vystoupili na technologické konferenci v Brně a otevřeli jsme tam zásadní otázku: Jak může firma zůstat flexibilní, když se svět AI mění rychleji než čtvrtletní plán? V tomto shrnutí sdílíme konkrétní poznatky a zkušenosti z praxe – o AI agentech, automatizaci, datové strategii a o tom, co opravdu pomáhá připravit firmu na budoucnost umělé inteligence. A začíná to u API, ne u uživatelského rozhraní.

Jakub Bílý

Vedoucí obchodu

Pojďme společně dosáhnout výsledků!
Vyplňte formulář a ozveme se vám do 8 pracovních hodin.
Rádi zodpovíme všechny vaše dotazy!
Analyzujeme váš projekt a probereme podrobnosti.

Kontaktujte nás

Uploading...
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.