چگونه ما صادرات 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. یک VideoEncoder پیکربندی شده برای H.264 در رزولوشن مورد نظر و bitrate
2. برای هر فریم انیمیشن: ضبط بوم به عنوان VideoFrame، تغذیه آن به کدر
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) را ارائه می دهند.

کیفیت کنترل کیفیت در برابر اندازه فایل. در 5 Mbps برای یک کلیپ 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
}

جزئیات مهم: پس از پیشرفت انیمیشن و رندر بوم، شما باید قبل از ثبت نام برای requestAnimationFrame صبر کنید. این تضمین می کند که 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()، و به عنوان یک دانلود:

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. (۲۰۲۱). توضیح دهنده WebCodecs. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/master/nicerobot-exper-webcodecs.md.
• ریچاردسون، I.E.G. (2010). استاندارد H.264 پیشرفته فشرده سازی ویدئو * (2nd ed). ویلی.
• وان، A. mp4-muxer MP4 muxer برای WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (20۲۱). مشخصات WebCodecs API. w3c.github.io/webcodecs /.

---

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