कैसे हम ब्राउज़र-मूल MP4 निर्यात का निर्माण - कोई सर्वर आवश्यक

समस्या

पारंपरिक वेब आधारित एनिमेशन उपकरण एक सर्वर पर फ्रेम भेजकर वीडियो निर्यात करते हैं, उन्हें ffmpeg के साथ एन्कोड करते हैं, और परिणाम वापस लौटते हैं। इसमें तीन लागतें हैं: बैंडविड्थ अपलोड करें (फ्रेम डेटा के मेगाबाइट्स को समाप्त करना), सर्वर कम्प्यूट (CPU / GPU समय एन्कोडिंग के लिए), और गोपनीयता (आपका रचनात्मक कार्य एक तीसरे पक्ष के बुनियादी ढांचे को स्थानांतरित करता है)।.

PinePaper इस में से कोई नहीं है। MP4 फ़ाइल पूरी तरह से आपके ब्राउज़र में बनाई गई है। कोई फ्रेम आपके डिवाइस को छोड़ देता है। एन्कोडिंग आपकी मशीन के हार्डवेयर वीडियो एनकोडर पर होता है। यह लेख बताता है कि कैसे।.

WebCodecs: ब्राउज़र में हार्डवेयर वीडियो एन्कोडिंग

WebCodecs API* [W3C, 2021] ब्राउज़र के अंतर्निहित वीडियो एनकोडर और डिकोडर के लिए कम स्तर की पहुंच प्रदान करता है। यह क्रोम 94 (सितंबर 2021) में भेज दिया गया था और अब क्रोम, एज और ओपेरा में उपलब्ध है। सफारी और फ़ायरफ़ॉक्स में आंशिक या प्रयोगात्मक समर्थन है [क्या मैं उपयोग कर सकता हूं, 2026]।.

WebCodecs दो प्रमुख इंटरफेस को उजागर करता है:

• VideoEncoder — कच्चे वीडियो फ्रेम लेता है, आउटपुट एनकोडेड H.264 (या VP8/VP9/AV1) बिटस्ट्रीम चंक
• VideoDecoder — एन्कोडेड चंक्स लेता है, कच्चे फ्रेम को आउटपुट करता है (प्लेबैक के लिए उपयोग किया जाता है, निर्यात नहीं)

MP4 निर्यात के लिए, हम VideoEncoder का उपयोग करते हैं। कार्यप्रवाह:

1. वांछित रिज़ॉल्यूशन और बिटरेट पर H.264 के लिए कॉन्फ़िगर किया गया VideoEncoder बनाएं
2. प्रत्येक एनीमेशन फ्रेम के लिए: कैनवास को VideoFrame के रूप में कैप्चर करें, इसे खिलाएं एनकोडर के लिए
3. एनकोडेड चंक (RA 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 बेसलाइन प्रोफाइल को निर्दिष्ट करता है। यह व्यापक रूप से संगत H.264 प्रोफ़ाइल है - यह हर फोन, ब्राउज़र और सोशल मीडिया प्लेटफॉर्म पर खेला जाता है। उच्च प्रोफाइल (मुख्य, उच्च) बेहतर संपीड़न प्रदान करते हैं लेकिन कम संगतता [Richardson, 2010]।.

बिटरेट गुणवत्ता बनाम फ़ाइल आकार को नियंत्रित करता है। एक 3-सेकंड क्लिप के लिए 5 एमबीपीएस पर: 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

वीडियो एनकोडर कच्चे H.264 चंकों (NAL इकाइयों) का उत्पादन करता है। ये एक खेलने योग्य फ़ाइल नहीं हैं - उन्हें एक MP4 कंटेनर में लपेटा जाना चाहिए जो टाइमिंग, मेटाडाटा और कोडेक कॉन्फ़िगरेशन को स्टोर करता है।.

PinePaper इस चरण के लिए *mp4-muxer लाइब्रेरी [Vani, mp4-muxer] का उपयोग करता है। muxer को बार-बार टैम्प्स के साथ एनकोडेड चंक प्राप्त होते हैं और साथ में एक वैध MP4 फाइल का उत्पादन करते हैं:

• ftyp बॉक्स: फ़ाइल प्रकार घोषणा (isom, iso2, mp41)
• moov बॉक्स: फिल्म मेटाडाटा, ट्रैक विवरण, टाइमिंग टेबल
• mdat बॉक्स: वास्तविक एन्कोडेड वीडियो डेटा

परिणाम एक मानक-compliant 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 muxing, और डाउनलोड - ब्राउज़र में होता है। कोई सर्वर नहीं कोई अपलोड नहीं। कोई तृतीय-पक्ष प्रसंस्करण नहीं।.

प्रदर्शन

2023 मैकबुक प्रो (M2) पर, 30 FPS पर 1080 × 1080 एनिमेशन को एन्कोड किया गया:

अवधि	फ्रेम	एनकोड समय	फाइल साइज
3 सेकंड	90	~2 सेकंड	~1.8 MB
10 सेकंड	300	~6 सेकंड	~5 MB
30 सेकंड	900	~18 सेकंड	~14 MB

एन्कोडिंग वास्तविक समय की तुलना में तेजी से है क्योंकि हार्डवेयर H.264 एनकोडर्स (इंटेल क्विक सिंक, Apple VideoToolbox, NVIDIA NVENC) भारी गणना संभालती है। ब्राउज़र के WebCodecs API ने इन हार्डवेयर त्वरकों को पारदर्शी रूप से [McIlroy, 2021] के लिए प्रतिनिधि किया।.

ब्राउज़र समर्थन

ब्राउज़र	WebCodec	H.264 एनकोडर	स्थिति
क्रोम 94+	हाँ	हाँ	पूर्ण समर्थन
एज 94+	हाँ	हाँ	पूर्ण समर्थन (क्रोमियम)
ओपेरा 80+	हाँ	हाँ	पूर्ण समर्थन (क्रोमियम)
सफारी 16.4+	आंशिक	केवल Decode	एनकोड उपलब्ध नहीं है
फ़ायरफ़ॉक्स	ध्वज के पीछे	नहीं	प्रायोगिक

WebCodecs के बिना ब्राउज़रों के लिए, PinePaper GIF निर्यात में वापस आता है, जो एक शुद्ध जावास्क्रिप्ट एनकोडर (gif.js) का उपयोग करता है और हर जगह काम करता है।.

संदर्भ

• क्या मैं (2026) का उपयोग कर सकता हूँ। WebCodecs API ब्राउज़र समर्थन तालिका। caniuse.com/webcodecs.
• मैकिलॉय, डी। (2021)। WebCodecs Explainer. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• रिचर्डसन, आई.ई.जी. (2010)। * H.264 उन्नत वीडियो संपीड़न मानक * (2nd ed)। विली.
• Vani, A. mp4-muxer — जावास्क्रिप्ट MP4 muxer for WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (2021)। WebCodecs API विनिर्देश। W3c.github.io/webcodecs/.

---

मुफ्त के लिए MP4 वीडियो निर्यात करें - कोई सर्वर, कोई साइनअप नहीं, कोई वॉटरमार्क नहीं। ओपन [pinepaper.studio/editor] (/editor) और इसे आज़माएं।.