피드로 돌아가기
Dev.toFrontend
원문 읽기
MediaPipe 기반 Browser-native 실시간 Hand/Face Tracking 구현
MediaPipe Hand Tracking & Face Detection in JavaScript
AI 요약
Context
별도의 Backend 서버나 npm 의존성 없이 브라우저 환경에서 실시간 Computer Vision 기능을 구현해야 하는 제약 상황 분석. 특히 웹캠의 native resolution과 Canvas 좌표계 간의 불일치로 인한 렌더링 오차 해결이 핵심 과제임.
Technical Solution
- WebAssembly(WASM) 기반의 MediaPipe Runtime을 활용한 Client-side 추론 구조 설계로 서버 비용 제거 및 지연 시간 최소화
- float16 정밀도 모델 채택을 통한 브라우저 리소스 사용량 최적화 및 추론 속도와 정확도의 Trade-off 달성
getUserMediaAPI의 HD 설정(1280x720)과 Canvas의 해상도를 동기화하여 Normalized Coordinates(0~1)의 정밀한 매핑 구현- Landmark 8(Tip)과 6(PIP)의 Y축 좌표 비교 로직을 통한 Heuristic-based Gesture Classification 알고리즘 적용
- Video-Canvas-UI 레이어의 Absolute Positioning 스택 구조를 통한 비침습적 오버레이 렌더링 파이프라인 구축
실천 포인트
- Client-side ML 모델 도입 시 float16 등 경량화 모델을 통한 브라우저 성능 저하 방지 검토 - ML 모델의 정규화된 좌표값을 화면에 렌더링할 때 native 해상도 기반의 스케일링 로직 적용 여부 확인 - 보안 정책상 `file://` 프로토콜에서 차단되는 `getUserMedia` API 사용을 위해 HTTP 서버 환경 구축 필수