FFmpeg WebCLI: WebAssembly를 이용한 브라우저 기반 비디오 편집

FFmpeg WebCLI는 사용자의 장치에서 로컬로 전체 FFmpeg 기능을 제공하는 브라우저 기반 비디오 편집기입니다. ffmpeg.wasm을 활용함으로써 이 도구는 서버 측 업로드가 필요 없으며, 모든 비디오 처리가 WebAssembly를 사용해 브라우저 내에서 완전히 이루어지도록 보장합니다.

로컬 처리 및 프라이버시

FFmpeg WebCLI는 데이터가 서버로 전송되지 않는 프라이버시 우선 아키텍처로 동작합니다. 모든 파일 I/O는 사용자의 머신에서 로컬로 처리됩니다. 워크플로는 ffmpeg-core WebAssembly 바이너리(약 31 MB)를 다운로드하고 향후 사용을 위해 캐시하는 과정을 포함합니다. 로드가 완료되면 비디오 처리는 Web Worker 내에서 실행되어 인코딩 중에도 브라우저 UI가 응답성을 유지합니다.

주요 기술 기능

이 애플리케이션은 기능별로 구분된 30가지가 넘는 비디오 작업을 포괄적으로 제공합니다:

비디오 조작 및 변환

  • 포맷 변환: MP4(H.264 + AAC), WebM(VP9 + Opus), MKV, MOV, AVI 로 재인코딩을 지원합니다.
  • 압축: CRF(Constant Rate Factor) 슬라이더(1851)와 인코딩 프리셋(ultrafastveryslow)을 포함하여 품질과 파일 크기의 균형을 맞춥니다.
  • 트리밍 및 크롭: 사용자는 타임라인 슬라이더로 시작·종료 지점을 설정하거나, 특정 X/Y 오프셋 및 크기를 정의하여 크롭할 수 있습니다.
  • 리사이징: scale 필터와 CRF 기반 H.264 인코딩을 결합해 출력 해상도를 변경하면서 종횡비를 유지합니다.
  • 시각 효과: 회전, 플립, 역방향 재생, 페이드 인/아웃 효과 옵션을 포함합니다.
  • 속도 조절: 비디오 PTS와 atempo 오디오 필터 체인(0.25x~4x)을 조정하여 오디오 피치와 싱크를 유지합니다.

오디오 처리

  • 추출: 오디오 트랙을 MP3, AAC, WAV, OGG, FLAC 등 독립 파일로 추출합니다.
  • 믹싱: amix 필터를 사용해 두 번째 오디오 파일을 배경 음악으로 혼합하며, 원본 및 배경 트랙 각각에 독립적인 볼륨 제어를 제공합니다.
  • 노멀라이제이션: loudnorm(EBU R128) 필터를 사용해 오디오를 방송 표준(-YouTube/Spotify용 -14 LUFS, 팟캐스트용 -16 LUFS, 방송용 -23 LUFS)으로 맞춥니다.
  • 볼륨 제어: volume 필터를 사용해 오디오 레벨을 높이거나 낮추며, 비디오를 스트림 복사하여 품질 손실을 방지합니다.

고급 오버레이 및 합성

  • 로고 및 이미지 오버레이: overlay 필터와 scale 사전 처리로 이미지(PNG, JPG, GIF, WebP)를 프레ーム에 삽입합니다.
  • 픽처인픽처(PIP): 두 번째 비디오 클립을 작은 삽입 창에 오버레이하고, 두 스트림을 H.264/AAC로 재인코딩합니다.
  • 연결: concat 필터를 사용해 두 클립을 연결하며, 서로 다른 해상도와 코덱을 자동으로 처리합니다.
  • 사이드 바이 사이드: hstack 또는 vstack을 사용해 두 클립을 나란히 배치하여 비교 또는 리액션 영상을 만듭니다.

메타데이터 및 유틸리티

  • 메타데이터 제거: -map_metadata -1을 사용해 GPS 좌표와 카메라 태그를 삭제합니다.
  • 자막 삽입: .srt, .vtt, .ass 파일을 MP4 또는 MKV 컨테이너에 소프트 자막 트랙으로 멀티플렉싱하며, 영상을 재인코딩하지 않습니다.
  • 자막 주의: 하드코딩 자막은 libass 지원 빌드가 필요하지만, 표준 WebAssembly 코어에는 제공되지 않습니다.
  • 미디어 정보: ffmpeg -hide_banner -i를 사용해 전체 코덱 및 스트림 정보를 출력하는 깊은 스캔을 수행합니다.

Raw FFmpeg 접근

고급 사용자를 위해 도구는 Raw FFmpeg 패널을 제공합니다. 사용자는 -i input과 출력 파일명 사이에 삽입되는 사용자 정의 인자를 입력할 수 있습니다. 패널에는 실시간 명령 미리보기와 노이즈 제거(hqdn3d), 샤프닝(unsharp), 모션 안정화(deshake)와 같은 복잡한 작업을 위한 원클릭 레시피 라이브러리가 포함됩니다.

오프라인 기능 및 PWA 지원

FFmpeg WebCLI는 프로그레시브 웹 앱(PWA)으로 구현되어 데스크톱 및 모바일에 네이티브 앱처럼 설치할 수 있습니다. 주요 PWA 기능은 다음과 같습니다:

  • 오프라인 지원: 정적 자산과 ffmpeg.wasm 라이브러리가 서비스 워커를 통해 캐시되어 최초 로드 이후 인터넷 연결 없이도 도구를 사용할 수 있습니다.
  • 스크린 웨이크 락: 장시간 인코딩 중에 장치가 잠들거나 잠금되는 것을 방지하여 처리가 중단되지 않도록 합니다.
  • 크로스 플랫폼 호환성: 데스크톱에서는 Chrome, Edge, Firefox, Safari에서, Android에서는 Chrome, Firefox, Samsung Internet에서 동작합니다.

커뮤니티 피드백 및 토론

Hacker News 커뮤니티 회원들은 WebAssembly 기반 인코딩의 성능 및 기술적 제한에 대해 논의했습니다. 일부 사용자는 네이티브 앱과 비교한 성능 및 하드웨어 가속(h264_nvenc 등)의 가용성을 의문시했으며, 다른 이들은 명령줄 사용이 번거로운 사용자에게 UI의 중요성을 강조했습니다.

‘upload’ 용어에 대한 UX 피드백 중 하나가 작성자에 의해 해결되었습니다:

"업로드 아이콘을 플로피 디스크 아이콘으로 바꿔 모든 데이터가 로컬에 남는다는 것을 명확히 했습니다."

로컬 배포

프로젝트를 로컬에서 실행하려면 서버가 ffmpeg.wasm에 필요한 SharedArrayBuffer 지원을 위해 특정 헤더를 설정해야 합니다:

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

FFmpeg WebCLI는 프라이버시 우선, 오프라인 사용이 가능한 PWA로, WebAssembly를 이용해 브라우저에 FFmpeg의 전체 기능을 제공하여 서버에 업로드하지 않고 로컬에서 비디오 처리를 가능하게 합니다.

FFmpeg WebCLI: WebAssembly를 이용한 브라우저 기반 비디오 편집

Sources