Remotion WebCodecs (deprecated)

⚠️ DEPRECATED: WebCodecs 패키지는 Remotion 4.0에서 deprecated되었다. 새로운 코드는 Mediabunny 또는 Client-side Rendering 사용을 권장한다. 본 페이지는 마이그레이션 참고용으로 보존한다.

📜 무엇이 deprecated되었나

@remotion/webcodecs 패키지의 low-level WebCodecs API 직접 래퍼가 deprecated되었다.

항목	상태
`@remotion/webcodecs` (low-level)	❌ Deprecated
`Mediabunny` (브라우저 폴리필)	✅ 권장
`renderMediaOnWeb` (high-level)	✅ 권장

자세한 마이그레이션: https://www.remotion.dev/docs/webcodecs/misconceptions

🧠 배경

WebCodecs는 브라우저에서 비디오를 디코딩/인코딩하는 low-level API다. Remotion 4.0 이전에는 이걸 직접 래핑해 제공했지만, 4.0에서 다음 두 가지로 분리:

Mediabunny — WebCodecs 미지원 브라우저용 폴리필
renderMediaOnWeb — High-level 렌더링 API (WebCodecs 추상화)

✅ 권장: `renderMediaOnWeb` 사용

import { renderMediaOnWeb } from "@remotion/renderer";

const { blob } = await renderMediaOnWeb({
  composition: { /* ... */ },
  serveUrl: "https://...",
  inputProps: { /* ... */ },
});

📌 자세한 가이드: Remotion Client-side Rendering

✅ 권장: Mediabunny 폴리필

Safari 등에서 WebCodecs 미지원 시 자동 폴리필:

import { MediabunnyMetadata } from "@remotion/mediabunny";

const { blob } = await renderMediaOnWeb({
  composition: { /* ... */ },
  serveUrl: "https://...",
  // Mediabunny 자동 적용
});

📌 https://www.remotion.dev/docs/mediabunny/

📚 기존 WebCodecs API (참고용)

기존에 @remotion/webcodecs를 쓰던 코드는 다음으로 마이그레이션:

Old API	New
`convertMedia()`	`renderMediaOnWeb`
`convert-a-video`	`renderMediaOnWeb`
`extract-frames`	Server-side `renderStill`
`WebCodecsController`	Mediabunny 내부 API

전체 마이그레이션 가이드: https://www.remotion.dev/docs/webcodecs/misconceptions

🔍 흔한 misconceptions (오해)

오해	진실
"WebCodecs = 빠르다"	WebCodecs는 low-level API. high-level로 감싸야 사용성 ↑
"WebCodecs 직접 써야 효율적"	Mediabunny가 더 안정적·호환성 좋음
"WebCodecs = 브라우저 호환"	Safari 16.4+ 만 지원. 구버전은 Mediabunny 필요

자세한 misconceptions: https://www.remotion.dev/docs/webcodecs/misconceptions

⚠️ 알아둘 점

새 프로젝트 — renderMediaOnWeb + Mediabunny 사용
기존 WebCodecs 코드 — 마이그레이션 가이드 따라서 Mediabunny로 이전
WebCodecs 자체 — 브라우저 표준은 살아있음. Remotion은 low-level 래퍼만 deprecate
자세한 API — https://www.remotion.dev/docs/webcodecs/ (legacy 문서)

📚 영역 구분

현재 권장: Remotion Client-side Rendering
폴리필: Mediabunny
한글 hub: Remotion AI & 도구

상위 문서: ← Remotion AI & 도구 출처: Remotion 공식 문서 — WebCodecs (deprecated) 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 WebCodecs 가이드 한글화, deprecated 표시)
2026-07-29	메타데이터 블록을 본문 하단으로 이동