피드로 돌아가기
Dev.toFrontend
원문 읽기
분리형 캡처-합성 아키텍처를 통한 브라우저 비디오 프레임 드랍 해결
Why recording video in the browser is harder than it looks
AI 요약
Context
브라우저 내 Screen 및 Camera Stream을 Canvas로 실시간 합성하여 기록하는 초기 구조 설계. 녹화 시간이 5~10분 이상 길어질수록 실시간 디코딩, 드로잉, 인코딩 부하로 인한 Frame Drop 및 비디오 끊김 현상 발생.
Technical Solution
- 실시간 Composite 방식에서 Recording과 Compositing을 완전히 분리한 비동기 구조로 전환
- Screen 및 Camera Stream을 각각 독립적인 파일로 기록하여 실시간 렌더링 부하 제거
- Web Audio API를 활용한 Screen Audio와 Microphone Audio의 사전 믹싱 처리
- 사용자에게 제공되는 Live Canvas는 단순 Preview 용도로만 제한하여 메인 스레드 부하 감소
- Export 단계에서 기록된 소스들을 프레임 단위로 재합성하여 Zoom Effect 및 Trim 적용
loadedmetadata이벤트 이후 Canvas 크기를 설정하여 메타데이터 로드 전 0px 할당으로 인한 해상도 변경 버그 해결
실천 포인트
- 브라우저 기반 미디어 처리 시 실시간 합성보다 개별 기록 후 사후 합성 방식 검토 - 30초 내외의 짧은 데모가 아닌 5분 이상의 장기 녹화 테스트를 통한 성능 검증 - Video Element의 `videoWidth`, `videoHeight` 접근 전 `loadedmetadata` 이벤트 발생 여부 확인 - 브라우저별 지원 코덱(VP9, VP8, AVC)을 사전 확인하여 최적의 OutputFormat 결정