Distribuzione Rendervid - Rendering Browser, Node.js, Cloud e Docker

Introduzione

Rendervid è progettato per il rendering ovunque il tuo flusso di lavoro lo richieda. Che tu abbia bisogno di anteprime istantanee nel browser, codifica video di qualità professionale su un server, o rendering massivamente parallelo su infrastruttura cloud, Rendervid fornisce un pacchetto dedicato per ogni ambiente. Ogni destinazione di distribuzione condivide lo stesso sistema di template e libreria di componenti , quindi un template che funziona nel browser funziona in modo identico su AWS Lambda o in un container Docker.

Questa guida copre tutti e quattro gli ambienti di distribuzione, le opzioni di rendering disponibili in ciascuno, e funzionalità avanzate come motion blur, esportazione GIF e ottimizzazione delle prestazioni. Alla fine, saprai esattamente quale percorso di distribuzione si adatta al tuo progetto e come configurarlo.

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

Rendering Browser

Il pacchetto @rendervid/renderer-browser gestisce il rendering lato client interamente all’interno del browser dell’utente. Non è richiesta alcuna infrastruttura server. Questo lo rende il percorso più veloce dal template all’anteprima.

Quando Usare il Rendering Browser

• Anteprime in tempo reale durante l’editing del template nell’editor visuale
• Applicazioni web che devono generare risorse video o immagini al volo
• Prototipazione di nuovi template prima di passare al rendering lato server
• Esportazioni leggere dove l’output MP4, WebM, PNG, JPEG o WebP è sufficiente

Installazione

npm install @rendervid/renderer-browser

Come Funziona

Il rendering browser utilizza l’API HTML Canvas per disegnare ogni frame del template. Il renderer attraversa ogni scena e layer, applica animazioni e funzioni di easing, compone il risultato su un elemento canvas e cattura ogni frame. Per l’output video, i frame vengono codificati utilizzando l’API MediaRecorder integrata nel browser (WebM) o un encoder MP4 basato su WebAssembly.

Formati di Output Supportati

Esempio di Codice

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

// Rendering su un elemento canvas per l'anteprima
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Esporta un singolo frame come PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Limitazioni del Rendering Browser

• Nessun accesso a FFmpeg, quindi H.265/HEVC e MOV non sono disponibili
• L’esportazione GIF richiede il renderer Node.js per l’ottimizzazione della palette
• La risoluzione massima dipende dai limiti di dimensione Canvas del browser (tipicamente 4096x4096 o 8192x8192)
• La velocità di rendering dipende dalla CPU e GPU del dispositivo client

Rendering Node.js

Il pacchetto @rendervid/renderer-node fornisce rendering lato server con integrazione FFmpeg completa. Utilizza Playwright o Puppeteer per renderizzare ogni frame in un browser headless, quindi invia i frame a FFmpeg per la codifica video di livello professionale.

Quando Usare il Rendering Node.js

• Codifica video di produzione con supporto completo ai codec (H.264, H.265, VP9)
• Elaborazione batch di centinaia o migliaia di template in pipeline automatizzate
• API REST che accettano JSON template e restituiscono video renderizzati
• Pipeline CI/CD per la generazione automatica di contenuti
• Esportazione GIF con ottimizzazione della palette e controllo del dithering

Installazione

# Installa il renderer
npm install @rendervid/renderer-node

# Installa Playwright (include i binari del browser)
npx playwright install chromium

# Installa FFmpeg (richiesto per la codifica video)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (tramite Chocolatey)
choco install ffmpeg

Formati di Output Supportati

Preset di Qualità Rendering

Rendervid fornisce quattro preset di qualità che controllano i parametri di codifica:

Accelerazione GPU

Il renderer Node.js supporta l’accelerazione hardware per scaricare la codifica sulla GPU. Questo riduce significativamente il tempo di rendering per template complessi con molti layer, risoluzioni elevate ed effetti.

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

L’accelerazione GPU è disponibile su sistemi con hardware compatibile NVIDIA (NVENC), AMD (AMF) o Intel (Quick Sync). FFmpeg deve essere compilato con il supporto dell’encoder corrispondente.

Esempio di Codice

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: "Titolo",
      default: "Il Tuo Prodotto, Elevato",
    },
  },
};

// Rendering con input personalizzati
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Attendi 2s per caricare i media
  inputs: {
    headline: "Saldi Estivi — 50% di Sconto su Tutto",
  },
});

console.log(`Renderizzato: ${result.outputPath}`);
console.log(`Durata: ${result.duration}s`);
console.log(`Dimensione file: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Elaborazione Batch

Per elaborare molti template in sequenza, usa l’API 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,
  });
}

Per un vero rendering parallelo su una singola macchina, vedi la sezione Rendering Locale Docker qui sotto.

Rendering Cloud

Il pacchetto @rendervid/cloud-rendering abilita il rendering distribuito e parallelo su infrastruttura cloud. Invece di renderizzare i frame in sequenza su una macchina, il rendering cloud divide il lavoro tra molte funzioni worker che renderizzano i frame simultaneamente, quindi li unisce nell’output finale.

Quando Usare il Rendering Cloud

• Pipeline ad alto throughput che elaborano centinaia di video all’ora
• Contenuti long-form dove il rendering sequenziale è troppo lento
• Carichi di lavoro time-sensitive dove un’accelerazione 10-50x è importante
• Auto-scaling per gestire picchi di domanda imprevedibili

Architettura

+------------------+
|   La Tua App     |
|  (Coordinatore)  |
+--------+---------+
         |
         | 1. Dividi il video in blocchi di frame
         v
+--------+---------+
|  Divisore Blocchi|
+--------+---------+
         |
         |  2. Distribuisci i blocchi ai worker
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Ogni worker renderizza i suoi frame
      v            v           v
+-----+------+----+------+----+----+
|  Frame     |  Frame    |  Frame  |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Combina nel video finale
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Scarica o servi
             v
     +-------+---------+
     |   Output Finale  |
     |   video.mp4      |
     +------------------+

Come funziona passo dopo passo:

1. Il coordinatore analizza il template e determina quanti frame devono essere renderizzati in base alla durata totale e FPS.
2. Il divisore di blocchi divide il conteggio totale dei frame in blocchi (es. 30 frame per blocco per un video a 30fps = 1 secondo per blocco).
3. Ogni funzione worker riceve un’assegnazione di blocco (frame iniziale, frame finale), renderizza quei frame utilizzando il renderer Node.js e carica il segmento renderizzato nell’object storage.
4. Il merger scarica tutti i segmenti e li concatena nel video finale utilizzando FFmpeg.
5. L’output finale viene memorizzato nell’object storage del provider cloud (S3, Azure Blob o GCS) e opzionalmente scaricato nel filesystem locale.

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

L’interfaccia di configurazione completa:

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

Configurazione AWS Lambda

AWS Lambda è la destinazione di distribuzione cloud più comune. Ogni funzione worker viene eseguita in un’invocazione Lambda separata, consentendo un parallelismo massiccio.

Prerequisiti:

• Account AWS con accesso a Lambda e S3
• AWS CLI configurato
• Runtime Lambda Node.js 18+

Configurazione:

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(`Renderizzato in ${result.renderTime}ms`);
console.log(`Worker utilizzati: ${result.workersUsed}`);
console.log(`Output: ${result.outputUrl}`);

Configurazione tipica AWS Lambda:

• Memoria: 1024-3008 MB (più memoria = più CPU = rendering più veloce)
• Timeout: 300 secondi (5 minuti)
• Storage effimero: 512 MB - 10 GB
• Concorrenza: 100-1000 (regola in base al carico di lavoro)

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

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

Confronto Costi

Tutti i provider cloud offrono tier gratuiti che coprono carichi di lavoro di rendering significativi durante lo sviluppo e la produzione a basso volume.

Benchmark delle Prestazioni

Il rendering cloud raggiunge un’accelerazione 10-50x rispetto al rendering sequenziale su singola macchina. L’accelerazione esatta dipende dal numero di worker, dalla complessità del template e dalla durata del video.

I video più lunghi beneficiano maggiormente del parallelismo perché l’overhead di avvio dei worker e di unione dei frame viene ammortizzato su più frame.

Rendering Locale Docker

Il rendering basato su Docker ti offre la stessa architettura di rendering parallelo del rendering cloud, ma eseguita interamente sulla tua macchina locale. È completamente gratuito, non utilizza account cloud ed è ideale per configurazioni self-hosted, sviluppo e team che desiderano il rendering parallelo senza costi cloud.

Quando Usare il Rendering Docker

• Rendering parallelo gratuito senza account di provider cloud
• Infrastruttura self-hosted dietro un firewall
• Sviluppo e test di flussi di lavoro di rendering cloud localmente
• Carichi di lavoro piccoli e medi che beneficiano del parallelismo ma non necessitano di auto-scaling

Installazione

# Assicurati che Docker sia installato e in esecuzione
docker --version

# Installa il pacchetto cloud rendering
npm install @rendervid/cloud-rendering

Configurazione

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, // Numero di container Docker da eseguire in parallelo
  },
});

const result = await renderer.render(template);
console.log(`Renderizzato in ${result.renderTime}ms usando ${result.workersUsed} worker`);

Scelta di workersCount: Imposta questo valore al numero di core CPU disponibili sulla tua macchina. Ad esempio, una macchina a 8 core funziona bene con 8 worker. Andare oltre il numero di core aggiunge overhead dal context switching senza migliorare il throughput.

Architettura Docker

+------------------+
|   Coordinatore   |
|  (tuo processo)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Container Docker
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Volume Condiviso       |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Ogni container Docker è un worker autocontenuto con Node.js, Playwright e FFmpeg preinstallati. I worker leggono le loro assegnazioni di frame dal volume condiviso, renderizzano i frame e scrivono i risultati. Il coordinatore quindi unisce tutti i segmenti nell’output finale.

Motion Blur

Rendervid supporta il motion blur attraverso il supersampling temporale. Invece di renderizzare un singolo istante per frame, il renderer cattura più sub-frame in punti temporali leggermente diversi e li miscela insieme. Questo produce la sfocatura naturale che le telecamere creano quando gli oggetti si muovono durante un’esposizione.

Preset di Qualità

Configurazione

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

Come Funziona il Supersampling Temporale

Frame N (senza motion blur):       Frame N (con motion blur, 5 campioni):

  Istante singolo:                   5 sub-frame miscelati:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Risultato miscelato
                                     +--------+

Ogni sub-frame avanza la timeline dell’animazione di un incremento minuscolo (1/fps diviso per il conteggio dei campioni). I sub-frame vengono quindi miscelati con alpha blending per produrre il frame finale. Gli oggetti che si sono mossi tra i sub-frame appaiono sfocati lungo il loro percorso di movimento, mentre gli elementi stazionari rimangono nitidi.

Considerazioni sulle Prestazioni

Il motion blur moltiplica il tempo di rendering proporzionalmente al conteggio dei campioni. Un video di 10 secondi a 30fps ha 300 frame. Con qualità high (16 campioni), il renderer deve generare 4.800 sub-frame invece di 300. Usa la qualità draft durante lo sviluppo e passa a high o ultra solo per le esportazioni finali.

Il rendering cloud e il rendering parallelo Docker funzionano bene con il motion blur perché il costo per frame viene distribuito tra i worker. Un aumento di 16x per frame diviso tra 16 worker risulta approssimativamente nello stesso tempo totale di rendering di un rendering senza sfocatura su una macchina.

Esportazione GIF

L’esportazione GIF di Rendervid va ben oltre una semplice conversione frame-to-GIF. Utilizza la pipeline di generazione della palette di FFmpeg per produrre GIF animate ottimizzate e di alta qualità con dithering configurabile, conteggio dei colori e vincoli di dimensione file.

Come Funziona l’Ottimizzazione GIF

La codifica GIF standard utilizza una singola palette globale di 256 colori, che spesso risulta in banding e scarsa riproduzione del colore. Rendervid utilizza un approccio a due passaggi:

1. Passaggio 1 (palettegen): Analizza tutti i frame per generare una palette ottimale di 256 colori che rappresenta al meglio l’intera gamma di colori del video.
2. Passaggio 2 (paletteuse): Ricodifica ogni frame utilizzando la palette ottimizzata con dithering opzionale per gradienti fluidi.

Preset di Ottimizzazione

Opzioni di Dithering

Configurazione

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // risoluzione 480x480
    colors: 256,            // palette colori 2-256
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-ottimizza per rimanere sotto 5MB
    fps: 15,                // FPS più bassi = file più piccolo
  },
});

console.log(`Dimensione GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Dimensione stimata era: ${result.estimatedSizeKB} KB`);

Stima Dimensione File e Auto-Ottimizzazione

Quando imposti un targetSizeKB, Rendervid stima la dimensione del file di output prima del rendering e regola automaticamente i parametri (conteggio colori, risoluzione, FPS) per soddisfare l’obiettivo. Questo è particolarmente utile per piattaforme con limiti di dimensione file (es. limite di 50 MB di Slack, vincolo tipico di 10 MB per email).

// Auto-ottimizza per rientrare in un vincolo email di 2MB
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Architettura dei Pacchetti

Rendervid è organizzato come un monorepo con 13 pacchetti. Ogni pacchetto ha una responsabilità focalizzata e si compongono insieme per supportare ogni scenario di distribuzione.

@rendervid/
├── core                    Engine, tipi, validazione, sistema di animazione
│   ├── Parser e validatore template (AJV + JSON Schema)
│   ├── Engine di animazione (40+ preset, 30+ funzioni di easing)
│   ├── Sistema di layer (text, image, video, shape, audio, group, lottie, custom)
│   └── Gestione scene e transizioni (17 tipi)
│
├── renderer-browser        Rendering lato client
│   ├── Rendering frame basato su Canvas
│   ├── MediaRecorder per esportazione WebM
│   └── Encoder MP4 WebAssembly
│
├── renderer-node           Rendering lato server
│   ├── Browser headless Playwright/Puppeteer
│   ├── Integrazione FFmpeg (fluent-ffmpeg)
│   ├── Accelerazione GPU
│   └── Pipeline di ottimizzazione GIF
│
├── cloud-rendering         Orchestrazione multi-cloud
│   ├── Provider AWS Lambda
│   ├── Provider Azure Functions
│   ├── Provider Google Cloud Functions
│   ├── Provider Docker locale
│   ├── Divisore blocchi e merger
│   └── Adattatori object storage (S3, Blob, GCS)
│
├── player                  Componente player video/template
├── editor                  Editor visuale template (stato Zustand)
├── components              Componenti React pre-costruiti
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Definizioni template ed esempi (100+)
├── testing                 Utilità di testing
│   ├── Matcher personalizzati Vitest
│   ├── Helper per snapshot testing
│   └── Utilità di regressione visuale
│
├── editor-playground       Ambiente di sviluppo editor
├── player-playground       Ambiente di sviluppo player
├── mcp                     Server Model Context Protocol
└── docs                    Sito documentazione VitePress

Come si Collegano i Pacchetti

• @rendervid/core è la fondazione. Ogni altro pacchetto dipende da esso per i tipi di template, validazione e sistema di animazione.
• @rendervid/renderer-browser e @rendervid/renderer-node consumano entrambi i template core ma producono output attraverso pipeline diverse (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering avvolge renderer-node e distribuisce il suo lavoro tra funzioni cloud o container Docker.
• @rendervid/player e @rendervid/editor sono pacchetti UI basati su React per riproduzione ed editing visuale. L’editor utilizza Zustand per la gestione dello stato.
• @rendervid/components fornisce i componenti React pre-costruiti (AnimatedLineChart, AuroraBackground, ecc.) che possono essere utilizzati nei template.
• @rendervid/testing fornisce matcher Vitest e helper per snapshot testing per validare i template.
• mcp è il layer di integrazione AI che espone le capacità di Rendervid agli agenti AI tramite il Model Context Protocol.

Stack Tecnologico

Rendervid è costruito su uno stack TypeScript moderno scelto per affidabilità, prestazioni ed esperienza sviluppatore.

Testing

Rendervid include un pacchetto di testing dedicato (@rendervid/testing) che fornisce matcher Vitest personalizzati, helper per snapshot testing e utilità di regressione visuale per validare i template.

Matcher Personalizzati Vitest

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

describe("Template Vetrina Prodotto", () => {
  it("dovrebbe essere un template valido", () => {
    expect(template).toBeValidTemplate();
  });

  it("dovrebbe avere le dimensioni corrette", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("dovrebbe contenere almeno un layer di testo", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("dovrebbe avere animazioni sul titolo", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Testing

Lo snapshot testing renderizza un template in un’immagine e la confronta con un riferimento memorizzato. Qualsiasi cambiamento visivo causa il fallimento del test, rendendo facile individuare regressioni non intenzionali.

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

describe("Regressione Visuale Template", () => {
  it("dovrebbe corrispondere allo snapshot di riferimento al frame 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("dovrebbe corrispondere allo snapshot di riferimento al punto medio", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Testing di Regressione Visuale in CI

Integra i test di regressione visuale nella tua pipeline CI/CD per individuare i cambiamenti di rendering prima che raggiungano la produzione:

# .github/workflows/visual-regression.yml
name: Test di Regressione Visuale
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

Ottimizzazione delle Prestazioni

Ottenere i tempi di rendering più veloci possibili richiede la comprensione di dove viene speso il tempo e quali leve puoi tirare. Ecco le strategie di ottimizzazione più efficaci.

1. Scegli la Destinazione di Distribuzione Giusta

2. Ottimizza la Complessità del Template

• Riduci il conteggio dei layer. Ogni layer viene renderizzato indipendentemente. Meno layer significa meno operazioni di disegno per frame.
• Usa la qualità draft durante lo sviluppo e il testing. Passa a high o lossless solo per le esportazioni finali.
• Semplifica le animazioni durante l’anteprima. Sequenze di keyframe complesse con molte funzioni di easing aggiungono calcoli per frame.

3. Usa renderWaitTime con Saggezza

L’opzione renderWaitTime mette in pausa il rendering per consentire il caricamento di media esterni (immagini, video, font). Imposta questo al valore minimo che garantisce il caricamento di tutte le risorse. Un valore di 500-2000ms è tipico. Impostarlo troppo alto spreca tempo su ogni frame.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 secondo è solitamente sufficiente
});

4. Sfrutta il Rendering Parallelo

Per qualsiasi video più lungo di 10 secondi, il rendering parallelo (Docker o cloud) sarà più veloce del rendering sequenziale. Il punto di pareggio dipende dal tuo hardware e configurazione cloud, ma come regola generale:

• < 10 secondi: Un singolo renderer Node.js va bene
• 10-60 secondi: Docker con 4-8 worker
• 1-10 minuti: Docker con 8-16 worker o cloud
• > 10 minuti: Rendering cloud con 50+ worker

5. Ottimizza l’Output GIF

I GIF sono intrinsecamente grandi. Per mantenere le dimensioni dei file gestibili:

• Abbassa l’FPS a 10-15. La maggior parte dei GIF sembra buona a frame rate ridotti.
• Riduci la risoluzione usando i preset (social, web, email).
• Limita i colori a 128 o meno per animazioni semplici.
• Usa targetSizeKB per far auto-ottimizzare i parametri a Rendervid.
• Evita il dithering (none) se la dimensione del file conta più della qualità del gradiente.

6. Abilita l’Accelerazione GPU

Su macchine con GPU compatibili, la codifica accelerata hardware può ridurre i tempi di rendering di 2-5x per la fase di codifica. Questo è più efficace per output ad alta risoluzione (4K+) e alto bitrate.

7. Pre-carica le Risorse

Se il tuo template fa riferimento a immagini o video esterni, pre-scaricali nell’archiviazione locale prima del rendering. La latenza di rete durante il rendering è la causa più comune di rendering lenti o falliti.

Prossimi Passi

• Inizia con Rendervid: Visita la panoramica Rendervid per installazione e primo rendering
• Impara il sistema di template: Leggi la documentazione del Sistema di Template per la struttura template JSON, variabili, scene, layer e animazioni
• Esplora i componenti: Sfoglia la Libreria Componenti per componenti React pre-costruiti come AnimatedLineChart e AuroraBackground
• Configura l’integrazione AI: Vedi la guida Integrazione AI per connettere Claude Code, Cursor o Windsurf a Rendervid tramite MCP
• Visualizza il codice sorgente: Visita il repository GitHub di Rendervid per il codice sorgente completo e oltre 100 template di esempio