기술스텍

pnpm, turbo, esbuild를 사용하고 있습니다.

@remotion/renderer 패키지는 cli의 주요 옵션처리를 수행합니다. execa를 사용하여 ffmpeg 호출을 합니다.

Puppeteer 대신 직접 CDP, Chrome DevTools Protocol을 사용하여 브라우저를 제어 합니다.

Rendering

초기화 과정

브라우저 실행 시, 브라우저가 CDP, Chrome DevTools Protocol 서버를 실행하도록 옵션을 줍니다. Chrome의 경우 --remote-debugging-port=0 옵션을 사용하면 STDERR 파이프로 CDP websocket endpoint를 출력합니다.

참조: aslushnikov/getting-started-with-cdp: Getting Started With Chrome DevTools Protocol

이 websocket endpoint와 연결 설정을 하여 브라우저를 제어합니다.

비디오 생성 과정

먼저 대상이되는 소스를 webpack으로 번들링하여 static 파일을 생성합니다.

다음 해당 static 파일을 로컬에서 http 서빙을 합니다.

이어 http 서버 URL을 CDP를 사용하여 브라우저 page를 엽니다. CDP의 Page.captureScreenshot을 frame rate에 맞추어 호출하여 이미지를 생성합니다.

마지막으로 ffmpeg을 사용하여 screenshot을 하나의 비디오 파일로 붙이는 작업을 합니다.

마치며

지난 시간에 이어 remotion의 비디오 생성 과정을 살펴 보았습니다.

Puppeteer를 사용하지 않고 직접 CDP를 사용하여 구현한 점이 인상 깊었습니다. 아무래도 나름의 이유가 있을 것 같은데 여유가 된다면 한번 찾아봐야 겠습니다.