Làm thế nào chúng tôi xây dựng được máy duyệt-Nate MP4 Xuất — Không cần máy phục vụ

Vấn đề

Các công cụ hoạt hình dựa trên web xuất khẩu video bằng cách gửi khung tới máy phục vụ, mã hóa chúng bằng ffpreg, và phục hồi kết quả. Điều này có ba chi phí: tải lên băng thông (cả mega byte dữ liệu khung), máy chủ tính toán (CPU/GPU thời gian cho mã hóa), và sự riêng tư (các phương tiện di chuyển công việc sáng tạo của bạn là cơ sở hạ tầng của bên thứ ba).

PinePaper không làm điều này. Tập tin MP4 được tạo hoàn toàn trong trình duyệt của bạn. Không có khung nào để lại thiết bị. Bộ mã hóa xảy ra trên bộ phận mã hóa video phần cứng của máy anh. Bài này giải thích cách.

WebCodecs: Bộ mã phim phần cứng trong bộ duyệt

WebCodecs API [W3C, 2021] cung cấp truy cập mức độ thấp cho bộ mã hóa và giải mã của trình duyệt. Nó được vận chuyển đến Chrome 94 (Septem 2021) và hiện nay có ở Chrome, Edge và Opera. [Tôi có thể sử dụng].

Các webCodec phơi bày hai giao diện phím:

• XQ — lấy khung video thô, kết xuất mã hóa H.264 (hoặc VP8/VP9/AV1) bit bit
• XQ — lấy các đoạn mã hóa, kết xuất khung thô (dùng cho phát lại, không phải xuất khẩu)

Đối với xuất khẩu MP4, chúng tôi sử dụng VideoEncoder. Dòng chảy công việc:

1. Tạo một VideoEncoder được cấu hình cho H.264 tại độ phân giải và bitrate mong muốn
2. Đối với mỗi khung hoạt hình: chụp bức tranh như một VideoFrame, cho nó ăn tới bộ mã hóa
3. Thu thập các đoạn mã hóa (ra H.264 đơn vị NAL)
4. Mux
5. Cung cấp tập tin MP4 để tải về

Cấu hình bộ phát âm 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
});

Mã hóa chuỗi avc1.42E01E xác định hồ sơ H.264. Đây là hồ sơ tương thích rộng rãi nhất của H.264 — nó được phát trên mọi điện thoại, trình duyệt và mạng xã hội. Hồ sơ cao cấp (Main, High) cung cấp nén tốt hơn nhưng ít tương thích hơn [Richardson, 2010.

Kích cỡ bitat điều khiển chất lượng tương ứng kích cỡ tập tin. Tại 5 Mbps cho một clip 3 giây: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Kích thước thật sự thay đổi tùy theo độ phức tạp nội dung — cảnh tĩnh nén tốt hơn là chuyển động nhanh.

Bước 2: Khung giữ và Bộ mã

Đối với mỗi khung trong dòng thời gian hoạt họa:

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
}

Chi tiết quan trọng: sau khi tiến hành hoạt họa và vẽ bức tranh, bạn phải đợi XQQ trước khi chụp. Điều này đảm bảo rằng GPU đã hoàn thành tính toán điểm ảnh. Không có đồng bộ hoá này, bạn nắm bắt một bộ đệm cũ và tạo ra khung trống hoặc nhân đôi.

Bước 3: MP4 Muxing

VideoEncoder xuất ra các mảng H.264 (các đơn vị tính trung lập). Đây không phải là một tập tin dễ chơi — chúng cần được gói trong một hộp MP4 chứa thời gian, siêu dữ liệu và cấu hình mã hóa.

PinePaper sử dụng thư viện mp4-muxer [Vini, muxer] cho bước này. muxer nhận các đoạn mã hóa với nhãn thời gian và tạo ra một tập tin MP4 hợp lệ:

• Hộp XQQ: khai báo kiểu tập tin (isom, iso2, mp41)
• Hộp XQQ: siêu dữ liệu phim, mô tả theo dõi, thanh thời gian
• Hộp mdat: dữ liệu video đã mã hóa

Kết quả là một chương trình MP4 có tiêu chuẩn trung lập đóng vai trò trong mỗi máy video, trình duyệt và mạng xã hội.

Bước 4: Tải về

MP4 hoàn tất được lắp ráp như một Blob, chuyển đổi thành một URL thông qua URL.createObjectURL(), và được kích hoạt như một tải về:

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);

Toàn bộ đường ống — chụp khung, mã hóa H.264, MP4 muxing và tải xuống — xảy ra trong trình duyệt. Không có máy chủ. Không tải lên. Không xử lý bên thứ ba.

Hiệu suất

Vào năm 2023 MacBook Pro (M2), mã hóa một hoạt hình 108×1080 tại 30 FPS:

Thời gian	Khung	Thời gian mã hoá	Cỡ tập tin
3 giây	90	~2 giây	~1.8 MB
0 giây	300	6 giây	-5 MB
0 giây	900	-18 giây	-14 MB

Bộ mã hóa nhanh hơn thời gian thực bởi vì phần cứng H.264 (đồng bộ tốc độ cao, hộp phim Apple, NVIDIA NVENC) xử lý các tính toán nặng nề. Các đại biểu API của trình duyệt đến những máy gia tốc phần cứng một cách minh bạch [McIroy, 2021].

Hỗ trợ bộ duyệt

Bộ duyệt	Giao diện MạngName	Bộ mã H.264	Trạng thái
Chrome 94+	Vâng	Vâng	Hỗ trợ đầy đủ
Cạnh 94+	Vâng	Vâng	Hỗ trợ đầy đủ (Trung tâm)
Opera 80+	Vâng	Vâng	Hỗ trợ đầy đủ (Trung tâm)
Comment	Một phần	Chỉ mã hoá	Mật mã không sẵn sàng
Firefox	Sau cờ	Không	Thí nghiệm

Đối với những trình duyệt không có WebCodecs, PinePaper rơi trở lại xuất khẩu GIF, dùng bộ mã hóa JavaScript tinh khiết (gif.js) và hoạt động mọi nơi.

Tham khảo

• Tôi có thể dùng (2026). Bảng hỗ trợ trình duyệt API caniuse.com/web codecs.
• McIroy, D. (2021). WebCodecs explainer. W3C WICG. gittub.com/nicerobot/nicerobot.gitib.io/bball/master/nicerobot-webcs.md.
• Richardson, I.E.G. (). The H.264 Progration Videopion Standard (2nd ed.). Wiley.
• Vani, A.mp4-muxer — JavaScript MP4 muxer cho WebCodecs. gittub.com/nicerobot/nicerobot.github.io.
• W3C (2021). WebCodecs API cụ thể. w3c.github.io/web codecs/.

---

Xuất đoạn phim MP4 miễn phí — không máy chủ, không đăng ký, không dấu ấn. Mở [papt. studio/tor] và thử nó.