Rendervid Nasazení - Renderování v Prohlížeči, Node.js, Cloudu a Dockeru

Úvod

Rendervid je navržen pro renderování kdekoli, kde to váš pracovní postup vyžaduje. Ať už potřebujete okamžité náhledy v prohlížeči, produkční kódování videa na serveru nebo masivně paralelní renderování napříč cloudovou infrastrukturou, Rendervid poskytuje dedikovaný balíček pro každé prostředí. Každý cíl nasazení sdílí stejný systém šablon a knihovnu komponent , takže šablona, která funguje v prohlížeči, funguje identicky na AWS Lambda nebo v Docker kontejneru.

Tato příručka pokrývá všechna čtyři prostředí nasazení, možnosti renderování dostupné v každém z nich a pokročilé funkce jako motion blur, export GIF a optimalizaci výkonu. Na konci budete přesně vědět, která cesta nasazení vyhovuje vašemu projektu a jak ji nakonfigurovat.

                        +---------------------+
                        |   JSON Template     |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |     Browser      |  |    Node.js     |  |     Cloud       |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Parallel Workers
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Renderování v Prohlížeči

Balíček @rendervid/renderer-browser zpracovává renderování na straně klienta zcela v prohlížeči uživatele. Není vyžadována žádná serverová infrastruktura. To z něj činí nejrychlejší cestu od šablony k náhledu.

Kdy Použít Renderování v Prohlížeči

• Náhledy v reálném čase během úpravy šablony ve vizuálním editoru
• Webové aplikace, které potřebují generovat video nebo obrázkové assety za běhu
• Prototypování nových šablon před nasazením renderování na serveru
• Lehké exporty, kde stačí výstup MP4, WebM, PNG, JPEG nebo WebP

Instalace

npm install @rendervid/renderer-browser

Jak to Funguje

Renderování v prohlížeči používá HTML Canvas API k vykreslení každého snímku šablony. Renderer prochází každou scénu a vrstvu, aplikuje animace a funkce easing, kompozituje výsledek na canvas element a zachycuje každý snímek. Pro video výstup jsou snímky kódovány pomocí vestavěného MediaRecorder API prohlížeče (WebM) nebo MP4 enkodéru založeného na WebAssembly.

Podporované Výstupní Formáty

Pří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 Prohlížeče",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Renderovat na canvas element pro náhled
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Exportovat jeden snímek jako PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Omezení Renderování v Prohlížeči

• Žádný přístup k FFmpeg, takže H.265/HEVC a MOV nejsou k dispozici
• Export GIF vyžaduje Node.js renderer pro optimalizaci palety
• Maximální rozlišení závisí na limitech velikosti Canvas prohlížeče (typicky 4096x4096 nebo 8192x8192)
• Rychlost renderování závisí na CPU a GPU klientského zařízení

Node.js Renderování

Balíček @rendervid/renderer-node poskytuje renderování na straně serveru s plnou integrací FFmpeg. Používá Playwright nebo Puppeteer k renderování každého snímku v headless prohlížeči, poté přesměrovává snímky do FFmpeg pro profesionální kódování videa.

Kdy Použít Node.js Renderování

• Produkční kódování videa s plnou podporou kodeků (H.264, H.265, VP9)
• Dávkové zpracování stovek nebo tisíců šablon v automatizovaných pipeline
• REST API, které přijímá JSON šablonu a vrací renderované video
• CI/CD pipeline pro automatizované generování obsahu
• Export GIF s optimalizací palety a kontrolou ditheringu

Instalace

# Instalace rendereru
npm install @rendervid/renderer-node

# Instalace Playwright (včetně binárních souborů prohlížeče)
npx playwright install chromium

# Instalace FFmpeg (vyžadováno pro kódování videa)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (přes Chocolatey)
choco install ffmpeg

Podporované Výstupní Formáty

Předvolby Kvality Renderování

Rendervid poskytuje čtyři předvolby kvality, které řídí parametry kódování:

GPU Akcelerace

Node.js renderer podporuje hardwarovou akceleraci pro přenesení kódování na GPU. To výrazně snižuje čas renderování pro komplexní šablony s mnoha vrstvami, vysokými rozlišeními a efekty.

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

GPU akcelerace je k dispozici na systémech s kompatibilním hardwarem NVIDIA (NVENC), AMD (AMF) nebo Intel (Quick Sync). FFmpeg musí být zkompilován s odpovídající podporou enkodéru.

Pří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, Vylepšený",
    },
  },
};

// Renderovat s vlastními vstupy
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Počkat 2s na načtení médií
  inputs: {
    headline: "Letní Výprodej — 50% Sleva na Vše",
  },
});

console.log(`Renderováno: ${result.outputPath}`);
console.log(`Trvání: ${result.duration}s`);
console.log(`Velikost souboru: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Dávkové Zpracování

Pro zpracování mnoha šablon v sekvenci použijte dávkové API:

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

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alena" }, output: "alena.mp4" },
  { template: socialTemplate, inputs: { name: "Bedřich" }, output: "bedrich.mp4" },
  { template: socialTemplate, inputs: { name: "Cyril" }, output: "cyril.mp4" },
];

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

Pro skutečně paralelní renderování na jednom stroji viz sekce Docker Lokální Renderování níže.

Cloud Renderování

Balíček @rendervid/cloud-rendering umožňuje distribuované, paralelní renderování napříč cloudovou infrastrukturou. Místo sekvenčního renderování snímků na jednom stroji cloud renderování rozdělí práci napříč mnoha pracovními funkcemi, které renderují snímky současně, poté je sloučí do finálního výstupu.

Kdy Použít Cloud Renderování

• Pipeline s vysokou propustností zpracovávající stovky videí za hodinu
• Dlouhý obsah, kde je sekvenční renderování příliš pomalé
• Časově kritické pracovní zátěže, kde záleží na 10-50x zrychlení
• Automatické škálování pro zvládnutí nepředvídatelných špiček poptávky

Architektura

+------------------+
|   Your App       |
|  (Coordinator)   |
+--------+---------+
         |
         | 1. Split video into frame chunks
         v
+--------+---------+
|   Chunk Splitter |
+--------+---------+
         |
         |  2. Distribute chunks to workers
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Each worker renders its frames
      v            v           v
+-----+------+----+------+----+----+
|  Frames    |  Frames   |  Frames |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Combine into final video
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Download or serve
             v
     +-------+---------+
     |   Final Output   |
     |   video.mp4      |
     +------------------+

Jak to funguje krok za krokem:

1. Koordinátor analyzuje šablonu a určuje, kolik snímků je třeba renderovat na základě celkového trvání a FPS.
2. Rozdělovač částí rozdělí celkový počet snímků na části (např. 30 snímků na část pro 30fps video = 1 sekunda na část).
3. Každá pracovní funkce obdrží přiřazení části (počáteční snímek, koncový snímek), renderuje tyto snímky pomocí Node.js rendereru a nahraje renderovaný segment do objektového úložiště.
4. Slučovač stáhne všechny segmenty a spojí je do finálního videa pomocí FFmpeg.
5. Finální výstup je uložen v objektovém úložišti poskytovatele cloudu (S3, Azure Blob nebo GCS) a volitelně stažen do lokálního souborového systému.

Konfigurace 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é rozhraní konfigurace:

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

Nastavení AWS Lambda

AWS Lambda je nejběžnější cíl cloudového nasazení. Každá pracovní funkce běží v samostatném Lambda volání, což umožňuje masivní paralelismus.

Předpoklady:

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

Konfigurace:

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(`Renderováno za ${result.renderTime}ms`);
console.log(`Použito pracovníků: ${result.workersUsed}`);
console.log(`Výstup: ${result.outputUrl}`);

Typická konfigurace AWS Lambda:

• Paměť: 1024-3008 MB (více paměti = více CPU = rychlejší renderování)
• Timeout: 300 sekund (5 minut)
• Dočasné úložiště: 512 MB - 10 GB
• Souběžnost: 100-1000 (upravte podle pracovní zátěže)

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

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

Srovnání Nákladů

Všichni poskytovatelé cloudu nabízejí bezplatné úrovně, které pokrývají významné renderovací pracovní zátěže během vývoje a produkce s nízkým objemem.

Výkonnostní Benchmarky

Cloud renderování dosahuje 10-50x zrychlení ve srovnání se sekvenčním renderováním na jednom stroji. Přesné zrychlení závisí na počtu pracovníků, složitosti šablony a trvání videa.

Delší videa mají větší prospěch z paralelismu, protože režie spuštění pracovníků a slučování snímků je amortizována napříč více snímky.

Docker Lokální Renderování

Renderování založené na Dockeru vám poskytuje stejnou architekturu paralelního renderování jako cloud renderování, ale běží zcela na vašem lokálním stroji. Je zcela zdarma, nepoužívá žádné cloudové účty a je ideální pro self-hosted nastavení, vývoj a týmy, které chtějí paralelní renderování bez cloudových nákladů.

Kdy Použít Docker Renderování

• Bezplatné paralelní renderování bez účtů poskytovatelů cloudu
• Self-hosted infrastruktura za firewallem
• Vývoj a testování workflow cloudového renderování lokálně
• Malé až střední pracovní zátěže, které mají prospěch z paralelismu, ale nepotřebují automatické škálování

Instalace

# Ujistěte se, že je Docker nainstalován a běží
docker --version

# Instalace balíčku cloud rendering
npm install @rendervid/cloud-rendering

Konfigurace

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 kontejnerů běžících paralelně
  },
});

const result = await renderer.render(template);
console.log(`Renderováno za ${result.renderTime}ms pomocí ${result.workersUsed} pracovníků`);

Výběr workersCount: Nastavte na počet dostupných CPU jader na vašem stroji. Například 8-jádrový stroj dobře funguje s 8 pracovníky. Překročení počtu jader přidává režii z přepínání kontextu bez zlepšení propustnosti.

Docker Architektura

+------------------+
|   Coordinator    |
|  (your process)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Docker kontejnery
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Shared Volume          |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Každý Docker kontejner je samostatný pracovník s předinstalovaným Node.js, Playwright a FFmpeg. Pracovníci čtou své přiřazení snímků ze sdíleného svazku, renderují snímky a zapisují výsledky zpět. Koordinátor poté sloučí všechny segmenty do finálního výstupu.

Motion Blur

Rendervid podporuje motion blur prostřednictvím časového supersamplingу. Místo renderování jediného okamžiku na snímek renderer zachycuje více pod-snímků v mírně odlišných časových bodech a prolíná je dohromady. To vytváří přirozené rozmazání, které kamery vytvářejí, když se objekty pohybují během expozice.

Předvolby Kvality

Konfigurace

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

Jak Funguje Časový Supersampling

Frame N (bez motion blur):          Frame N (s motion blur, 5 vzorků):

  Jediný okamžik:                    5 pod-snímků prolnutých:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Prolnutý výsledek
                                     +--------+

Každý pod-snímek posune časovou osu animace o malý přírůstek (1/fps děleno počtem vzorků). Pod-snímky jsou poté alfa-prolnuty pro vytvoření finálního snímku. Objekty, které se pohybovaly mezi pod-snímky, vypadají rozmazané podél své dráhy pohybu, zatímco stacionární prvky zůstávají ostré.

Výkonnostní Úvahy

Motion blur násobí čas renderování úměrně počtu vzorků. 10sekundové video při 30fps má 300 snímků. S kvalitou high (16 vzorků) musí renderer vygenerovat 4 800 pod-snímků místo 300. Během vývoje používejte kvalitu draft a přepněte na high nebo ultra pouze pro finální exporty.

Cloud renderování a Docker paralelní renderování dobře fungují s motion blur, protože náklady na snímek jsou distribuovány napříč pracovníky. 16x zvýšení na snímek dělené 16 pracovníky má za následek zhruba stejný celkový čas renderování jako render bez rozmazání na jednom stroji.

Export GIF

Export GIF v Rendervid jde daleko za jednoduchou konverzi snímek-na-GIF. Používá pipeline generování palety FFmpeg k produkci optimalizovaných, vysoce kvalitních animovaných GIFů s konfigurovatelným ditheringem, počtem barev a omezeními velikosti souboru.

Jak Funguje Optimalizace GIF

Standardní kódování GIF používá jednu globální paletu 256 barev, což často vede k pruhování a špatné reprodukci barev. Rendervid používá dvouprůchodový přístup:

1. Průchod 1 (palettegen): Analyzuje všechny snímky pro generování optimální 256-barevné palety, která nejlépe reprezentuje celý barevný rozsah videa.
2. Průchod 2 (paletteuse): Znovu zakóduje každý snímek pomocí optimalizované palety s volitelným ditheringem pro hladké přechody.

Předvolby Optimalizace

Možnosti Ditheringu

Konfigurace

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 rozlišení
    colors: 256,            // 2-256 barevná paleta
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimalizace pro udržení pod 5MB
    fps: 15,                // Nižší FPS = menší soubor
  },
});

console.log(`Velikost GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Odhadovaná velikost byla: ${result.estimatedSizeKB} KB`);

Odhad Velikosti Souboru a Auto-Optimalizace

Když nastavíte targetSizeKB, Rendervid odhadne velikost výstupního souboru před renderováním a automaticky upraví parametry (počet barev, rozlišení, FPS) pro splnění cíle. To je obzvláště užitečné pro platformy s limity velikosti souboru (např. Slack limit 50 MB, typické omezení e-mailu 10 MB).

// Auto-optimalizace pro přizpůsobení 2MB omezení e-mailu
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Architektura Balíčků

Rendervid je organizován jako monorepo s 13 balíčky. Každý balíček má zaměřenou odpovědnost a skládají se dohromady pro podporu každého scénáře nasazení.

@rendervid/
├── core                    Engine, typy, validace, animační systém
│   ├── Parser a validátor šablon (AJV + JSON Schema)
│   ├── Animační engine (40+ předvoleb, 30+ easing funkcí)
│   ├── Systém vrstev (text, image, video, shape, audio, group, lottie, custom)
│   └── Správa scén a přechodů (17 typů)
│
├── renderer-browser        Renderování na straně klienta
│   ├── Renderování snímků založené na Canvas
│   ├── MediaRecorder pro export WebM
│   └── WebAssembly MP4 enkodér
│
├── renderer-node           Renderování na straně serveru
│   ├── Playwright/Puppeteer headless prohlížeč
│   ├── Integrace FFmpeg (fluent-ffmpeg)
│   ├── GPU akcelerace
│   └── Pipeline optimalizace GIF
│
├── cloud-rendering         Multi-cloud orchestrace
│   ├── AWS Lambda poskytovatel
│   ├── Azure Functions poskytovatel
│   ├── Google Cloud Functions poskytovatel
│   ├── Docker lokální poskytovatel
│   ├── Rozdělovač částí a slučovač
│   └── Adaptéry objektového úložiště (S3, Blob, GCS)
│
├── player                  Komponenta video/šablonový přehrávač
├── editor                  Vizuální editor šablon (Zustand state)
├── components              Předpřipravené React komponenty
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Definice šablon a příklady (100+)
├── testing                 Testovací utility
│   ├── Vitest vlastní matchery
│   ├── Pomocníci pro snapshot testování
│   └── Utility vizuální regrese
│
├── editor-playground       Vývojové prostředí editoru
├── player-playground       Vývojové prostředí přehrávače
├── mcp                     Model Context Protocol server
└── docs                    VitePress dokumentační stránka

Jak se Balíčky Propojují

• @rendervid/core je základem. Každý další balíček na něm závisí pro typy šablon, validaci a animační systém.
• @rendervid/renderer-browser a @rendervid/renderer-node oba konzumují core šablony, ale výstup přes různé pipeline (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering obaluje renderer-node a distribuuje jeho práci napříč cloudovými funkcemi nebo Docker kontejnery.
• @rendervid/player a @rendervid/editor jsou UI balíčky založené na Reactu pro přehrávání a vizuální úpravy. Editor používá Zustand pro správu stavu.
• @rendervid/components poskytuje předpřipravené React komponenty (AnimatedLineChart, AuroraBackground, atd.), které lze použít v šablonách.
• @rendervid/testing poskytuje Vitest matchery a pomocníky pro snapshot testování pro validaci šablon.
• mcp je vrstva AI integrace , která vystavuje schopnosti Rendervid AI agentům prostřednictvím Model Context Protocol.

Technologický Stack

Rendervid je postaven na moderním TypeScript stacku zvoleném pro spolehlivost, výkon a developer experience.

Testování

Rendervid obsahuje dedikovaný testovací balíček (@rendervid/testing), který poskytuje vlastní Vitest matchery, pomocníky pro snapshot testování a utility vizuální regrese pro validaci šablon.

Vitest Vlastní Matchery

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

describe("Šablona Představení Produktu", () => {
  it("měla by být validní šablona", () => {
    expect(template).toBeValidTemplate();
  });

  it("měla by mít správné rozměry", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("měla by obsahovat alespoň jednu textovou vrstvu", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("měla by mít animace na nadpisu", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Testování

Snapshot testování renderuje šablonu na obrázek a porovnává ji s uloženou referencí. Jakákoli vizuální změna způsobí selhání testu, což usnadňuje zachycení nezamýšlených regresí.

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

describe("Vizuální Regrese Šablony", () => {
  it("měla by odpovídat referenčnímu snapshotu na snímku 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("měla by odpovídat referenčnímu snapshotu v polovině", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Testování Vizuální Regrese v CI

Integrujte testy vizuální regrese do vaší CI/CD pipeline pro zachycení změn renderování před tím, než se dostanou do produkce:

# .github/workflows/visual-regression.yml
name: Visual Regression Tests
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

Optimalizace Výkonu

Dosažení nejrychlejších možných časů renderování vyžaduje porozumění tomu, kde se čas tráví a které páky můžete použít. Zde jsou nejúčinnější optimalizační strategie.

1. Vyberte Správný Cíl Nasazení

2. Optimalizujte Složitost Šablony

• Snižte počet vrstev. Každá vrstva je renderována nezávisle. Méně vrstev znamená méně vykreslování na snímek.
• Používejte kvalitu draft během vývoje a testování. Přepněte na high nebo lossless pouze pro finální exporty.
• Zjednodušte animace během náhledu. Složité keyframe sekvence s mnoha easing funkcemi přidávají výpočet na snímek.

3. Používejte renderWaitTime Moudře

Možnost renderWaitTime pozastaví renderování, aby umožnila načtení externích médií (obrázky, videa, fonty). Nastavte to na minimální hodnotu, která zajistí načtení všech assetů. Hodnota 500-2000ms je typická. Příliš vysoké nastavení plýtvá časem na každém snímku.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 sekunda obvykle stačí
});

4. Využijte Paralelní Renderování

Pro jakékoli video delší než 10 sekund bude paralelní renderování (Docker nebo cloud) rychlejší než sekvenční renderování. Bod zvratu závisí na vašem hardwaru a konfiguraci cloudu, ale jako praktické pravidlo:

• < 10 sekund: Jeden Node.js renderer je v pořádku
• 10-60 sekund: Docker s 4-8 pracovníky
• 1-10 minut: Docker s 8-16 pracovníky nebo cloud
• > 10 minut: Cloud renderování s 50+ pracovníky

5. Optimalizujte Výstup GIF

GIFy jsou ze své podstaty velké. Pro udržení spravovatelných velikostí souborů:

• Snižte FPS na 10-15. Většina GIFů vypadá dobře při snížených snímkových frekvencích.
• Snižte rozlišení pomocí předvoleb (social, web, email).
• Omezte barvy na 128 nebo méně pro jednoduché animace.
• Používejte targetSizeKB pro automatickou optimalizaci parametrů Rendervid.
• Vyhněte se ditheringu (none), pokud záleží více na velikosti souboru než na kvalitě přechodů.

6. Povolte GPU Akceleraci

Na strojích s kompatibilními GPU může hardwarově akcelerované kódování snížit časy renderování o 2-5x pro krok kódování. To má největší dopad pro vysoká rozlišení (4K+) a výstupy s vysokým bitrate.

7. Předem Načtěte Assety

Pokud vaše šablona odkazuje na externí obrázky nebo videa, předem je stáhněte do lokálního úložiště před renderováním. Latence sítě během renderování je nejčastější příčinou pomalých nebo neúspěšných renderů.

Další Kroky

• Začněte s Rendervid: Navštivte přehled Rendervid pro instalaci a první render
• Naučte se systém šablon: Přečtěte si dokumentaci Systému šablon pro strukturu JSON šablon, proměnné, scény, vrstvy a animace
• Prozkoumejte komponenty: Procházejte Knihovnu komponent pro předpřipravené React komponenty jako AnimatedLineChart a AuroraBackground
• Nastavte AI integraci: Viz průvodce AI integrace pro připojení Claude Code, Cursor nebo Windsurf k Rendervid přes MCP
• Prohlédněte si zdroj: Navštivte Rendervid GitHub repozitář pro kompletní zdrojový kód a 100+ příkladových šablon