우리는 브라우저 중립 MP4 수출을 건설하는 방법 - 서버 없음

문제

전통적인 웹 기반 애니메이션 도구 수출 비디오는 프레임을 서버로 전송하여, ffmpeg로 인코딩하고 결과를 반환합니다. 이 세 가지 비용: 업로드 대역폭 (프레임 데이터의 메가 바이트를 종료), 서버 컴퓨팅 (CPU / GPU 인코딩 시간), 개인 정보 보호 (당신의 창조적 인 작업은 제 3의 인프라를 전달).

PinePaper는 이것의 아무도 없습니다. MP4 파일은 브라우저에서 완전히 만들어집니다. 프레임은 장치를 떠나지 않습니다. 인코딩은 기계의 하드웨어 비디오 인코더에 발생합니다. 이 문서는 어떻게 설명합니다.

WebCodecs: 브라우저에서 하드웨어 비디오 인코딩

WebCodecs API [W3C, 2021]는 브라우저의 내장 비디오 인코더 및 디코더에 대한 낮은 수준의 액세스를 제공합니다. Chrome 94 (9 월 2021)에서 배송되었으며 Chrome, Edge 및 Opera에서 사용할 수 있습니다. Safari 및 Firefox에는 부분 또는 실험 지원이 있습니다. [사용, 2026].

WebCodecs는 두 가지 주요 인터페이스를 노출:

• VideoEncoder - 원시 비디오 프레임을 가지고, 인코딩 H.264 (또는 VP8 / VP9 / AV1) 비트 스트림 펑크를 출력
• VideoDecoder - 인코딩 된 펑크, 출력 원시 프레임 (플레이백에 사용, 수출하지)

MP4 수출을 위해, 우리는 VideoEncoder를 사용합니다. 작업 흐름:

1. 원하는 해상도와 비트레이트에서 H.264에 대한 VideoEncoder 구성
2. 각 애니메이션 프레임: VideoFrame로 캔버스를 캡처, 그것을 피드 엔코더
3. 인코딩된 펑크 (raw H.264 NAL 단위)를 수집합니다
4. Mux는 MP4 콘테이너로 펑크를
5. 다운로드 MP4 파일을 제공

단계 1: 인코더 윤곽

const encoder = new VideoEncoder({
  output: (chunk, metadata) => {
    // chunk.data contains encoded H.264 bytes
    // metadata.decoderConfig contains SPS/PPS on first chunk
    muxer.addVideoChunk(chunk, metadata);
  },
  error: (e) => console.error('Encoder error:', e)
});

encoder.configure({
  codec: 'avc1.42E01E',  // H.264 Baseline Profile Level 3.0
  width: 1080,
  height: 1080,
  bitrate: 5_000_000,    // 5 Mbps
  framerate: 30
});

코덱 문자열 avc1.42E01E는 H.264 기본 프로필을 지정합니다. 이것은 가장 널리 호환되는 H.264 프로필입니다 - 그것은 모든 전화, 브라우저 및 소셜 미디어 플랫폼에서 작동합니다. 더 높은 프로파일 (주요, 높은) 더 나은 압축을 제공하지만 더 적은 호환성 [Richardson, 2010].

Bitrate 컨트롤 품질 vs 파일 크기. 3초 클립을 위한 5 Mbps에: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. 실제 크기는 콘텐츠 복잡성에 따라 다릅니다 - 정적 장면은 빠른 모션보다 더 잘 압축합니다.

단계 2: 프레임 캡처 및 인코딩

애니메이션 타임라인의 각 프레임:

for (let frameNum = 0; frameNum < totalFrames; frameNum++) {
  const frameTime = frameNum / fps;

  // Advance animation to this time
  app.setPlaybackTime(frameTime);
  paper.view.draw();  // Full render (not view.update!)
  await new Promise(r => requestAnimationFrame(r));  // Wait for paint

  // Create VideoFrame from canvas
  const frame = new VideoFrame(canvas, {
    timestamp: frameNum * (1_000_000 / fps)  // microseconds
  });

  // Encode (keyframe every 2 seconds)
  encoder.encode(frame, {
    keyFrame: frameNum % (fps * 2) === 0
  });
  frame.close();  // Release GPU memory
}

중요한 세부 사항 : 애니메이션을 홍보하고 캔버스를 렌더링 한 후 캡처하기 전에 requestAnimationFrame를 기다립니다. 이것은 GPU가 완성 된 구성 픽셀을 보장합니다. 이 동기화 없이, 당신은 스테이플 버퍼를 붙잡고 공백 또는 복제되는 구조를 생성합니다.

단계 3: MP4 Muxing

VideoEncoder는 원시 H.264 펑크 (NAL 단위)를 출력합니다. 이들은 재생 가능한 파일이 아닙니다. 그들은 타이밍, 메타 데이터 및 코덱 구성을 저장하는 MP4 컨테이너에 포장해야합니다.

PinePaper는 mp4-muxer 라이브러리 [Vani, mp4-muxer]를 사용합니다. muxer는 타임스탬프와 인코딩 된 펑크를 받고 유효 MP4 파일을 생성합니다

• ftyp 박스: 파일 형식 선언 (isom, iso2, mp41)
• moov 박스: 영화 메타데이터, 트랙 설명, 타이밍 테이블
• mdat 상자: 실제 인코딩된 비디오 데이터

결과는 모든 비디오 플레이어, 브라우저 및 소셜 미디어 플랫폼에서 재생하는 표준 준수 MP4입니다.

단계 4: 다운로드

완성 된 MP4는 Blob로 조립되며 URL.createObjectURL()를 통해 URL로 변환되며 다운로드로 트리거됩니다

await encoder.flush();  // Wait for all frames to encode
const mp4Blob = muxer.finalize();
const url = URL.createObjectURL(new Blob([mp4Blob], { type: 'video/mp4' }));

const a = document.createElement('a');
a.href = url;
a.download = 'animation.mp4';
a.click();
URL.revokeObjectURL(url);

전체 파이프라인 - 프레임 캡처, H.264 인코딩, MP4 뮤싱, 다운로드 - 브라우저에서 발생합니다. 서버 없음. 다운로드 제3자 처리 없음.

- 연혁

2023 MacBook Pro (M2)에서 30 FPS에서 1080 × 1080 애니메이션을 인코딩하십시오

이름 *	회사 소개	인코딩 시간	파일 크기
3 초	90	2 초	~1.8 MB
10 초	300	6 초	5개 MB
30 초	900	~18 초	~14 메가바이트

인코딩은 하드웨어 H.264 인코딩 (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC)가 무거운 계산을 처리하기 때문에 실시간보다 빠릅니다. 브라우저의 WebCodecs API는 이러한 하드웨어 가속기에 대해 투명하게 [McIlroy, 2021].

브라우저 지원

이름 *	웹코덱	H.264 인코딩	주요연혁
크롬 94+	이름 *	이름 *	전체 지원
가장자리 94+	이름 *	이름 *	전체 지원 (Chromium)
오페라 80+	이름 *	이름 *	전체 지원 (Chromium)
사파리 16.4+	회사연혁	암호 만	비밀번호
파이어 폭스	플래그 뒤에	이름 *	회사 소개

WebCodecs없이 브라우저의 경우 PinePaper는 순수 JavaScript encoder (gif.js)를 사용하고 어디서나 작동합니다.

이름 *

• (2026)를 사용할 수 있습니다. WebCodecs API 브라우저 지원 테이블. caniuse.com/웹코드.
• 맥릴로이, D. (2021). 웹 코덱 설명. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• 리처드슨, I.E.G. (2010). *H.264 고급 비디오 압축 표준 * (2nd ed.). 위리.
• Vani, A. mp4-muxer — 웹 코덱을위한 자바 스크립트 MP4 muxer. github.com/nicerobot/nicerobot.github.io.
• W3C (2021). WebCodecs API 사양. w3c.github.io/webcodecs/.

---

무료 MP4 비디오 내보내기 - 서버 없음, 서명 없음, 워터 마크 없음. pinepaper.studio/editor를 열고 시도하십시오.