چگونه ما صادرات MP4 مرورگر را ساختیم - No Server مورد نیاز نیست

مشکل

ابزارهای انیمیشن سنتی مبتنی بر وب، ویدئو را با ارسال فریم به یک سرور، رمزگذاری آنها با ffmpeg و بازگشت نتیجه صادر می کنند. این سه هزینه دارد: پهنای باند آپلود (معادل داده های فریم)، محاسبه سرور (CPU / GPU زمان برای رمزگذاری)، و حریم خصوصی (کار خلاق شما حمل و نقل یک زیرساخت شخص ثالث).

PinePaper هیچ کدام از این کارها را انجام نمی دهد. فایل MP4 به طور کامل در مرورگر شما ایجاد شده است. هیچ فریمی دستگاه شما را ترک نمی کند. رمزگذاری بر روی رمزگذاری سخت افزار ماشین شما اتفاق می افتد. این مقاله توضیح می دهد که چگونه.

WebCodecs: Hardware Video Enator در مرورگر

*WebCodecs API ** [W3C، 2021] دسترسی به سطح پایین به رمزگذار ویدئویی داخلی مرورگر و رمزگشایی را فراهم می کند. آن را در Chrome 94 (سپتامبر 2021) ارسال شد و در حال حاضر در Chrome، Edge و Opera در دسترس است. Safari و فایرفاکس دارای پشتیبانی جزئی یا تجربی هستند (می توانم از آن استفاده کنم، 2026).

WebCodecs دو رابط کلیدی را افشا می کند:

• VideoEncoder - فریم های ویدئویی خام را می گیرد، خروجی ها H.264 (یا VP8/VP9/AV1) قطعات کوچک را کدگذاری می کنند
• VideoDecoder - قطعات رمزگذاری شده، فریم های خام (که برای پخش استفاده می شود، نه صادرات)

برای صادرات MP4، ما از VideoEncoder استفاده می کنیم. جریان کار:

1. ایجاد VideoEncoderQ پیکربندی شده برای H.264 در رزولوشن مورد نظر و bitrate
2. برای هر فریم انیمیشن: جذب بوم به عنوان VideoFrameQQQ، تغذیه آن به کدر
3. جمع آوری قطعات رمزگذاری شده (raw H.264 NAL Unit)
4. قسمت های موجود در یک ظرف MP4
5. ارائه فایل MP4 برای دانلود

مرحله 1: Configuration Configuration Configuration

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 Baseline را مشخص می کند. این سازگارترین پروفایل H.264 است - آن را در هر تلفن، مرورگر و پلت فرم رسانه های اجتماعی بازی می کند. پروفایل های عالی (Main, High) فشرده سازی بهتر اما سازگاری کمتر (Richardson, 2010) را ارائه می دهند.

کیفیت کنترل کیفیت در برابر اندازه فایل. در 5Mbps برای یک کلیپ 3 ثانیه: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. اندازه واقعی بر اساس پیچیدگی محتوا متفاوت است - صحنه های استاتیک بهتر از حرکت سریع فشرده می شوند.

مرحله دوم: Frame Capture و Encode

برای هر فریم در جدول زمانی انیمیشن:

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
}

جزئیات مهم: پس از پیشرفت انیمیشن و رندر بوم، شما باید قبل از ثبت، منتظر requestAnimationFrame0Q باشید. این تضمین می کند که GPU به پایان رساندن تولید پیکسل ها. بدون این هماهنگ سازی، شما یک بافر را ضبط می کنید و فریم هایی را تولید می کنید که خالی یا تکراری هستند.

مرحله 3: MP4 Muxing

ویدئوEncoder خروجی های خام H.264 (واحدهایNAL) این یک فایل قابل پخش نیست - آنها باید در یک ظرف MP4 که زمان، متاداده و پیکربندی کدک را ذخیره می کند، پیچیده شوند.

PinePaper از کتابخانه mpmuxer برای این مرحله استفاده می کند. muxer قطعات رمزگذاری شده را با timestamps دریافت می کند و یک فایل معتبر MP4 با موارد زیر ایجاد می کند:

• جعبه ftyp: اعلان نوع فایل (isom، iso2، mp41)
• جعبه moov: متاداده فیلم، شرح مسیر، جدول زمانی
• جعبه mdat: داده های ویدئویی رمزگذاری شده واقعی

نتیجه یک MP4 استاندارد است که در هر بازیکن ویدئویی، مرورگر و پلت فرم رسانه های اجتماعی بازی می کند.

مرحله 4: Download

MP4 تکمیل شده به عنوان Blob، تبدیل به URL از طریق URL.createObjectURL()1Q، و به عنوان یک دانلود ساخته شده است:

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 و دانلود - در مرورگر اتفاق می افتد. نه سرور آپلود نکنید. پردازش شخص ثالث.

عملکرد Performance

در سال 2023، MacBook Pro (M2)، ساخت انیمیشن 1080×1080 در 30 FPS:

مدت زمان	فریم ها	زمان کد	اندازه فایل
3 ثانیه	90	۲ ثانیه	~1.8 MB
10 ثانیه	300	۶ ثانیه	5 MB
30 ثانیه	900	18 ثانیه	14 MB

رمزگذاری سریع تر از زمان واقعی است، زیرا سخت افزار H.264 رمزگذار (Intel Quick Sync، Apple VideoToolbox، NVIDIA NVENC) محاسبات سنگین را اداره می کند. نمایندگان WebCodecs API مرورگر به این شتاب دهنده های سخت افزاری شفاف (McIlroy، 2021).

پشتیبانی از Browser

Browser	WebCodecs	H.264 کد	وضعیت
Chrome 94+	بله	بله	پشتیبانی کامل
Edge 94+	بله	بله	پشتیبانی کامل (Chromium)
اپرا 80+	بله	بله	پشتیبانی کامل (Chromium)
Safari 16.4+	جزئی	کد نویسی فقط	کد در دسترس نیست
فایرفاکس	پشت پرچم	هیچ	تجربی

برای مرورگرهای بدون WebCodecs، PinePaper به صادرات GIF بازمی گردد که از یک رمزگذار جاوا اسکریپت خالص (gif.js) استفاده می کند و در همه جا کار می کند.

ارجاعات

• می توانم استفاده کنم (2026). جدول پشتیبانی مرورگر WebCodecs API caniuse.com/webcodecs.
• McIlroy، D. (2021) WebCodecs توضیح دهنده. W3C WICG. github.com/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• ریچاردسون، I.E.G. (2010) استاندارد H.264 پیشرفته فشرده سازی ویدئو * (2nd ed) ویلی.
• Vani، A. mp4-muxer – جاوا اسکریپت MP4 muxer برای WebCodecs. github.com/nicerobot.github.io.
• W3C (20۲۱) مشخصات WebCodecs API W3c.github.io/webcodecs /.

---

ویدئو MP4 را به صورت رایگان – بدون سرور، بدون علامت، بدون علامت گذاری. باز [pinepaper.studio/editor] (/editorQ) و آن را امتحان کنید.