Jinsi Tulivyojenga Uuzaji wa Msaidizi wa MP4 - Hakuna Server Inahitajika

Tatizo la

Zana za uhuishaji za jadi za mtandao zinauza video kwa kutuma sura kwenye seva, zinawaunganisha na ffmpeg, na kurudi matokeo. Hii ina gharama tatu: kupakia bandwidth (sending megabytes ya data ya sura), kompyuta ya seva (CPU / GPU wakati wa encoding), na faragha (kazi yako ya ubunifu hupita miundombinu ya mtu wa tatu).

Hata hivyo, PinePaper haiwezi kufanya hivyo. Faili ya MP4 imeundwa kabisa katika kivinjari chako. Hakuna njia ya mkato ya kuacha kompyuta yako. Encoding hutokea kwenye encoder ya video ya vifaa vya mashine yako. Makala hii inaeleza jinsi.

WebCodecs: Vifaa vya Video Encoding katika Browser

WebCodecs API [W3C, 2021] hutoa upatikanaji wa ngazi ya chini kwa encoder ya video ya kivinjari iliyojengwa na decoder. Ilisafirishwa katika Chrome 94 (Septemba 2021) na sasa inapatikana katika Chrome, Edge, na Opera. Safari na Firefox zina msaada wa sehemu au majaribio (Ninaweza kutumia, 2026).

WebCodecs inaonyesha interfaces mbili muhimu:

• Wa wa wa wa wa wa wa wa inachukua sura za video ghafi, matokeo yaliyosimbwa H.264 (au VP8 / VP9 / AV1) bitstream chunks
• Wa wa wa wa wa wa wa wa inachukua chunks zilizosimbwa, matokeo ya sura mbichi (zilizotumika kwa uchezaji, sio kuuza nje)

Kwa usafirishaji wa MP4, tunatumia VideoEncoder. Kazi ya workflow:

1. Unda VideoEncoder iliyoandaliwa kwa H.264 katika azimio lililotaka na bitrate
2. Kwa kila sura ya uhuishaji: kukamata turuba kama VideoFrame, kuilisha kwa hisani ya RaiaMwema
3. Kukusanya chunks zilizosimbwa (sehemu za H.264 NAL)
4. Mux chunks katika chombo cha MP4
5. Kutoa faili ya MP4 kwa kupakua

Hatua ya 1: 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
});

Kamba ya codec avc1.42E01E inaelezea Wasifu wa Msingi wa H.264. Hii ni maelezo ya kina zaidi ya H.264 inacheza kwenye kila simu, kivinjari, na jukwaa la vyombo vya habari vya kijamii. Wasifu wa juu (Main, High) hutoa compression bora lakini utangamano mdogo (Richardson, 2010).

Udhibiti wa ubora wa faili vs ukubwa wa faili. Katika 5 Mbps kwa kipande cha pili cha 3: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Ukubwa halisi hutofautiana kulingana na utata wa maudhui - matukio ya static yanasisitiza bora kuliko mwendo wa haraka.

Hatua ya 2: Ingia na Ingia

Kwa kila sura katika ratiba ya uhuishaji:

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
}

Maelezo muhimu: baada ya kuendeleza uhuishaji na kutoa turubai, lazima kusubiri requestAnimationFrame kabla ya kukamata. Hii inahakikisha GPU imekamilisha saizi za kuunganisha. Bila synchronization hii, unakamata buffer stale na kuzalisha muafaka kwamba ni tupu au duplicated.

Hatua ya 3: MP4 Muxing

VideoEncoder hutoa chunks za H.264 (vitengo vya NAL). Haya si mambo ya mchezo wanahitaji kufungwa katika chombo cha MP4 ambacho huhifadhi muda, metadata, na usanidi wa kificho.

PinePaper inatumia mp4-muxer maktaba [Vani, mp4-muxer] kwa hatua hii. Muxer inapata chunks zilizosimbwa na timestamps na hutoa faili halali ya MP4 na:

• Sanduku la ftyp: tamko la aina ya faili (isom, iso2, mp41)
• Sanduku la moov: metadata ya filamu, maelezo ya kufuatilia, meza za muda
• Hifadhi ya mdat: data halisi ya video iliyosimbwa

Matokeo yake ni MP4 ya viwango ambayo inacheza katika kila mchezaji wa video, kivinjari, na jukwaa la vyombo vya habari vya kijamii.

Hatua ya 4: Download

MP4 iliyokamilishwa imekusanyika kama Blob, imebadilishwa kuwa URL kupitia URL.createObjectURL(), na ilisababishwa kama kupakua:

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);

Jumla ya mafuta - kukamata sura, H.264 encoding, MP4 muxing, na download - hii hutokea katika browser. Hakuna huduma ya seva. Hakuna cha kuongeza. Hakuna usindikaji wa mtu wa tatu.

Utendaji wa Utendaji

Juu ya 2023 MacBook Pro (M2), encoding 1080 × 1080 uhuishaji katika 30 FPS:

Muda wa muda	Ya Frames	Kipindi cha Maombi	Ukubwa wa faili
sekunde ya 3	90	sekunde mbili	~1.8 MB
dakika ya 10	300	sekunde ya 6	5 MB YA
sekunde ya 30	900	· dakika ya 18	14 MB

Encoding ni haraka kuliko wakati halisi kwa sababu vifaa H.264 encoders (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) kushughulikia kompyuta nzito. WebCodecs API wajumbe kwa vifaa hivi accelerators uwazi [McIlroy, 2021].

Chagua urefu. Bar zote mbili zinashiriki kiwango kimoja, kwa hivyo bar ya encode inakaa ndani ya picha zote na wizara ya mambo ya ndani ya nchi. ................................................................... hatua ya tatu ni kuonyesha kuwa kazi kwa mujibu wa kanuni, ambayo ni sehemu ya mstari mmoja haiwezi kuonyesha.

Msaada wa Browser

Browser	Mtandao wa Wavuti	H.264 Encode	Hali ya
Ukubwa wa 4 +	Ya	Ya	Msaada kamili
Ya 94+	Ya	Ya	Msaada kamili (Chromium)
Opera ya 80 +	Ya	Ya	Msaada kamili (Chromium)
Safari ya 16.4+	Sehemu ya	Decode ya pekee	Encode haipatikani
Firefox	Nyuma ya Bendera	Hakuna cha	Majaribio ya

Kwa vivinjari bila WebCodecs, PinePaper inarudi kwenye usafirishaji wa GIF, ambayo hutumia encoder safi ya JavaScript (gif.js) na inafanya kazi kila mahali.

Marejeo ya

• Unaweza kufanya hivyo (2026). Msaada wa kivinjari cha API. unaweza kutumia.com/webcodecs.
• Kwa upande wake, Dk. (mwaka wa 2021). Ufafanuzi wa WebCodecs. W3C YA UX. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• Richardson, I.E.G. ya mwaka (2010). H.264 Advanced Video Compression Standard * (2nd ed). Ya Wiley.
• Kwa upande wake, A. m4c ya m-pesa - JavaScript MP4 muxer kwa WebCodecs. github.com/nicerobot/nicerobot.github.io.
• WA WA WA WA WA WA WA WA WA WA WA WA. Maoni ya API. w3c.github.io/webcodecs/.

---

Video ya MP4 kwa bure hakuna seva, hakuna ishara, hakuna watermark. Funga mlango na uacha ladha.