피드로 돌아가기
Dev.toFrontend
원문 읽기
page.screencast API를 통한 VP8 하드코딩 탈피 및 libx264 기반 고화질 녹화 구현
Replacing Playwright's hardcoded VP8 encoder: a deep dive into page.screencast
AI 요약
Context
Playwright의 기본 recordVideo 기능은 VP8 인코더와 1Mbps 비트레이트가 하드코딩되어 텍스트 밀도가 높은 페이지에서 심각한 화질 저하 발생. 메인테이너의 설정 옵션 추가 거부 및 내부 ffmpeg 바이너리의 libvpx 전용 빌드 제약으로 인해 단순 패치로는 해결 불가능한 구조적 한계 존재.
Technical Solution
- Playwright 1.59에 도입된 page.screencast.start API를 활용하여 내부 VideoRecorder를 우회하고 Raw JPEG 프레임 스트림 직접 수신
- 외부 ffmpeg-static 프로세스를 spawn하여 image2pipe 포맷으로 JPEG 데이터를 파이핑함으로써 libx264 및 CRF 18 등 고효율 인코더 제어권 확보
- Windows 환경의 setInterval 기반 프레임 전송 시 발생하는 시간 드리프트(약 32%) 문제를 해결하기 위해 wall-clock 기반 프레임 번호 계산 로직 도입
- 프레임 누락 발생 시 이전 프레임을 중복 전송(back-filling)하여 ffmpeg가 기대하는 CFR(Constant Frame Rate) 정밀도 유지
- multi-page 컨텍스트 대응을 위한 attachRecorderForContext 설계를 통해 팝업 및 새 탭 포함 전체 세션 캡처 자동화
- 2-pass 프로세싱 구조를 채택하여 녹화 후 최종 MP4 파일 확정 및 외부 오디오 파일의 정밀한 타임스탬프 믹싱 구현
실천 포인트
1. 고화질 화면 녹화 필요 시 인코더(libx264, SVT-AV1)와 CRF/비트레이트 설정 가능 여부 확인
2. 실시간 스트리밍 데이터 처리 시 setInterval 대신 절대 시간(Wall-clock) 기반의 프레임 인덱싱 적용 검토
3. 외부 바이너리 의존성 발생 시 ffmpeg-static 등 정적 바이너리 배포 방식으로 환경 일관성 유지