피드로 돌아가기
Dev.toFrontend
원문 읽기
WebCodecs와 TensorFlow.js 기반의 Serverless Client-side MoCap 엔진 구현
STIKSHOT - A STICKMAN VIDEO RENDERER TOWARDS BEYOND
AI 요약
Context
서버 GPU 렌더링 비용 및 데이터 업로드 지연 시간을 제거하기 위해 100% 브라우저 샌드박스 내에서 동작하는 로컬 우선 아키텍처 설계. 기존 브라우저 환경의 Tab-throttling 및 OS별 WebCodecs API 구현 차이로 인한 런타임 불안정성 해결 필요.
Technical Solution
- Main Thread Coordinator와 Web Worker Processor로 역할을 분리하여 UI 응답성을 유지하는 Offscreen Pipelining 구조 채택
- TensorFlow.js 기반 MoveNet Multipose 모델을 통한 실시간 관절 좌표 추출 및 로컬 처리
- requestVideoFrameCallback의 Tab-throttling 제약을 극복하기 위해 seeked 이벤트 리스너와 500ms Timeout Fallback을 조합한 프레임 탐색 로직 구현
- iOS Safari의 Read-only Metadata 객체로 인한 Crash 방지를 위해 속성 복제(Property Copying)를 통한 Clean Object 생성 및 Muxer 전달
- Android Chrome의 decodeAudioData 무한 대기 현상을 해결하기 위해 8초 제한 시간을 가진 Promise 기반 Audio Decoder 래퍼 설계
- webm-muxer를 활용하여 분리된 Video/Audio 스트림을 단일 WebM 파일로 컴파일하는 Client-side Muxing 파이프라인 구축
실천 포인트
- 브라우저 API 사용 시 OS/브라우저별 구현 차이를 고려한 Polyfill 또는 Wrapper 설계 검토 - Web Worker를 활용한 무거운 연산 분리로 메인 스레드 Blocking 방지 - 비동기 API 호출 시 무한 대기 방지를 위한 Timeout 메커니즘 필수 적용 - 읽기 전용(Frozen) 객체 전달 시 얕은 복사(Shallow Copy)를 통한 데이터 정규화 고려