Rendervid Implementatie - Browser, Node.js, Cloud & Docker Rendering

Introductie

Rendervid is ontworpen om overal te renderen waar uw workflow dat vereist. Of u nu directe voorbeelden in de browser nodig heeft, professionele video encoding op een server, of massaal parallelle rendering over cloud infrastructuur, Rendervid biedt een toegewijd pakket voor elke omgeving. Elk implementatiedoel deelt hetzelfde template systeem en componentbibliotheek , dus een template die in de browser werkt, werkt identiek op AWS Lambda of in een Docker container.

Deze gids behandelt alle vier implementatie omgevingen, de rendering opties beschikbaar in elk, en geavanceerde functies zoals motion blur, GIF export, en prestatie optimalisatie. Aan het einde weet u precies welk implementatiepad bij uw project past en hoe u het moet configureren.

                        +---------------------+
                        |   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          |
                                               +-----------------+

Browser Rendering

Het @rendervid/renderer-browser pakket verzorgt client-side rendering volledig binnen de browser van de gebruiker. Er is geen server infrastructuur nodig. Dit maakt het het snelste pad van template naar voorbeeld.

Wanneer Browser Rendering Gebruiken

• Real-time voorbeelden tijdens template bewerking in de visuele editor
• Web applicaties die video of afbeelding assets on-the-fly moeten genereren
• Prototyping van nieuwe templates voordat u overgaat op server-side rendering
• Lichtgewicht exports waar MP4, WebM, PNG, JPEG, of WebP output voldoende is

Installatie

npm install @rendervid/renderer-browser

Hoe Het Werkt

Browser rendering gebruikt de HTML Canvas API om elk frame van de template te tekenen. De renderer doorloopt elke scene en laag, past animaties en easing functies toe, componeert het resultaat op een canvas element, en legt elk frame vast. Voor video output worden de frames gecodeerd met behulp van de ingebouwde MediaRecorder API van de browser (WebM) of een WebAssembly-gebaseerde MP4 encoder.

Ondersteunde Output Formaten

Code Voorbeeld

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

// Render naar een canvas element voor voorbeeld
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Exporteer een enkel frame als PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Browser Rendering Beperkingen

• Geen FFmpeg toegang, dus H.265/HEVC en MOV zijn niet beschikbaar
• GIF export vereist de Node.js renderer voor palet optimalisatie
• Maximale resolutie hangt af van de Canvas grootte limieten van de browser (typisch 4096x4096 of 8192x8192)
• Rendering snelheid hangt af van de CPU en GPU van het client apparaat

Node.js Rendering

Het @rendervid/renderer-node pakket biedt server-side rendering met volledige FFmpeg integratie. Het gebruikt Playwright of Puppeteer om elk frame in een headless browser te renderen, en stuurt vervolgens de frames naar FFmpeg voor professionele video encoding.

Wanneer Node.js Rendering Gebruiken

• Productie video encoding met volledige codec ondersteuning (H.264, H.265, VP9)
• Batch verwerking van honderden of duizenden templates in geautomatiseerde pipelines
• REST APIs die template JSON accepteren en gerenderde video retourneren
• CI/CD pipelines voor geautomatiseerde content generatie
• GIF export met palet optimalisatie en dithering controle

Installatie

# Installeer de renderer
npm install @rendervid/renderer-node

# Installeer Playwright (inclusief browser binaries)
npx playwright install chromium

# Installeer FFmpeg (vereist voor video encoding)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (via Chocolatey)
choco install ffmpeg

Ondersteunde Output Formaten

Rendering Kwaliteit Presets

Rendervid biedt vier kwaliteit presets die encoding parameters regelen:

GPU Versnelling

De Node.js renderer ondersteunt hardware versnelling om encoding naar de GPU te verplaatsen. Dit vermindert de rendertijd aanzienlijk voor complexe templates met veel lagen, hoge resoluties, en effecten.

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

GPU versnelling is beschikbaar op systemen met compatibele NVIDIA (NVENC), AMD (AMF), of Intel (Quick Sync) hardware. FFmpeg moet gecompileerd zijn met de overeenkomstige encoder ondersteuning.

Code Voorbeeld

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: "Kop",
      default: "Uw Product, Verheven",
    },
  },
};

// Render met aangepaste inputs
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Wacht 2s voor media om te laden
  inputs: {
    headline: "Zomeraanbieding — 50% Korting op Alles",
  },
});

console.log(`Gerenderd: ${result.outputPath}`);
console.log(`Duur: ${result.duration}s`);
console.log(`Bestandsgrootte: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Batch Verwerking

Voor het verwerken van veel templates in volgorde, gebruik de batch API:

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

Voor echte parallelle rendering op één machine, zie de Docker Lokale Rendering sectie hieronder.

Cloud Rendering

Het @rendervid/cloud-rendering pakket maakt gedistribueerde, parallelle rendering mogelijk over cloud infrastructuur. In plaats van frames sequentieel op één machine te renderen, splitst cloud rendering het werk over veel worker functies die frames gelijktijdig renderen, en voegt ze vervolgens samen tot de uiteindelijke output.

Wanneer Cloud Rendering Gebruiken

• Hoge doorvoer pipelines die honderden video’s per uur verwerken
• Lange content waar sequentiële rendering te traag is
• Tijdgevoelige workloads waar een 10-50x versnelling belangrijk is
• Auto-scaling om onvoorspelbare vraagpieken te verwerken

Architectuur

+------------------+
|   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      |
     +------------------+

Hoe het stap voor stap werkt:

1. De coördinator analyseert de template en bepaalt hoeveel frames moeten worden gerenderd op basis van de totale duur en FPS.
2. De chunk splitter verdeelt het totale aantal frames in chunks (bijv. 30 frames per chunk voor een 30fps video = 1 seconde per chunk).
3. Elke worker functie ontvangt een chunk toewijzing (start frame, eind frame), rendert die frames met behulp van de Node.js renderer, en uploadt het gerenderde segment naar object storage.
4. De merger downloadt alle segmenten en voegt ze samen tot de uiteindelijke video met behulp van FFmpeg.
5. De uiteindelijke output wordt opgeslagen in de object storage van de cloud provider (S3, Azure Blob, of GCS) en optioneel gedownload naar het lokale bestandssysteem.

Cloud Configuratie

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

De volledige configuratie interface:

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

AWS Lambda Setup

AWS Lambda is het meest voorkomende cloud implementatiedoel. Elke worker functie draait in een aparte Lambda invocatie, wat massale parallellisatie mogelijk maakt.

Vereisten:

• AWS account met Lambda en S3 toegang
• AWS CLI geconfigureerd
• Node.js 18+ Lambda runtime

Configuratie:

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

Typische AWS Lambda configuratie:

• Geheugen: 1024-3008 MB (meer geheugen = meer CPU = snellere rendering)
• Timeout: 300 seconden (5 minuten)
• Ephemeral storage: 512 MB - 10 GB
• Concurrency: 100-1000 (aanpassen op basis van workload)

Azure Functions Setup

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

Google Cloud Functions Setup

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

Kosten Vergelijking

Alle cloud providers bieden gratis tiers die aanzienlijke rendering workloads dekken tijdens ontwikkeling en lage-volume productie.

Prestatie Benchmarks

Cloud rendering bereikt een 10-50x versnelling vergeleken met single-machine sequentiële rendering. De exacte versnelling hangt af van het aantal workers, template complexiteit, en video duur.

Langere video’s profiteren meer van parallellisme omdat de overhead van worker startup en frame merging wordt geamortiseerd over meer frames.

Docker Lokale Rendering

Docker-gebaseerde rendering geeft u dezelfde parallelle rendering architectuur als cloud rendering, maar draait volledig op uw lokale machine. Het is volledig gratis, gebruikt geen cloud accounts, en is ideaal voor self-hosted setups, ontwikkeling, en teams die parallelle rendering willen zonder cloud kosten.

Wanneer Docker Rendering Gebruiken

• Gratis parallelle rendering zonder cloud provider accounts
• Self-hosted infrastructuur achter een firewall
• Ontwikkeling en testen van cloud rendering workflows lokaal
• Kleine tot middelgrote workloads die profiteren van parallellisme maar geen auto-scaling nodig hebben

Installatie

# Zorg ervoor dat Docker is geïnstalleerd en draait
docker --version

# Installeer het cloud rendering pakket
npm install @rendervid/cloud-rendering

Configuratie

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, // Aantal Docker containers om parallel te draaien
  },
});

const result = await renderer.render(template);
console.log(`Gerenderd in ${result.renderTime}ms met ${result.workersUsed} workers`);

workersCount kiezen: Stel dit in op het aantal CPU cores beschikbaar op uw machine. Bijvoorbeeld, een 8-core machine werkt goed met 8 workers. Verder gaan dan uw core count voegt overhead toe door context switching zonder de doorvoer te verbeteren.

Docker Architectuur

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

Elke Docker container is een zelfstandige worker met Node.js, Playwright, en FFmpeg vooraf geïnstalleerd. Workers lezen hun frame toewijzingen van het gedeelde volume, renderen de frames, en schrijven de resultaten terug. De coördinator voegt vervolgens alle segmenten samen tot de uiteindelijke output.

Motion Blur

Rendervid ondersteunt motion blur via temporele supersampling. In plaats van een enkel moment per frame te renderen, legt de renderer meerdere sub-frames vast op licht verschillende tijdspunten en mengt ze samen. Dit produceert de natuurlijke vervaging die camera’s creëren wanneer objecten bewegen tijdens een belichting.

Kwaliteit Presets

Configuratie

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

Hoe Temporele Supersampling Werkt

Frame N (geen motion blur):        Frame N (met motion blur, 5 samples):

  Enkel moment:                     5 sub-frames gemengd:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Gemengd resultaat
                                     +--------+

Elk sub-frame verplaatst de animatie tijdlijn met een kleine stap (1/fps gedeeld door het aantal samples). De sub-frames worden vervolgens alpha-gemengd om het uiteindelijke frame te produceren. Objecten die tussen sub-frames bewogen zijn, verschijnen vervaagd langs hun bewegingspad, terwijl stationaire elementen scherp blijven.

Prestatie Overwegingen

Motion blur vermenigvuldigt de rendertijd evenredig met het aantal samples. Een 10-seconden video op 30fps heeft 300 frames. Met high kwaliteit (16 samples) moet de renderer 4.800 sub-frames genereren in plaats van 300. Gebruik draft kwaliteit tijdens ontwikkeling en schakel over naar high of ultra alleen voor definitieve exports.

Cloud rendering en Docker parallelle rendering werken goed met motion blur omdat de per-frame kosten worden verdeeld over workers. Een 16x per-frame toename gedeeld door 16 workers resulteert in ongeveer dezelfde totale rendertijd als een niet-vervaagde render op één machine.

GIF Export

Rendervid’s GIF export gaat veel verder dan een eenvoudige frame-naar-GIF conversie. Het gebruikt FFmpeg’s palet generatie pipeline om geoptimaliseerde, hoogwaardige geanimeerde GIF’s te produceren met configureerbare dithering, kleuraantallen, en bestandsgrootte beperkingen.

Hoe GIF Optimalisatie Werkt

Standaard GIF encoding gebruikt een enkel globaal palet van 256 kleuren, wat vaak resulteert in banding en slechte kleurweergave. Rendervid gebruikt een twee-stappen aanpak:

1. Stap 1 (palettegen): Analyseer alle frames om een optimaal 256-kleuren palet te genereren dat het volledige kleurbereik van de video het beste vertegenwoordigt.
2. Stap 2 (paletteuse): Hercodeer elk frame met behulp van het geoptimaliseerde palet met optionele dithering voor gladde kleurovergangen.

Optimalisatie Presets

Dithering Opties

Configuratie

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 resolutie
    colors: 256,            // 2-256 kleuren palet
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimaliseer om onder 5MB te blijven
    fps: 15,                // Lagere FPS = kleiner bestand
  },
});

console.log(`GIF grootte: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Geschatte grootte was: ${result.estimatedSizeKB} KB`);

Bestandsgrootte Schatting en Auto-Optimalisatie

Wanneer u een targetSizeKB instelt, schat Rendervid de output bestandsgrootte voor het renderen en past automatisch parameters aan (kleurenaantal, resolutie, FPS) om het doel te bereiken. Dit is bijzonder handig voor platforms met bestandsgrootte limieten (bijv. Slack’s 50 MB limiet, email’s typische 10 MB beperking).

// Auto-optimaliseer om binnen een 2MB email beperking te passen
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Pakket Architectuur

Rendervid is georganiseerd als een monorepo met 13 pakketten. Elk pakket heeft een gerichte verantwoordelijkheid, en ze componeren samen om elk implementatie scenario te ondersteunen.

@rendervid/
├── core                    Engine, types, validatie, animatie systeem
│   ├── Template parser en validator (AJV + JSON Schema)
│   ├── Animatie engine (40+ presets, 30+ easing functies)
│   ├── Laag systeem (text, image, video, shape, audio, group, lottie, custom)
│   └── Scene management en transities (17 types)
│
├── renderer-browser        Client-side rendering
│   ├── Canvas-gebaseerde frame rendering
│   ├── MediaRecorder voor WebM export
│   └── WebAssembly MP4 encoder
│
├── renderer-node           Server-side rendering
│   ├── Playwright/Puppeteer headless browser
│   ├── FFmpeg integratie (fluent-ffmpeg)
│   ├── GPU versnelling
│   └── GIF optimalisatie pipeline
│
├── cloud-rendering         Multi-cloud orchestratie
│   ├── AWS Lambda provider
│   ├── Azure Functions provider
│   ├── Google Cloud Functions provider
│   ├── Docker local provider
│   ├── Chunk splitter en merger
│   └── Object storage adapters (S3, Blob, GCS)
│
├── player                  Video/template player component
├── editor                  Visuele template editor (Zustand state)
├── components              Voorgebouwde React componenten
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Template definities en voorbeelden (100+)
├── testing                 Testing utilities
│   ├── Vitest custom matchers
│   ├── Snapshot testing helpers
│   └── Visual regression utilities
│
├── editor-playground       Editor ontwikkel omgeving
├── player-playground       Player ontwikkel omgeving
├── mcp                     Model Context Protocol server
└── docs                    VitePress documentatie site

Hoe de Pakketten Verbinden

• @rendervid/core is de basis. Elk ander pakket is afhankelijk van core voor template types, validatie, en het animatie systeem.
• @rendervid/renderer-browser en @rendervid/renderer-node consumeren beide core templates maar outputten via verschillende pipelines (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering wikkelt renderer-node in en distribueert het werk over cloud functies of Docker containers.
• @rendervid/player en @rendervid/editor zijn React-gebaseerde UI pakketten voor afspelen en visuele bewerking. De editor gebruikt Zustand voor state management.
• @rendervid/components biedt de voorgebouwde React componenten (AnimatedLineChart, AuroraBackground, etc.) die in templates kunnen worden gebruikt.
• @rendervid/testing biedt Vitest matchers en snapshot testing helpers voor het valideren van templates.
• mcp is de AI integratie laag die Rendervid’s mogelijkheden blootlegt aan AI agents via het Model Context Protocol.

Technologie Stack

Rendervid is gebouwd op een moderne TypeScript stack gekozen voor betrouwbaarheid, prestaties, en ontwikkelaar ervaring.

Testen

Rendervid bevat een toegewijd testing pakket (@rendervid/testing) dat custom Vitest matchers, snapshot testing helpers, en visual regression utilities biedt voor het valideren van templates.

Vitest Custom Matchers

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

describe("Product Showcase Template", () => {
  it("moet een geldige template zijn", () => {
    expect(template).toBeValidTemplate();
  });

  it("moet de juiste afmetingen hebben", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("moet minstens één tekstlaag bevatten", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("moet animaties hebben op de kop", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Testing

Snapshot testing rendert een template naar een afbeelding en vergelijkt deze met een opgeslagen referentie. Elke visuele verandering zorgt ervoor dat de test faalt, waardoor het gemakkelijk is om onbedoelde regressies op te vangen.

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

describe("Template Visual Regression", () => {
  it("moet overeenkomen met de referentie snapshot op frame 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("moet overeenkomen met de referentie snapshot op het middelpunt", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Visual Regression Testing in CI

Integreer visual regression tests in uw CI/CD pipeline om rendering veranderingen op te vangen voordat ze productie bereiken:

# .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

Prestatie Optimalisatie

Het behalen van de snelst mogelijke rendertijden vereist begrip van waar tijd wordt besteed en welke hefbomen u kunt gebruiken. Hier zijn de meest impactvolle optimalisatie strategieën.

1. Kies het Juiste Implementatiedoel

2. Optimaliseer Template Complexiteit

• Verminder laag aantal. Elke laag wordt onafhankelijk gerenderd. Minder lagen betekent minder teken operaties per frame.
• Gebruik draft kwaliteit tijdens ontwikkeling en testen. Schakel over naar high of lossless alleen voor definitieve exports.
• Vereenvoudig animaties tijdens voorbeelden. Complexe keyframe sequenties met veel easing functies voegen berekening toe per frame.

3. Gebruik renderWaitTime Verstandig

De renderWaitTime optie pauzeert rendering om externe media (afbeeldingen, video’s, fonts) te laten laden. Stel dit in op de minimale waarde die ervoor zorgt dat alle assets zijn geladen. Een waarde van 500-2000ms is typisch. Te hoog instellen verspilt tijd op elk frame.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 seconde is meestal genoeg
});

4. Benut Parallelle Rendering

Voor elke video langer dan 10 seconden zal parallelle rendering (Docker of cloud) sneller zijn dan sequentiële rendering. Het break-even punt hangt af van uw hardware en cloud configuratie, maar als vuistregel:

• < 10 seconden: Enkele Node.js renderer is prima
• 10-60 seconden: Docker met 4-8 workers
• 1-10 minuten: Docker met 8-16 workers of cloud
• > 10 minuten: Cloud rendering met 50+ workers

5. Optimaliseer GIF Output

GIF’s zijn inherent groot. Om bestandsgroottes beheersbaar te houden:

• Verlaag de FPS naar 10-15. Meeste GIF’s zien er prima uit op verlaagde frame rates.
• Verminder resolutie met behulp van presets (social, web, email).
• Beperk kleuren tot 128 of minder voor eenvoudige animaties.
• Gebruik targetSizeKB om Rendervid parameters automatisch te laten optimaliseren.
• Vermijd dithering (none) als bestandsgrootte belangrijker is dan kleurovergang kwaliteit.

6. Schakel GPU Versnelling In

Op machines met compatibele GPU’s kan hardware-versnelde encoding rendertijden met 2-5x verminderen voor de encoding stap. Dit is het meest impactvol voor hoge resoluties (4K+) en hoge bitrate outputs.

7. Pre-load Assets

Als uw template verwijst naar externe afbeeldingen of video’s, download ze vooraf naar lokale opslag voor het renderen. Netwerk latentie tijdens rendering is de meest voorkomende oorzaak van trage of mislukte renders.

Volgende Stappen

• Begin met Rendervid: Bezoek het Rendervid overzicht voor installatie en eerste render
• Leer het template systeem: Lees de Template Systeem documentatie voor JSON template structuur, variabelen, scenes, lagen, en animaties
• Verken componenten: Blader door de Component Bibliotheek voor voorgebouwde React componenten zoals AnimatedLineChart en AuroraBackground
• Stel AI integratie in: Zie de AI Integratie gids om Claude Code, Cursor, of Windsurf te verbinden met Rendervid via MCP
• Bekijk de bron: Bezoek de Rendervid GitHub repository voor de volledige broncode en 100+ voorbeeld templates