ffmpeg.wasm

FFmpeg C 코드를 WebAssembly로 컴파일해 브라우저에서 직접 영상 트랜스코딩을 실행하는 ffmpeg.wasm의 개념과 Vue.js 실습 코드를 소개한다. 별도 서버 없이 클라이언트에서 영상 처리를 완결하는 장점과 함께, 네이티브 FFmpeg 대비 성능 한계·라이브 스트리밍 미지원 등 현실적 제약을 직접 검증한 내용을 담는다.

핵심 포인트

ffmpeg.wasm: FFmpeg(C) 코드를 WebAssembly로 컴파일해 브라우저에서 FFmpeg 명령 실행 가능
@ffmpeg/ffmpeg + @ffmpeg/util 패키지로 Vue.js(TypeScript)에서 load → writeFile → exec → readFile 흐름으로 사용
실제 테스트: 4분 14초/24.4MB MP4 → 300×200 변환, ffmpeg.wasm이 네이티브 FFmpeg보다 유의미하게 느림
핵심 장점: 별도 서버 불필요 — 브라우저에서 영상 처리 완결, MIT 라이선스 오픈소스
현재 한계: 네이티브 대비 속도 저하, RTMP 라이브 스트리밍 미지원, IE 미지원

상세 정리

WebAssembly 개요: 브라우저가 HTML/CSS/JS 외 C 등으로 작성된 코드를 빠르게 실행하는 표준 (2015년 도입)
초기화: `ffmpeg.load({ coreURL, wasmURL, workerURL })` — toBlobURL()로 CDN의 core.js/wasm/worker.js를 blob URL로 변환 후 비동기 로드
트랜스코딩 흐름: `ffmpeg.writeFile(파일명, await fetchFile(url))` → `ffmpeg.exec(['-i', 'input.mp4', '-s', '300x200', '-c:a', 'copy', '-an', 'output.mp4'])` → `ffmpeg.readFile()` → Blob URL로 video src 설정
실시간 모니터링: `ffmpeg.on('log', ({ message }) => ...)`, `ffmpeg.on('progress', ({ progress }) => ...)`
Vue.js 컴포넌트에서 트랜스코딩 결과를 Uint8Array로 읽어 `URL.createObjectURL(new Blob([data.buffer]))` 로 재생
RTMP 라이브 스트리밍 테스트: `exec(['-re', '-i', 'input.mp4', '-f', 'flv', 'rtmp://...'])` 실행 후 중간에 로그 중단 — 공식 문서에서 라이브 스트리밍 미지원 확인
성능 원인: WebAssembly는 네이티브보다 빠른 실행을 목표로 하지만 실제 FFmpeg 수준의 워크로드에서는 여전히 격차 존재
게임 엔진(Unity, Unreal)도 WebAssembly 지원 — 고성능 네이티브 앱의 웹 이식 가능성 확대 중