วิธีที่เราสร้างการส่งออก MP4 ไม่มีความต้องการเซิร์ฟเวอร์

ปัญหา

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

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

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

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

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

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

สําหรับส่งออก 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
});

Codec สตริง avc1.42E01E กําหนดโพรไฟล์ H.264. 2553 นี้เป็นโพรไฟล์ 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 maxing และดาวน์โหลด — มันเกิดขึ้นในเว็บเบราว์เซอร์. ไม่มีเซิร์ฟเวอร์. ไม่มีการอัพโหลด. ไม่มีการประมวลผลที่สาม.

ประสิทธิภาพ

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.
• แมก อิล รอย, ดี. (2021). โปรแกรมวิเคราะห์เว็บ. W3C WICG. github.com/enixrobot/ enixrobot.jithub.io/ blob/master/ enixrobot-voliel-webcs.md.
• ริชาร์ดสัน ไออีจี. (2010). ♪H.264 ขั้นสูงวิดีโอบีบอัดมาตรฐาน*(DDE). ไวลี่ย์.
• วา นี, เอ. mp4-moxer — จาวาสคริปต์ MP4 มิวเซอร์สําหรับเว็บโคเดค. github.com/inisrobot/nicerobot.github.io.
• W3C (2021). การระบุประเภทเว็บไซต์ API. w3c.jithub.io/webcodecs/.

---

ส่งออกวิดีโอ MP4 ฟรี — ไม่มีเซิร์ฟเวอร์ ไม่มีการลงชื่อ ไม่มีลายน้ํา. เปิด [กระดาษพินินทร์/edio/editor] (/editor) และลอง.