Rendervid Nasadenie - Prehliadač, Node.js, Cloud a Docker Renderovanie

Úvod

Rendervid je navrhnutý na renderovanie kdekoľvek to váš pracovný postup vyžaduje. Či už potrebujete okamžité náhľady v prehliadači, produkčné video kódovanie na serveri alebo masívne paralelné renderovanie naprieč cloudovou infraštruktúrou, Rendervid poskytuje dedikovaný balík pre každé prostredie. Každý cieľ nasadenia zdieľa rovnaký systém šablón a knižnicu komponentov , takže šablóna, ktorá funguje v prehliadači, funguje identicky na AWS Lambda alebo v Docker kontajneri.

Táto príručka pokrýva všetky štyri prostredia nasadenia, možnosti renderovania dostupné v každom z nich a pokročilé funkcie ako motion blur, GIF export a optimalizáciu výkonu. Na konci budete presne vedieť, ktorá cesta nasadenia vyhovuje vášmu projektu a ako ju nakonfigurovať.

                        +---------------------+
                        |   JSON Šablóna      |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |   Prehliadač     |  |    Node.js     |  |     Cloud       |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Paralelní Pracovníci
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Prehliadačové Renderovanie

Balík @rendervid/renderer-browser zabezpečuje renderovanie na strane klienta úplne v prehliadači používateľa. Nie je potrebná žiadna serverová infraštruktúra. To z neho robí najrýchlejšiu cestu od šablóny k náhľadu.

Kedy Použiť Prehliadačové Renderovanie

• Náhľady v reálnom čase počas úpravy šablóny vo vizuálnom editore
• Webové aplikácie, ktoré potrebujú generovať video alebo obrázkové súbory za behu
• Prototypovanie nových šablón pred prechodom na serverové renderovanie
• Ľahké exporty, kde postačuje výstup MP4, WebM, PNG, JPEG alebo WebP

Inštalácia

npm install @rendervid/renderer-browser

Ako To Funguje

Prehliadačové renderovanie používa HTML Canvas API na vykreslenie každej snímky šablóny. Renderer prechádza každou scénou a vrstvou, aplikuje animácie a easing funkcie, kompozituje výsledok na canvas element a zachytáva každú snímku. Pre video výstup sú snímky kódované pomocou vstavaného MediaRecorder API prehliadača (WebM) alebo WebAssembly MP4 kodéra.

Podporované Výstupné Formáty

Príklad Kódu

import { BrowserRenderer } from "@rendervid/renderer-browser";

const renderer = new BrowserRenderer();

const template = {
  width: 1920,
  height: 1080,
  fps: 30,
  scenes: [
    {
      duration: 5,
      layers: [
        {
          type: "text",
          text: "Ahoj z Prehliadača",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Renderovanie na canvas element pre náhľad
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

// Export ako MP4
const mp4Blob = await renderer.render(template, {
  format: "mp4",
  quality: "standard",
});

// Export jednej snímky ako PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Obmedzenia Prehliadačového Renderovania

• Žiadny prístup k FFmpeg, takže H.265/HEVC a MOV nie sú dostupné
• GIF export vyžaduje Node.js renderer pre optimalizáciu palety
• Maximálne rozlíšenie závisí od limitov veľkosti Canvas prehliadača (zvyčajne 4096x4096 alebo 8192x8192)
• Rýchlosť renderovania závisí od CPU a GPU zariadenia klienta

Node.js Renderovanie

Balík @rendervid/renderer-node poskytuje serverové renderovanie s plnou integráciou FFmpeg. Používa Playwright alebo Puppeteer na renderovanie každej snímky v headless prehliadači, potom presmeruje snímky do FFmpeg pre profesionálne video kódovanie.

Kedy Použiť Node.js Renderovanie

• Produkčné video kódovanie s plnou podporou kodékov (H.264, H.265, VP9)
• Dávkové spracovanie stoviek alebo tisícov šablón v automatizovaných pipeline
• REST API, ktoré prijímajú JSON šablóny a vracajú renderované video
• CI/CD pipeline pre automatizované generovanie obsahu
• GIF export s optimalizáciou palety a kontrolou ditheringu

Inštalácia

# Inštalácia renderera
npm install @rendervid/renderer-node

# Inštalácia Playwright (obsahuje binárky prehliadača)
npx playwright install chromium

# Inštalácia FFmpeg (potrebný pre video kódovanie)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (cez Chocolatey)
choco install ffmpeg

Podporované Výstupné Formáty

Predvoľby Kvality Renderovania

Rendervid poskytuje štyri predvoľby kvality, ktoré riadia parametre kódovania:

GPU Akcelerácia

Node.js renderer podporuje hardvérovú akceleráciu na presunutie kódovania na GPU. To výrazne znižuje čas renderovania pre komplexné šablóny s mnohými vrstvami, vysokými rozlíšeniami a efektmi.

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/video.mp4",
  hardwareAcceleration: true,
});

GPU akcelerácia je dostupná na systémoch s kompatibilným hardvérom NVIDIA (NVENC), AMD (AMF) alebo Intel (Quick Sync). FFmpeg musí byť skompilovaný s podporou príslušného kodéra.

Príklad Kódu

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const template = {
  width: 1920,
  height: 1080,
  fps: 60,
  scenes: [
    {
      duration: 10,
      layers: [
        {
          type: "video",
          src: "/assets/background.mp4",
          fit: "cover",
        },
        {
          type: "text",
          text: "{{headline}}",
          fontSize: 64,
          color: "#ffffff",
          fontFamily: "Inter",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "slideInUp", duration: 0.8 },
            exit: { type: "fadeOut", duration: 0.5 },
          },
        },
      ],
    },
  ],
  inputs: {
    headline: {
      type: "text",
      label: "Nadpis",
      default: "Váš Produkt, Povýšený",
    },
  },
};

// Renderovanie s vlastnými vstupmi
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Počkať 2s na načítanie médií
  inputs: {
    headline: "Letná Akcia — 50% Zľava na Všetko",
  },
});

console.log(`Renderované: ${result.outputPath}`);
console.log(`Trvanie: ${result.duration}s`);
console.log(`Veľkosť súboru: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Dávkové Spracovanie

Pre spracovanie mnohých šablón v sekvencii použite batch API:

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alica" }, output: "alica.mp4" },
  { template: socialTemplate, inputs: { name: "Bob" }, output: "bob.mp4" },
  { template: socialTemplate, inputs: { name: "Karol" }, output: "karol.mp4" },
];

for (const job of templates) {
  await renderer.render(job.template, {
    format: "mp4",
    quality: "standard",
    outputPath: `/output/${job.output}`,
    inputs: job.inputs,
  });
}

Pre skutočné paralelné renderovanie na jednom stroji pozrite časť Docker Lokálne Renderovanie nižšie.

Cloudové Renderovanie

Balík @rendervid/cloud-rendering umožňuje distribuované, paralelné renderovanie naprieč cloudovou infraštruktúrou. Namiesto sekvenčného renderovania snímok na jednom stroji cloudové renderovanie rozdeľuje prácu naprieč mnohými pracovnými funkciami, ktoré renderujú snímky súčasne, potom ich zlúči do finálneho výstupu.

Kedy Použiť Cloudové Renderovanie

• Vysokovýkonné pipeline spracovávajúce stovky videí za hodinu
• Dlhý obsah, kde sekvenčné renderovanie je príliš pomalé
• Časovo citlivé pracovné zaťaženia, kde záleží na 10-50x zrýchlení
• Automatické škálovanie na zvládnutie nepredvídateľných nárastov dopytu

Architektúra

+------------------+
|   Vaša Aplikácia |
|  (Koordinátor)   |
+--------+---------+
         |
         | 1. Rozdelenie videa na úseky snímok
         v
+--------+---------+
|  Rozdeľovač      |
|  Úsekov          |
+--------+---------+
         |
         |  2. Distribúcia úsekov pracovníkom
         v
+--------+---+---+---+---+--------+
|  Pracovník 1 | Pracovník 2 | Pracovník N |
|  (Lambda/    | (Lambda/    | (Lambda/    |
|   Azure/     |  Azure/     |  Azure/     |
|   GCP)       |  GCP)       |  GCP)       |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Každý pracovník renderuje svoje snímky
      v            v           v
+-----+------+----+------+----+----+
|  Snímky    |  Snímky   |  Snímky |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |   Zlučovač      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Kombinovanie do finálneho videa
             v
     +-------+---------+
     | Objektové Úložisko |
     |  S3 / Blob / GCS   |
     +------------------+
             |
             | 5. Stiahnutie alebo poskytnutie
             v
     +-------+---------+
     |  Finálny Výstup  |
     |   video.mp4      |
     +------------------+

Ako to funguje krok za krokom:

1. Koordinátor analyzuje šablónu a určuje, koľko snímok je potrebné vyrenderovať na základe celkového trvania a FPS.
2. Rozdeľovač úsekov rozdeľuje celkový počet snímok na úseky (napr. 30 snímok na úsek pre 30fps video = 1 sekunda na úsek).
3. Každá pracovná funkcia dostane pridelený úsek (počiatočná snímka, koncová snímka), renderuje tieto snímky pomocou Node.js renderera a nahrá renderovaný segment do objektového úložiska.
4. Zlučovač stiahne všetky segmenty a spojí ich do finálneho videa pomocou FFmpeg.
5. Finálny výstup je uložený v objektovom úložisku cloudového poskytovateľa (S3, Azure Blob alebo GCS) a volitelne stiahnutý do lokálneho súborového systému.

Konfigurácia Cloudu

import { CloudRenderer } from "@rendervid/cloud-rendering";

const cloudRenderer = new CloudRenderer({
  provider: "aws", // "aws" | "azure" | "gcp" | "docker"
  quality: "standard", // "draft" | "standard" | "high"
  downloadToLocal: true,
  outputPath: "/output/final.mp4",
});

Úplné konfiguračné rozhranie:

interface CloudRenderConfig {
  provider: "aws" | "azure" | "gcp" | "docker";
  quality: "draft" | "standard" | "high";
  downloadToLocal: boolean;
  outputPath: string;

  awsConfig?: {
    region: string;
    s3Bucket: string;
    s3Prefix: string;
  };

  azureConfig?: {
    resourceGroup: string;
    storageAccount: string;
    containerName: string;
  };

  gcpConfig?: {
    projectId: string;
    bucketName: string;
    region: string;
  };

  dockerConfig?: {
    volumePath: string;
    workersCount: number;
  };
}

Nastavenie AWS Lambda

AWS Lambda je najbežnejší cieľ cloudového nasadenia. Každá pracovná funkcia beží v samostatnom Lambda vyvolaní, čo umožňuje masívny paralelizmus.

Predpoklady:

• AWS účet s prístupom k Lambda a S3
• Nakonfigurované AWS CLI
• Node.js 18+ Lambda runtime

Konfigurácia:

import { CloudRenderer } from "@rendervid/cloud-rendering";

const renderer = new CloudRenderer({
  provider: "aws",
  quality: "high",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  awsConfig: {
    region: "us-east-1",
    s3Bucket: "my-rendervid-output",
    s3Prefix: "renders/",
  },
});

const result = await renderer.render(template);
console.log(`Renderované za ${result.renderTime}ms`);
console.log(`Použitých pracovníkov: ${result.workersUsed}`);
console.log(`Výstup: ${result.outputUrl}`);

Typická konfigurácia AWS Lambda:

• Pamäť: 1024-3008 MB (viac pamäte = viac CPU = rýchlejšie renderovanie)
• Timeout: 300 sekúnd (5 minút)
• Dočasné úložisko: 512 MB - 10 GB
• Súbežnosť: 100-1000 (prispôsobte podľa pracovného zaťaženia)

Nastavenie Azure Functions

const renderer = new CloudRenderer({
  provider: "azure",
  quality: "standard",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  azureConfig: {
    resourceGroup: "rendervid-rg",
    storageAccount: "rendervidstore",
    containerName: "renders",
  },
});

const result = await renderer.render(template);

Nastavenie Google Cloud Functions

const renderer = new CloudRenderer({
  provider: "gcp",
  quality: "standard",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  gcpConfig: {
    projectId: "my-project-id",
    bucketName: "rendervid-output",
    region: "us-central1",
  },
});

const result = await renderer.render(template);

Porovnanie Nákladov

Všetci cloudoví poskytovatelia ponúkajú bezplatné úrovne, ktoré pokrývajú významné renderovanie počas vývoja a produkcie s nízkym objemom.

Výkonnostné Benchmarky

Cloudové renderovanie dosahuje 10-50x zrýchlenie v porovnaní so sekvenčným renderovaním na jednom stroji. Presné zrýchlenie závisí od počtu pracovníkov, zložitosti šablóny a trvania videa.

Dlhšie videá profitujú viac z paralelizmu, pretože réžia spustenia pracovníkov a zlučovania snímok je amortizovaná naprieč viacerými snímkami.

Docker Lokálne Renderovanie

Renderovanie založené na Docker vám poskytuje rovnakú architektúru paralelného renderovania ako cloudové renderovanie, ale beží úplne na vašom lokálnom stroji. Je úplne zadarmo, nevyužíva žiadne cloudové účty a je ideálne pre vlastné nasadenia, vývoj a tímy, ktoré chcú paralelné renderovanie bez cloudových nákladov.

Kedy Použiť Docker Renderovanie

• Bezplatné paralelné renderovanie bez účtov cloudových poskytovateľov
• Vlastná infraštruktúra za firewallom
• Vývoj a testovanie cloudových renderovacích workflow lokálne
• Malé až stredné pracovné zaťaženia, ktoré profitujú z paralelizmu, ale nepotrebujú automatické škálovanie

Inštalácia

# Uistite sa, že Docker je nainštalovaný a beží
docker --version

# Inštalácia balíka cloudového renderovania
npm install @rendervid/cloud-rendering

Konfigurácia

import { CloudRenderer } from "@rendervid/cloud-rendering";

const renderer = new CloudRenderer({
  provider: "docker",
  quality: "high",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  dockerConfig: {
    volumePath: "/tmp/rendervid-work",
    workersCount: 8, // Počet Docker kontajnerov na paralelné spustenie
  },
});

const result = await renderer.render(template);
console.log(`Renderované za ${result.renderTime}ms pomocou ${result.workersUsed} pracovníkov`);

Výber workersCount: Nastavte to na počet CPU jadier dostupných na vašom stroji. Napríklad 8-jadrový stroj funguje dobre s 8 pracovníkmi. Prekročenie počtu jadier pridáva réžiu z prepínania kontextu bez zlepšenia priepustnosti.

Docker Architektúra

+------------------+
|   Koordinátor    |
|  (váš proces)    |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Docker kontajnery
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Zdieľaný Zväzok       |
|    /tmp/rendervid-work   |
+-------------+-------------+
              |
              v
      +-------+--------+
      |   Zlučovač      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Každý Docker kontajner je samostatný pracovník s predinštalovaným Node.js, Playwright a FFmpeg. Pracovníci čítajú svoje pridelenia snímok zo zdieľaného zväzku, renderujú snímky a zapisujú výsledky späť. Koordinátor potom zlúči všetky segmenty do finálneho výstupu.

Motion Blur

Rendervid podporuje motion blur prostredníctvom časového supersamplinggu. Namiesto renderovania jedného okamihu na snímku renderer zachytáva viacero pod-snímok v mierne odlišných časových bodoch a zlučuje ich. To vytvára prirodzené rozmazanie, ktoré kamery vytvárajú, keď sa objekty pohybujú počas expozície.

Predvoľby Kvality

Konfigurácia

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // 16 vzoriek na snímku
  },
});

Ako Funguje Časový Supersampling

Snímka N (bez motion blur):    Snímka N (s motion blur, 5 vzoriek):

  Jeden okamih:                  5 pod-snímok zlúčených:

  +--------+                     +--------+   +--------+   +--------+
  |    O   |                     |   O    | + |    O   | + |     O  |  ...
  +--------+                     +--------+   +--------+   +--------+
                                          |
                                          v
                                 +--------+
                                 |  ~O~   |  <- Zlúčený výsledok
                                 +--------+

Každá pod-snímka posúva časovú os animácie o malý prírastok (1/fps delené počtom vzoriek). Pod-snímky sú potom alfa-zlúčené na vytvorenie finálnej snímky. Objekty, ktoré sa pohybovali medzi pod-snímkami, sa javia rozmazané pozdĺž svojej dráhy pohybu, zatiaľ čo statické prvky zostávajú ostré.

Úvahy o Výkone

Motion blur násobí čas renderovania proporcionálne k počtu vzoriek. 10-sekundové video pri 30fps má 300 snímok. S kvalitou high (16 vzoriek) musí renderer vygenerovať 4 800 pod-snímok namiesto 300. Používajte kvalitu draft počas vývoja a prepnite na high alebo ultra len pre finálne exporty.

Cloudové renderovanie a Docker paralelné renderovanie fungujú dobre s motion blur, pretože náklady na snímku sú rozdelené medzi pracovníkov. 16x zvýšenie na snímku delené medzi 16 pracovníkov má za následok približne rovnaký celkový čas renderovania ako render bez rozmazania na jednom stroji.

GIF Export

GIF export Rendervid ide ďaleko za jednoduchú konverziu snímok na GIF. Používa pipeline generovania palety FFmpeg na produkciu optimalizovaných, vysoko kvalitných animovaných GIFov s konfigurovateľným ditheringom, počtom farieb a obmedzeniami veľkosti súboru.

Ako Funguje Optimalizácia GIF

Štandardné GIF kódovanie používa jedinú globálnu paletu 256 farieb, čo často vedie k pruhom a zlej reprodukcii farieb. Rendervid používa dvojpriechodový prístup:

1. Priechod 1 (palettegen): Analyzuje všetky snímky na vygenerovanie optimálnej 256-farebnej palety, ktorá najlepšie reprezentuje plný rozsah farieb videa.
2. Priechod 2 (paletteuse): Znovu kóduje každú snímku pomocou optimalizovanej palety s voliteľným ditheringom pre hladké prechody.

Predvoľby Optimalizácie

Možnosti Ditheringu

Konfigurácia

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // Rozlíšenie 480x480
    colors: 256,            // 2-256 farebná paleta
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimalizácia na udržanie pod 5MB
    fps: 15,                // Nižšie FPS = menší súbor
  },
});

console.log(`Veľkosť GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Odhadovaná veľkosť bola: ${result.estimatedSizeKB} KB`);

Odhad Veľkosti Súboru a Auto-Optimalizácia

Keď nastavíte targetSizeKB, Rendervid odhadne veľkosť výstupného súboru pred renderovaním a automaticky upraví parametre (počet farieb, rozlíšenie, FPS) na splnenie cieľa. To je obzvlášť užitočné pre platformy s limitmi veľkosti súborov (napr. limit 50 MB Slack, typické 10 MB obmedzenie emailu).

// Auto-optimalizácia na zmestenie do 2MB emailového obmedzenia
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Architektúra Balíkov

Rendervid je organizovaný ako monorepo s 13 balíkmi. Každý balík má zameranú zodpovednosť a skladajú sa spolu na podporu každého scenára nasadenia.

@rendervid/
├── core                    Engine, typy, validácia, animačný systém
│   ├── Parser a validátor šablón (AJV + JSON Schema)
│   ├── Animačný engine (40+ predvolieb, 30+ easing funkcií)
│   ├── Systém vrstiev (text, obrázok, video, tvar, audio, skupina, lottie, vlastné)
│   └── Správa scén a prechodov (17 typov)
│
├── renderer-browser        Renderovanie na strane klienta
│   ├── Renderovanie snímok založené na Canvas
│   ├── MediaRecorder pre WebM export
│   └── WebAssembly MP4 kodér
│
├── renderer-node           Serverové renderovanie
│   ├── Playwright/Puppeteer headless prehliadač
│   ├── Integrácia FFmpeg (fluent-ffmpeg)
│   ├── GPU akcelerácia
│   └── Pipeline optimalizácie GIF
│
├── cloud-rendering         Multi-cloudová orchestrácia
│   ├── AWS Lambda poskytovateľ
│   ├── Azure Functions poskytovateľ
│   ├── Google Cloud Functions poskytovateľ
│   ├── Docker lokálny poskytovateľ
│   ├── Rozdeľovač a zlučovač úsekov
│   └── Adaptéry objektového úložiska (S3, Blob, GCS)
│
├── player                  Komponent prehrávača videa/šablóny
├── editor                  Vizuálny editor šablón (Zustand stav)
├── components              Pred-vyrobené React komponenty
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Definície a príklady šablón (100+)
├── testing                 Testovacie nástroje
│   ├── Vitest vlastné matchery
│   ├── Pomocníci snapshot testovania
│   └── Nástroje vizuálnej regresie
│
├── editor-playground       Vývojové prostredie editora
├── player-playground       Vývojové prostredie prehrávača
├── mcp                     Model Context Protocol server
└── docs                    VitePress dokumentačná stránka

Ako sa Balíky Spájajú

• @rendervid/core je základom. Každý iný balík závisí od neho pre typy šablón, validáciu a animačný systém.
• @rendervid/renderer-browser a @rendervid/renderer-node oba konzumujú core šablóny, ale výstup cez rôzne pipeline (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering zabaľuje renderer-node a distribuuje jeho prácu naprieč cloudovými funkciami alebo Docker kontajnermi.
• @rendervid/player a @rendervid/editor sú React-based UI balíky pre prehrávanie a vizuálnu úpravu. Editor používa Zustand pre správu stavu.
• @rendervid/components poskytuje pred-vyrobené React komponenty (AnimatedLineChart, AuroraBackground, atď.), ktoré môžu byť použité v šablónach.
• @rendervid/testing poskytuje Vitest matchery a pomocníkov snapshot testovania pre validáciu šablón.
• mcp je vrstva AI integrácie , ktorá vystavuje schopnosti Rendervid AI agentom cez Model Context Protocol.

Technologický Stack

Rendervid je postavený na modernom TypeScript stacku zvolenom pre spoľahlivosť, výkon a skúsenosť vývojára.

Testovanie

Rendervid obsahuje dedikovaný testovací balík (@rendervid/testing), ktorý poskytuje vlastné Vitest matchery, pomocníkov snapshot testovania a nástroje vizuálnej regresie pre validáciu šablón.

Vitest Vlastné Matchery

import { describe, it, expect } from "vitest";
import "@rendervid/testing/matchers";

describe("Šablóna Prezentácie Produktu", () => {
  it("mala by byť platná šablóna", () => {
    expect(template).toBeValidTemplate();
  });

  it("mala by mať správne rozmery", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("mala by obsahovať aspoň jednu textovú vrstvu", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("mala by mať animácie na nadpise", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Testovanie

Snapshot testovanie renderuje šablónu do obrázka a porovnáva ju s uloženou referenciou. Akákoľvek vizuálna zmena spôsobí zlyhanie testu, čo uľahčuje zachytenie nezamýšľaných regresií.

import { describe, it } from "vitest";
import { renderSnapshot } from "@rendervid/testing";

describe("Vizuálna Regresia Šablóny", () => {
  it("mala by zodpovedať referenčnému snapshotu na snímke 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("mala by zodpovedať referenčnému snapshotu v polovici", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Testovanie Vizuálnej Regresie v CI

Integrujte testy vizuálnej regresie do vašej CI/CD pipeline na zachytenie zmien renderovania pred dosiahnutím produkcie:

# .github/workflows/visual-regression.yml
name: Testy Vizuálnej Regresie
on: [pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npx playwright install chromium
      - run: npm ci
      - run: npm run test:visual

Optimalizácia Výkonu

Dosiahnutie najrýchlejších možných časov renderovania vyžaduje pochopenie, kde sa trávi čas a ktoré páky môžete potiahnuť. Tu sú najúčinnejšie optimalizačné stratégie.

1. Vyberte Správny Cieľ Nasadenia

2. Optimalizujte Zložitosť Šablóny

• Znížte počet vrstiev. Každá vrstva je renderovaná nezávisle. Menej vrstiev znamená menej kresliacich operácií na snímku.
• Používajte kvalitu draft počas vývoja a testovania. Prepnite na high alebo lossless len pre finálne exporty.
• Zjednodušte animácie počas náhľadov. Komplexné keyframe sekvencie s mnohými easing funkciami pridávajú výpočet na snímku.

3. Používajte renderWaitTime Múdro

Možnosť renderWaitTime pozastavuje renderovanie, aby umožnila načítanie externých médií (obrázky, videá, fonty). Nastavte to na minimálnu hodnotu, ktorá zabezpečí načítanie všetkých aktív. Hodnota 500-2000ms je typická. Príliš vysoké nastavenie mrhá časom na každej snímke.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 sekunda je zvyčajne dostačujúca
});

4. Využite Paralelné Renderovanie

Pre akékoľvek video dlhšie ako 10 sekúnd bude paralelné renderovanie (Docker alebo cloud) rýchlejšie ako sekvenčné renderovanie. Bod zvratu závisí od vášho hardvéru a cloudovej konfigurácie, ale ako pravidlo:

• < 10 sekúnd: Jeden Node.js renderer je v poriadku
• 10-60 sekúnd: Docker s 4-8 pracovníkmi
• 1-10 minút: Docker s 8-16 pracovníkmi alebo cloud
• > 10 minút: Cloudové renderovanie s 50+ pracovníkmi

5. Optimalizujte GIF Výstup

GIFy sú inherentne veľké. Na udržanie veľkostí súborov zvládnuteľných:

• Znížte FPS na 10-15. Väčšina GIFov vyzerá dobre pri znížených snímkových frekvenciách.
• Znížte rozlíšenie pomocou predvolieb (social, web, email).
• Obmedzte farby na 128 alebo menej pre jednoduché animácie.
• Používajte targetSizeKB na umožnenie Rendervid auto-optimalizovať parametre.
• Vyhnite sa ditheringu (none), ak na veľkosti súboru záleží viac ako na kvalite prechodov.

6. Povoľte GPU Akceleráciu

Na strojoch s kompatibilnými GPU môže hardvérovo akcelerované kódovanie znížiť časy renderovania o 2-5x pre kódovací krok. To je najúčinnejšie pre vysoké rozlíšenia (4K+) a vysoké bitrate výstupy.

7. Pred-načítajte Aktíva

Ak vaša šablóna odkazuje na externé obrázky alebo videá, pred-stiahnite ich do lokálneho úložiska pred renderovaním. Sieťová latencia počas renderovania je najbežnejšou príčinou pomalých alebo zlyhaných renderov.

Ďalšie Kroky

• Začnite s Rendervid: Navštívte prehľad Rendervid pre inštaláciu a prvé renderovanie
• Naučte sa systém šablón: Prečítajte si dokumentáciu Systému Šablón pre štruktúru JSON šablón, premenné, scény, vrstvy a animácie
• Preskúmajte komponenty: Prehliadnite Knižnicu Komponentov pre pred-vyrobené React komponenty ako AnimatedLineChart a AuroraBackground
• Nastavte AI integráciu: Pozrite si príručku AI Integrácie na pripojenie Claude Code, Cursor alebo Windsurf k Rendervid cez MCP
• Pozrite si zdroj: Navštívte Rendervid GitHub repozitár pre úplný zdrojový kód a 100+ príkladových šablón