कैसे हम ब्राउज़र-मूल 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.
• McIlroy, D. (2021)।. WebCodecs Explainer. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• रिचर्डसन. (2010)।. * H.264 उन्नत वीडियो संपीड़न मानक * (2nd ed)।. विली.
• वाणी, A. mp4-muxer — WebCodecs के लिए जावास्क्रिप्ट MP4 muxer।. github.com/nicerobot/nicerobot.github.io.
• W3C (2021)।. WebCodecs API विनिर्देश।. w3c.github.io/webcodecs/.

---

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