Implementare Rendervid - Randare în Browser, Node.js, Cloud și Docker

Introducere

Rendervid este conceput pentru a randa oriunde cere fluxul dumneavoastră de lucru. Fie că aveți nevoie de previzualizări instant în browser, codificare video de calitate profesională pe un server sau randare masiv paralelă pe infrastructură cloud, Rendervid oferă un pachet dedicat pentru fiecare mediu. Fiecare țintă de implementare partajează același sistem de șabloane și bibliotecă de componente , astfel încât un șablon care funcționează în browser funcționează identic pe AWS Lambda sau într-un container Docker.

Acest ghid acoperă toate cele patru medii de implementare, opțiunile de randare disponibile în fiecare și funcții avansate precum motion blur, export GIF și optimizarea performanței. La final, veți ști exact ce cale de implementare se potrivește proiectului dumneavoastră și cum să o configurați.

                        +---------------------+
                        |   Șablon JSON       |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------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          |
                                               +-----------------+

Randare în Browser

Pachetul @rendervid/renderer-browser gestionează randarea pe partea clientului în întregime în browserul utilizatorului. Nu este necesară infrastructură de server. Aceasta face ca să fie cea mai rapidă cale de la șablon la previzualizare.

Când să Folosiți Randarea în Browser

• Previzualizări în timp real în timpul editării șabloanelor în editorul vizual
• Aplicații web care trebuie să genereze resurse video sau imagine pe loc
• Prototipare șabloane noi înainte de a trece la randare pe server
• Exporturi ușoare unde ieșirea MP4, WebM, PNG, JPEG sau WebP este suficientă

Instalare

npm install @rendervid/renderer-browser

Cum Funcționează

Randarea în browser folosește API-ul HTML Canvas pentru a desena fiecare cadru al șablonului. Renderul parcurge fiecare scenă și strat, aplică animații și funcții de easing, compune rezultatul pe un element canvas și capturează fiecare cadru. Pentru ieșirea video, cadrele sunt codificate folosind API-ul integrat al browserului MediaRecorder (WebM) sau un encoder MP4 bazat pe WebAssembly.

Formate de Ieșire Suportate

Exemplu de Cod

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: "Salut din Browser",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Randare la un element canvas pentru previzualizare
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Export un singur cadru ca PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Limitări ale Randării în Browser

• Fără acces FFmpeg, deci H.265/HEVC și MOV nu sunt disponibile
• Exportul GIF necesită renderul Node.js pentru optimizarea paletei
• Rezoluția maximă depinde de limitele de dimensiune Canvas ale browserului (de obicei 4096x4096 sau 8192x8192)
• Viteza de randare depinde de CPU-ul și GPU-ul dispozitivului client

Randare Node.js

Pachetul @rendervid/renderer-node oferă randare pe server cu integrare completă FFmpeg. Folosește Playwright sau Puppeteer pentru a randa fiecare cadru într-un browser fără interfață grafică, apoi trimite cadrele către FFmpeg pentru codificare video de calitate profesională.

Când să Folosiți Randarea Node.js

• Codificare video de producție cu suport complet pentru codecuri (H.264, H.265, VP9)
• Procesare batch a sute sau mii de șabloane în pipeline-uri automate
• API-uri REST care acceptă JSON șablon și returnează video randat
• Pipeline-uri CI/CD pentru generarea automată de conținut
• Export GIF cu optimizarea paletei și control al dithering-ului

Instalare

# Instalați renderul
npm install @rendervid/renderer-node

# Instalați Playwright (include binare browser)
npx playwright install chromium

# Instalați FFmpeg (necesar pentru codificarea video)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (prin Chocolatey)
choco install ffmpeg

Formate de Ieșire Suportate

Preseturi de Calitate Randare

Rendervid oferă patru preseturi de calitate care controlează parametrii de codificare:

Accelerare GPU

Renderul Node.js suportă accelerare hardware pentru a delega codificarea către GPU. Aceasta reduce semnificativ timpul de randare pentru șabloane complexe cu multe straturi, rezoluții mari și efecte.

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

Accelerarea GPU este disponibilă pe sisteme cu hardware compatibil NVIDIA (NVENC), AMD (AMF) sau Intel (Quick Sync). FFmpeg trebuie compilat cu suportul pentru encoderul corespunzător.

Exemplu de Cod

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: "Titlu",
      default: "Produsul Dumneavoastră, Îmbunătățit",
    },
  },
};

// Randare cu intrări personalizate
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Așteptați 2s pentru încărcarea media
  inputs: {
    headline: "Vânzare de Vară — 50% Reducere la Tot",
  },
});

console.log(`Randat: ${result.outputPath}`);
console.log(`Durată: ${result.duration}s`);
console.log(`Dimensiune fișier: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Procesare Batch

Pentru procesarea multor șabloane în secvență, folosiți API-ul batch:

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

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alice" }, output: "alice.mp4" },
  { template: socialTemplate, inputs: { name: "Bob" }, output: "bob.mp4" },
  { template: socialTemplate, inputs: { name: "Carol" }, output: "carol.mp4" },
];

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

Pentru randare cu adevărat paralelă pe o singură mașină, consultați secțiunea Randare Locală Docker de mai jos.

Randare Cloud

Pachetul @rendervid/cloud-rendering permite randare distribuită, paralelă pe infrastructură cloud. În loc să randeze cadre secvențial pe o mașină, randarea cloud împarte munca pe multe funcții worker care randează cadre simultan, apoi le îmbină în ieșirea finală.

Când să Folosiți Randarea Cloud

• Pipeline-uri cu throughput mare care procesează sute de videoclipuri pe oră
• Conținut de lungă durată unde randarea secvențială este prea lentă
• Sarcini de lucru sensibile la timp unde o accelerare de 10-50x contează
• Auto-scaling pentru a gestiona vârfuri de cerere imprevizibile

Arhitectură

+------------------+
|   Aplicația Ta   |
|  (Coordonator)   |
+--------+---------+
         |
         | 1. Împarte videoclipul în bucăți de cadre
         v
+--------+---------+
|   Chunk Splitter |
+--------+---------+
         |
         |  2. Distribuie bucățile către workeri
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Fiecare worker randează cadrele sale
      v            v           v
+-----+------+----+------+----+----+
|  Cadre     |  Cadre    |  Cadre  |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Combină în videoclipul final
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Descarcă sau servește
             v
     +-------+---------+
     |   Ieșire Finală  |
     |   video.mp4      |
     +------------------+

Cum funcționează pas cu pas:

1. Coordonatorul analizează șablonul și determină câte cadre trebuie randate pe baza duratei totale și FPS.
2. Chunk splitter-ul împarte numărul total de cadre în bucăți (de ex., 30 cadre pe bucată pentru un video de 30fps = 1 secundă pe bucată).
3. Fiecare funcție worker primește o alocare de bucată (cadru început, cadru final), randează acele cadre folosind renderul Node.js și încarcă segmentul randat în object storage.
4. Merger-ul descarcă toate segmentele și le concatenează în videoclipul final folosind FFmpeg.
5. Ieșirea finală este stocată în object storage-ul furnizorului cloud (S3, Azure Blob sau GCS) și opțional descărcată în sistemul de fișiere local.

Configurare Cloud

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",
});

Interfața completă de configurare:

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

Configurare AWS Lambda

AWS Lambda este cea mai comună țintă de implementare cloud. Fiecare funcție worker rulează într-o invocare Lambda separată, permițând paralelism masiv.

Prerequisite:

• Cont AWS cu acces Lambda și S3
• AWS CLI configurat
• Runtime Lambda Node.js 18+

Configurare:

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(`Randat în ${result.renderTime}ms`);
console.log(`Workeri folosiți: ${result.workersUsed}`);
console.log(`Ieșire: ${result.outputUrl}`);

Configurare tipică AWS Lambda:

• Memorie: 1024-3008 MB (mai multă memorie = mai mult CPU = randare mai rapidă)
• Timeout: 300 secunde (5 minute)
• Stocare efemeră: 512 MB - 10 GB
• Concurență: 100-1000 (ajustați în funcție de sarcina de lucru)

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

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

Comparație Costuri

Toți furnizorii cloud oferă niveluri gratuite care acoperă sarcini de randare semnificative în timpul dezvoltării și producției cu volum redus.

Benchmark-uri Performanță

Randarea cloud realizează o accelerare de 10-50x comparativ cu randarea secvențială pe o singură mașină. Accelerarea exactă depinde de numărul de workeri, complexitatea șablonului și durata videoclipului.

Videoclipurile mai lungi beneficiază mai mult de paralelism deoarece overhead-ul pornirii workerilor și îmbinării cadrelor este amortizat pe mai multe cadre.

Randare Locală Docker

Randarea bazată pe Docker vă oferă aceeași arhitectură de randare paralelă ca randarea cloud, dar rulând în întregime pe mașina locală. Este complet gratuită, nu folosește conturi cloud și este ideală pentru configurații self-hosted, dezvoltare și echipe care doresc randare paralelă fără costuri cloud.

Când să Folosiți Randarea Docker

• Randare paralelă gratuită fără conturi de furnizor cloud
• Infrastructură self-hosted în spatele unui firewall
• Dezvoltare și testare a fluxurilor de lucru de randare cloud local
• Sarcini de lucru mici până la medii care beneficiază de paralelism dar nu necesită auto-scaling

Instalare

# Asigurați-vă că Docker este instalat și rulează
docker --version

# Instalați pachetul cloud rendering
npm install @rendervid/cloud-rendering

Configurare

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, // Numărul de containere Docker care rulează în paralel
  },
});

const result = await renderer.render(template);
console.log(`Randat în ${result.renderTime}ms folosind ${result.workersUsed} workeri`);

Alegerea workersCount: Setați aceasta la numărul de nuclee CPU disponibile pe mașina dumneavoastră. De exemplu, o mașină cu 8 nuclee funcționează bine cu 8 workeri. Depășirea numărului de nuclee adaugă overhead de la schimbarea contextului fără a îmbunătăți throughput-ul.

Arhitectură Docker

+------------------+
|   Coordonator    |
|  (procesul tău)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Containere Docker
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Volum Partajat         |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Fiecare container Docker este un worker autonom cu Node.js, Playwright și FFmpeg pre-instalate. Workerii citesc alocările lor de cadre din volumul partajat, randează cadrele și scriu rezultatele înapoi. Coordonatorul apoi îmbină toate segmentele în ieșirea finală.

Motion Blur

Rendervid suportă motion blur prin supersampling temporal. În loc să randeze un singur instant pe cadru, renderul capturează mai multe sub-cadre la momente ușor diferite în timp și le combină împreună. Aceasta produce blur-ul natural pe care camerele îl creează când obiectele se mișcă în timpul unei expuneri.

Preseturi de Calitate

Configurare

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // 16 mostre pe cadru
  },
});

Cum Funcționează Supersampling-ul Temporal

Cadrul N (fără motion blur):       Cadrul N (cu motion blur, 5 mostre):

  Instant unic:                     5 sub-cadre combinate:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Rezultat combinat
                                     +--------+

Fiecare sub-cadru avansează cronologia animației cu un increment minuscul (1/fps împărțit la numărul de mostre). Sub-cadrele sunt apoi combinate alpha pentru a produce cadrul final. Obiectele care s-au mișcat între sub-cadre apar blur-ate de-a lungul traiectoriei de mișcare, în timp ce elementele staționare rămân clare.

Considerații de Performanță

Motion blur-ul multiplică timpul de randare proporțional cu numărul de mostre. Un video de 10 secunde la 30fps are 300 cadre. Cu calitate high (16 mostre), renderul trebuie să genereze 4.800 sub-cadre în loc de 300. Folosiți calitatea draft în timpul dezvoltării și treceți la high sau ultra doar pentru exporturi finale.

Randarea cloud și randarea paralelă Docker funcționează bine cu motion blur deoarece costul pe cadru este distribuit pe workeri. O creștere de 16x pe cadru împărțită pe 16 workeri rezultă în aproximativ același timp total de randare ca o randare fără blur pe o mașină.

Export GIF

Exportul GIF al Rendervid depășește cu mult o simplă conversie cadru-la-GIF. Folosește pipeline-ul de generare paletă al FFmpeg pentru a produce GIF-uri animate optimizate, de înaltă calitate, cu dithering configurabil, număr de culori și constrângeri de dimensiune fișier.

Cum Funcționează Optimizarea GIF

Codificarea GIF standard folosește o singură paletă globală de 256 culori, ceea ce rezultă adesea în benzi și reproducere slabă a culorilor. Rendervid folosește o abordare în două treceri:

1. Trecerea 1 (palettegen): Analizează toate cadrele pentru a genera o paletă optimă de 256 culori care reprezintă cel mai bine gama completă de culori a videoclipului.
2. Trecerea 2 (paletteuse): Re-codifică fiecare cadru folosind paleta optimizată cu dithering opțional pentru gradiente netede.

Preseturi de Optimizare

Opțiuni Dithering

Configurare

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // rezoluție 480x480
    colors: 256,            // paletă culori 2-256
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimizare pentru a rămâne sub 5MB
    fps: 15,                // FPS mai mic = fișier mai mic
  },
});

console.log(`Dimensiune GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Dimensiunea estimată a fost: ${result.estimatedSizeKB} KB`);

Estimarea Dimensiunii Fișierului și Auto-Optimizare

Când setați un targetSizeKB, Rendervid estimează dimensiunea fișierului de ieșire înainte de randare și ajustează automat parametrii (număr culori, rezoluție, FPS) pentru a îndeplini ținta. Acest lucru este deosebit de util pentru platforme cu limite de dimensiune fișier (de ex., limita de 50 MB a Slack, constrângerea tipică de 10 MB a email-ului).

// Auto-optimizare pentru a se încadra în constrângerea de 2MB a email-ului
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Arhitectura Pachetelor

Rendervid este organizat ca un monorepo cu 13 pachete. Fiecare pachet are o responsabilitate focalizată și se compun împreună pentru a suporta fiecare scenariu de implementare.

@rendervid/
├── core                    Motor, tipuri, validare, sistem animație
│   ├── Parser și validator șablon (AJV + JSON Schema)
│   ├── Motor animație (40+ preseturi, 30+ funcții easing)
│   ├── Sistem straturi (text, imagine, video, formă, audio, grup, lottie, personalizat)
│   └── Gestionare scene și tranziții (17 tipuri)
│
├── renderer-browser        Randare partea clientului
│   ├── Randare cadre bazată pe Canvas
│   ├── MediaRecorder pentru export WebM
│   └── Encoder MP4 WebAssembly
│
├── renderer-node           Randare partea serverului
│   ├── Browser fără interfață Playwright/Puppeteer
│   ├── Integrare FFmpeg (fluent-ffmpeg)
│   ├── Accelerare GPU
│   └── Pipeline optimizare GIF
│
├── cloud-rendering         Orchestrare multi-cloud
│   ├── Furnizor AWS Lambda
│   ├── Furnizor Azure Functions
│   ├── Furnizor Google Cloud Functions
│   ├── Furnizor Docker local
│   ├── Splitter și merger bucăți
│   └── Adaptoare object storage (S3, Blob, GCS)
│
├── player                  Componentă player video/șablon
├── editor                  Editor vizual șablon (stare Zustand)
├── components              Componente React pre-construite
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Definiții șabloane și exemple (100+)
├── testing                 Utilitare testare
│   ├── Matcher-e personalizate Vitest
│   ├── Helper-e testare snapshot
│   └── Utilitare regresie vizuală
│
├── editor-playground       Mediu dezvoltare editor
├── player-playground       Mediu dezvoltare player
├── mcp                     Server Model Context Protocol
└── docs                    Site documentație VitePress

Cum se Conectează Pachetele

• @rendervid/core este fundația. Fiecare alt pachet depinde de acesta pentru tipurile de șabloane, validare și sistemul de animație.
• @rendervid/renderer-browser și @rendervid/renderer-node consumă ambele șabloane core dar ies prin pipeline-uri diferite (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering învelește renderer-node și distribuie munca sa pe funcții cloud sau containere Docker.
• @rendervid/player și @rendervid/editor sunt pachete UI bazate pe React pentru redare și editare vizuală. Editorul folosește Zustand pentru gestionarea stării.
• @rendervid/components oferă componentele React pre-construite (AnimatedLineChart, AuroraBackground, etc.) care pot fi folosite în șabloane.
• @rendervid/testing oferă matcher-e Vitest și helper-e testare snapshot pentru validarea șabloanelor.
• mcp este stratul de integrare AI care expune capabilitățile Rendervid către agenți AI prin Model Context Protocol.

Stack Tehnologic

Rendervid este construit pe un stack TypeScript modern ales pentru fiabilitate, performanță și experiență dezvoltator.

Testare

Rendervid include un pachet dedicat de testare (@rendervid/testing) care oferă matcher-e personalizate Vitest, helper-e testare snapshot și utilitare regresie vizuală pentru validarea șabloanelor.

Matcher-e Personalizate Vitest

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

describe("Șablon Prezentare Produs", () => {
  it("ar trebui să fie un șablon valid", () => {
    expect(template).toBeValidTemplate();
  });

  it("ar trebui să aibă dimensiunile corecte", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("ar trebui să conțină cel puțin un strat text", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("ar trebui să aibă animații pe titlu", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Testare Snapshot

Testarea snapshot randează un șablon la o imagine și o compară cu o referință stocată. Orice schimbare vizuală determină eșuarea testului, facilitând detectarea regresiilor neintenționate.

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

describe("Regresie Vizuală Șablon", () => {
  it("ar trebui să se potrivească cu snapshot-ul de referință la cadrul 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("ar trebui să se potrivească cu snapshot-ul de referință la mijloc", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Testare Regresie Vizuală în CI

Integrați teste de regresie vizuală în pipeline-ul CI/CD pentru a detecta schimbările de randare înainte ca acestea să ajungă în producție:

# .github/workflows/visual-regression.yml
name: Teste Regresie Vizuală
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

Optimizarea Performanței

Obținerea celor mai rapide timpi de randare posibili necesită înțelegerea unde se petrece timpul și ce pârghii puteți acționa. Iată cele mai impactante strategii de optimizare.

1. Alegeți Ținta de Implementare Corectă

2. Optimizați Complexitatea Șablonului

• Reduceți numărul de straturi. Fiecare strat este randat independent. Mai puține straturi înseamnă mai puține operații de desenare pe cadru.
• Folosiți calitatea draft în timpul dezvoltării și testării. Treceți la high sau lossless doar pentru exporturi finale.
• Simplificați animațiile în timpul previzualizării. Secvențe complexe de keyframe cu multe funcții easing adaugă calcul pe cadru.

3. Folosiți renderWaitTime cu Înțelepciune

Opțiunea renderWaitTime pune pauză randarea pentru a permite încărcarea media externe (imagini, videoclipuri, fonturi). Setați aceasta la valoarea minimă care asigură că toate resursele sunt încărcate. O valoare de 500-2000ms este tipică. Setarea ei prea mare pierde timp pe fiecare cadru.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 secundă este de obicei suficient
});

4. Folosiți Randarea Paralelă

Pentru orice video mai lung de 10 secunde, randarea paralelă (Docker sau cloud) va fi mai rapidă decât randarea secvențială. Punctul de echilibru depinde de hardware-ul și configurația cloud, dar ca regulă generală:

• < 10 secunde: Un singur render Node.js este suficient
• 10-60 secunde: Docker cu 4-8 workeri
• 1-10 minute: Docker cu 8-16 workeri sau cloud
• > 10 minute: Randare cloud cu 50+ workeri

5. Optimizați Ieșirea GIF

GIF-urile sunt în mod inerent mari. Pentru a menține dimensiunile fișierelor gestionabile:

• Reduceți FPS-ul la 10-15. Majoritatea GIF-urilor arată bine la rate de cadre reduse.
• Reduceți rezoluția folosind preseturi (social, web, email).
• Limitați culorile la 128 sau mai puține pentru animații simple.
• Folosiți targetSizeKB pentru a permite Rendervid să auto-optimizeze parametrii.
• Evitați dithering-ul (none) dacă dimensiunea fișierului contează mai mult decât calitatea gradientului.

6. Activați Accelerarea GPU

Pe mașini cu GPU-uri compatibile, codificarea accelerată hardware poate reduce timpii de randare cu 2-5x pentru pasul de codificare. Acest lucru are cel mai mare impact pentru ieșiri de înaltă rezoluție (4K+) și bitrate mare.

7. Pre-încărcați Resursele

Dacă șablonul dumneavoastră referențiază imagini sau videoclipuri externe, pre-descărcați-le în stocare locală înainte de randare. Latența rețelei în timpul randării este cea mai comună cauză a randărilor lente sau eșuate.

Pași Următori

• Începeți cu Rendervid: Vizitați prezentarea generală Rendervid pentru instalare și prima randare
• Învățați sistemul de șabloane: Citiți documentația Sistem Șabloane pentru structura șablonului JSON, variabile, scene, straturi și animații
• Explorați componentele: Răsfoiți Biblioteca de Componente pentru componente React pre-construite precum AnimatedLineChart și AuroraBackground
• Configurați integrarea AI: Consultați ghidul Integrare AI pentru a conecta Claude Code, Cursor sau Windsurf la Rendervid prin MCP
• Vizualizați sursa: Vizitați repository-ul GitHub Rendervid pentru codul sursă complet și 100+ șabloane exemplu