วิธีที่เราสร้างการส่งออก MP4 แบบเบราเซอร์

ปัญหา

เครื่องมือแบบแอนิเมชันแบบเว็บดั้งเดิม ส่งออกไปโดยส่งเฟรมไปยังแม่ข่าย เข้ารหัสด้วย ffmpeg และส่งกลับผลลัพธ์ มีค่าใช้จ่าย 3 อย่าง เช่น การอัปโหลดแบนด์วิธ (การติดตามข้อมูลเฟรม), คํานวณเซิร์ฟเวอร์ (CPU/GPU) และความเป็นส่วนตัว (งานสร้างสรรค์ของคุณ ส่งโครงสร้างพื้นฐานของพรรคที่สาม).

PinePaper ไม่ทําแบบนี้ แฟ้ม MP4 ถูกสร้างขึ้นในเบราว์เซอร์ของคุณทั้งหมด ไม่มีเฟรมเหลืออุปกรณ์ของคุณ การเข้ารหัสเกิดขึ้น บนเครื่องเข้ารหัส บทความ นี้ อธิบาย ว่า อย่าง ไร.

โค เดก ซ์เว็บ: การเข้ารหัสวิดีโอฮาร์ดแวร์ในเบราว์เซอร์

The ~WebCodogs API ~ [W3C, 2021] ให้สิทธิ์เข้าถึงระดับต่ําในตัวเข้ารหัสวิดีโอและตัวถอดรหัสของเบราว์เซอร์ 2561. กรุงเทพฯ. กรุงเทพฯ. กรุงเทพฯ. ราชกิจจานุเบกษา. Safari และ Firefox มีการสนับสนุนบางส่วนหรือการทดลอง [ฉันสามารถใช้ 2026].

Cobecks Webcodes เปิดโปงส่วนเชื่อมต่อหลักสองตัว:

• VideoEncoder — ใช้กรอบวิดีโอดิบ, แสดงผลแบบเข้ารหัส H.264 (หรือ PDF8/VP9/AV1) บิตสตรีชัน
• VideoDecoder — รับส่วนการเข้ารหัส, ส่งออกเสียงเฟรมดิบ (ใช้สําหรับการเล่นเพลง, ไม่ส่งออก)

สําหรับส่งออก MP4 เราใช้ VideoEncoder การ ไหล ของ งาน:

1. สร้าง VideoEncoder ที่ปรับแต่งสําหรับ H.264 ตามความต้องการความละเอียดและอัตราส่งถ่ายข้อมูล
2. แต่ละเฟรมภาพเคลื่อนไหว: จับภาพผ้าใบเป็น VideoFrame, ป้อนข้อมูล ถึงตัวเข้ารหัส
3. สะสมชิ้นส่วนการเข้ารหัส (H.264 NAL หน่วย)
4. เพิ่มก้อนเข้าไปในบรรจุ 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. นี่ เป็น โปรไฟล์ ที่ เข้า กัน ได้ อย่าง กว้าง ขวาง ที่ สุด ของ เอช. โปรไฟล์ที่สูง (Min, High) เสนอการบีบอัดที่ดีขึ้น แต่ความเข้ากันได้น้อยกว่า[อังกฤษ, 2010].

อัตราส่งถ่ายข้อมูลควบคุมขนาดแฟ้มคุณภาพ vs ที่ 5 Mbps สําหรับคลิป 3 วินาที: 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

Video Encoder outs (NAL Legion). นี่ ไม่ ใช่ แฟ้ม ที่ เล่น ได้ — มัน จํา ต้อง ถูก ห่อ ไว้ ใน ตู้ MP4 ที่ เก็บ เวลา, ข้อมูล, และ เครื่อง กําหนด รหัส.

PinePaper ใช้ไลบรารี mp4-Muxer [วานี, mp4-moxer] สําหรับขั้นตอนนี้ มิวเซอร์ได้รับส่วนเข้ารหัสด้วยเวลาและสร้างแฟ้ม MP4 ที่ใช้งานได้:

• กล่อง ftyp: การแจ้งชนิดของแฟ้ม (เช่น ISom, ISo2, mp41)
• moov กล่อง: ข้อมูลกํากับภาพภาพยนตร์, คําอธิบายของแทร็ก, ตารางเวลา
• mdat กล่อง: ข้อมูลวิดีโอการเข้ารหัสจริง ๆ

ผลก็คือ MP4 ที่ใช้มาตรฐานเล่นทุกเครื่องเล่น, เบราว์เซอร์, และโซเชียลมีเดีย.

ขั้นที่ 4: ดาวน์โหลด

MP4 เสร็จสมบูรณ์แล้ว จะถูกคอมไพล์เป็น Blob, แปลงเป็น URL ผ่าน URL.createObjectURL() และเรียกเป็นการดาวน์โหลด:

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 muxing, และ ดาวน์โหลด — เกิด ขึ้น ใน เว็บเบราว์เซอร์. ไม่มีเซิร์ฟเวอร์ ไม่มีการอัพโหลด ไม่มีการประมวลผลที่สาม.

ประสิทธิภาพ

2023 MacBook Pro (M2). เข้ารหัสแอนิเมชัน 1080×1080 ที่ 30 FPS: เหตุการณ์ที่เกิดขึ้นใน ค.ศ

ความยาว	กรอบ	เวลายูนิโค้ด	ขนาดแฟ้ม
3 วินาที	90	~2 วินาที	~1.8 MB
10 วินาที	300	~6 วินาที	~5 MB
30 วินาที	900	~18 วินาที	~14 MB

การเข้ารหัสเร็วกว่าเรียลไทม์ เพราะฮาร์ดแวร์ H.264 ตัวเข้ารหัส (Intle Spick Settle, Apple Video Toolbox, NVIDIA NEVNC) รับมือกับการคํานวณอย่างหนัก เว็บโค เดกส์ของเบราว์เซอร์ ตัวแสดง API ของเครื่องเร่งอนุภาคเหล่านี้โปร่งใส [MCIILRE, 2021].

การรองรับเบราว์เซอร์

เบราว์เซอร์Comment	โปรแกรมจัดการเว็บ	H.264 Encode	สถานะ
Chorome 94+	ใช่	ใช่	การรองรับเต็มรูปแบบ
ขอบ 94+	ใช่	ใช่	การรองรับเต็มรูปแบบ (Chromeum)
โอเปร่า 80+	ใช่	ใช่	การรองรับเต็มรูปแบบ (Chromeum)
ซาฟารี 16. 4+	ส่วนประกอบ	ถอดรหัสเท่านั้น	ไม่พบรหัส
Firefox	ด้านหลังธง	ไม่	ตัวประมวลผล

สําหรับเบราว์เซอร์ที่ไม่มีโค เดกส์เว็บ PinePaper จะกลับมายังการส่งออกไปยัง GIF ซึ่งจะใช้ตัวเข้ารหัสจาวาสคริปต์บริสุทธิ์ (gif.js) และทํางานได้ทุกที่.

อ้างอิง

• ขอผมใช้ (2026). โปรแกรมสนับสนุนเว็บโค เดกส์ API Caniuse.com/Webodecs.
• McIlrough, D. (2021). WJognknowns. W3C WICG. Github.com/ Inisrobot/enisrobot.githb.io/blob/master/nigio-Inisrobot-linker-webcs.md.
• ริชาร์ดสัน, ไออีจี (2010). ♪H.264 ขั้นสูงวิดีโอบีบอัดมาตรฐาน*(DDE). ไวลี่ย์.
• Vani, A. mp4-moxer — จาวาสคริปต์ MP4 muxer for webcogr. kithub.com/enisrobot/enignrobot.gub.io.
• W3C (2021). เว็บโคเดคส์ API. การระบุประเภท W3c.jithub.io/Webcodecs/.

---

ส่งออกวิดีโอ MP4 สําหรับฟรี — ไม่มีเซิร์ฟเวอร์, ไม่มีลายเซ็น, ไม่มีลายน้ํา เปิด [กระดาษ Pine. studiod/editor] (/editor) และลอง.