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

Einführung

Rendervid ist so konzipiert, dass es überall rendert, wo Ihr Workflow es erfordert. Ob Sie sofortige Vorschauen im Browser, produktionsreife Videokodierung auf einem Server oder massiv paralleles Rendering über Cloud-Infrastruktur benötigen, Rendervid bietet ein dediziertes Paket für jede Umgebung. Jedes Deployment-Ziel teilt sich dasselbe Template-System und die Komponentenbibliothek , sodass ein Template, das im Browser funktioniert, identisch auf AWS Lambda oder in einem Docker-Container funktioniert.

Dieser Leitfaden behandelt alle vier Deployment-Umgebungen, die in jeder verfügbaren Rendering-Optionen und erweiterte Funktionen wie Motion Blur, GIF-Export und Performance-Optimierung. Am Ende werden Sie genau wissen, welcher Deployment-Pfad zu Ihrem Projekt passt und wie Sie ihn konfigurieren.

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

Das @rendervid/renderer-browser-Paket übernimmt das clientseitige Rendering vollständig im Browser des Benutzers. Es ist keine Server-Infrastruktur erforderlich. Dies macht es zum schnellsten Weg vom Template zur Vorschau.

Wann Browser-Rendering verwenden

• Echtzeit-Vorschauen während der Template-Bearbeitung im visuellen Editor
• Webanwendungen, die Video- oder Bild-Assets spontan generieren müssen
• Prototyping neuer Templates, bevor Sie sich für serverseitiges Rendering entscheiden
• Leichte Exports, bei denen MP4-, WebM-, PNG-, JPEG- oder WebP-Ausgabe ausreicht

Installation

npm install @rendervid/renderer-browser

Wie es funktioniert

Browser-Rendering verwendet die HTML Canvas API, um jeden Frame des Templates zu zeichnen. Der Renderer durchläuft jede Szene und Ebene, wendet Animationen und Easing-Funktionen an, komponiert das Ergebnis auf ein Canvas-Element und erfasst jeden Frame. Für Video-Ausgabe werden die Frames mit der browsereigenen MediaRecorder API (WebM) oder einem WebAssembly-basierten MP4-Encoder kodiert.

Unterstützte Ausgabeformate

Code-Beispiel

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

// Auf ein Canvas-Element für Vorschau rendern
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Einzelnen Frame als PNG exportieren
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Browser-Rendering-Einschränkungen

• Kein FFmpeg-Zugriff, daher sind H.265/HEVC und MOV nicht verfügbar
• GIF-Export erfordert den Node.js-Renderer für Palettenoptimierung
• Maximale Auflösung hängt von den Canvas-Größenbeschränkungen des Browsers ab (typischerweise 4096x4096 oder 8192x8192)
• Rendering-Geschwindigkeit hängt von der CPU und GPU des Client-Geräts ab

Node.js-Rendering

Das @rendervid/renderer-node-Paket bietet serverseitiges Rendering mit vollständiger FFmpeg-Integration. Es verwendet Playwright oder Puppeteer, um jeden Frame in einem Headless-Browser zu rendern, und leitet die Frames dann an FFmpeg für professionelle Videokodierung weiter.

Wann Node.js-Rendering verwenden

• Produktions-Videokodierung mit vollständiger Codec-Unterstützung (H.264, H.265, VP9)
• Stapelverarbeitung von Hunderten oder Tausenden von Templates in automatisierten Pipelines
• REST-APIs, die Template-JSON akzeptieren und gerendertes Video zurückgeben
• CI/CD-Pipelines für automatisierte Content-Generierung
• GIF-Export mit Palettenoptimierung und Dithering-Steuerung

Installation

# Renderer installieren
npm install @rendervid/renderer-node

# Playwright installieren (beinhaltet Browser-Binaries)
npx playwright install chromium

# FFmpeg installieren (erforderlich für Videokodierung)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (über Chocolatey)
choco install ffmpeg

Unterstützte Ausgabeformate

Rendering-Qualitätsvoreinstellungen

Rendervid bietet vier Qualitätsvoreinstellungen, die Kodierungsparameter steuern:

GPU-Beschleunigung

Der Node.js-Renderer unterstützt Hardware-Beschleunigung, um die Kodierung auf die GPU auszulagern. Dies reduziert die Renderzeit für komplexe Templates mit vielen Ebenen, hohen Auflösungen und Effekten erheblich.

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

GPU-Beschleunigung ist auf Systemen mit kompatibler NVIDIA (NVENC), AMD (AMF) oder Intel (Quick Sync) Hardware verfügbar. FFmpeg muss mit der entsprechenden Encoder-Unterstützung kompiliert sein.

Code-Beispiel

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: "Überschrift",
      default: "Ihr Produkt, Erhoben",
    },
  },
};

// Mit benutzerdefinierten Eingaben rendern
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // 2s warten, bis Medien geladen sind
  inputs: {
    headline: "Sommerschlussverkauf — 50% auf Alles",
  },
});

console.log(`Gerendert: ${result.outputPath}`);
console.log(`Dauer: ${result.duration}s`);
console.log(`Dateigröße: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Stapelverarbeitung

Für die Verarbeitung vieler Templates in Folge verwenden Sie die 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,
  });
}

Für echtes paralleles Rendering auf einer einzelnen Maschine siehe den Abschnitt Docker Local Rendering unten.

Cloud-Rendering

Das @rendervid/cloud-rendering-Paket ermöglicht verteiltes, paralleles Rendering über Cloud-Infrastruktur. Anstatt Frames sequenziell auf einer Maschine zu rendern, teilt Cloud-Rendering die Arbeit auf viele Worker-Funktionen auf, die Frames gleichzeitig rendern, und fügt sie dann zur finalen Ausgabe zusammen.

Wann Cloud-Rendering verwenden

• Hochdurchsatz-Pipelines, die Hunderte von Videos pro Stunde verarbeiten
• Langformatige Inhalte, bei denen sequenzielles Rendering zu langsam ist
• Zeitkritische Workloads, bei denen eine 10-50x Beschleunigung wichtig ist
• Auto-Skalierung, um unvorhersehbare Nachfragespitzen zu bewältigen

Architektur

+------------------+
|   Your App       |
|  (Coordinator)   |
+--------+---------+
         |
         | 1. Video in Frame-Chunks aufteilen
         v
+--------+---------+
|   Chunk Splitter |
+--------+---------+
         |
         |  2. Chunks an Worker verteilen
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Jeder Worker rendert seine Frames
      v            v           v
+-----+------+----+------+----+----+
|  Frames    |  Frames   |  Frames |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Zu finalem Video kombinieren
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Herunterladen oder bereitstellen
             v
     +-------+---------+
     |   Final Output   |
     |   video.mp4      |
     +------------------+

So funktioniert es Schritt für Schritt:

1. Der Koordinator analysiert das Template und bestimmt, wie viele Frames basierend auf der Gesamtdauer und FPS gerendert werden müssen.
2. Der Chunk-Splitter teilt die Gesamtzahl der Frames in Chunks auf (z.B. 30 Frames pro Chunk für ein 30fps-Video = 1 Sekunde pro Chunk).
3. Jede Worker-Funktion erhält eine Chunk-Zuweisung (Start-Frame, End-Frame), rendert diese Frames mit dem Node.js-Renderer und lädt das gerenderte Segment in den Object Storage hoch.
4. Der Merger lädt alle Segmente herunter und verkettet sie mit FFmpeg zum finalen Video.
5. Die finale Ausgabe wird im Object Storage des Cloud-Providers (S3, Azure Blob oder GCS) gespeichert und optional auf das lokale Dateisystem heruntergeladen.

Cloud-Konfiguration

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

Das vollständige Konfigurationsinterface:

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 ist das häufigste Cloud-Deployment-Ziel. Jede Worker-Funktion läuft in einer separaten Lambda-Invocation, was massive Parallelität ermöglicht.

Voraussetzungen:

• AWS-Konto mit Lambda- und S3-Zugriff
• AWS CLI konfiguriert
• Node.js 18+ Lambda-Runtime

Konfiguration:

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

Typische AWS Lambda-Konfiguration:

• Speicher: 1024-3008 MB (mehr Speicher = mehr CPU = schnelleres Rendering)
• Timeout: 300 Sekunden (5 Minuten)
• Ephemeral Storage: 512 MB - 10 GB
• Concurrency: 100-1000 (je nach Workload anpassen)

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

Kostenvergleich

Alle Cloud-Provider bieten Free Tiers, die während der Entwicklung und bei geringem Produktionsvolumen erhebliche Rendering-Workloads abdecken.

Performance-Benchmarks

Cloud-Rendering erreicht eine 10-50x Beschleunigung im Vergleich zu sequenziellem Rendering auf einer einzelnen Maschine. Die genaue Beschleunigung hängt von der Anzahl der Worker, der Template-Komplexität und der Videodauer ab.

Längere Videos profitieren mehr von Parallelität, da der Overhead für Worker-Start und Frame-Merging über mehr Frames amortisiert wird.

Docker Local Rendering

Docker-basiertes Rendering bietet Ihnen dieselbe parallele Rendering-Architektur wie Cloud-Rendering, läuft aber vollständig auf Ihrer lokalen Maschine. Es ist völlig kostenlos, verwendet keine Cloud-Konten und ist ideal für selbstgehostete Setups, Entwicklung und Teams, die paralleles Rendering ohne Cloud-Kosten wünschen.

Wann Docker-Rendering verwenden

• Kostenloses paralleles Rendering ohne Cloud-Provider-Konten
• Selbstgehostete Infrastruktur hinter einer Firewall
• Entwicklung und Testing von Cloud-Rendering-Workflows lokal
• Kleine bis mittlere Workloads, die von Parallelität profitieren, aber keine Auto-Skalierung benötigen

Installation

# Sicherstellen, dass Docker installiert ist und läuft
docker --version

# Cloud-Rendering-Paket installieren
npm install @rendervid/cloud-rendering

Konfiguration

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, // Anzahl der parallel laufenden Docker-Container
  },
});

const result = await renderer.render(template);
console.log(`Gerendert in ${result.renderTime}ms mit ${result.workersUsed} Workern`);

workersCount wählen: Setzen Sie dies auf die Anzahl der verfügbaren CPU-Kerne auf Ihrer Maschine. Zum Beispiel funktioniert eine 8-Kern-Maschine gut mit 8 Workern. Über Ihre Kernanzahl hinauszugehen fügt Overhead durch Context-Switching hinzu, ohne den Durchsatz zu verbessern.

Docker-Architektur

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

Jeder Docker-Container ist ein eigenständiger Worker mit vorinstalliertem Node.js, Playwright und FFmpeg. Worker lesen ihre Frame-Zuweisungen vom gemeinsamen Volume, rendern die Frames und schreiben die Ergebnisse zurück. Der Koordinator fügt dann alle Segmente zur finalen Ausgabe zusammen.

Motion Blur

Rendervid unterstützt Motion Blur durch temporales Supersampling. Anstatt einen einzelnen Moment pro Frame zu rendern, erfasst der Renderer mehrere Sub-Frames zu leicht unterschiedlichen Zeitpunkten und mischt sie zusammen. Dies erzeugt die natürliche Unschärfe, die Kameras erzeugen, wenn sich Objekte während einer Belichtung bewegen.

Qualitätsvoreinstellungen

Konfiguration

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

Wie temporales Supersampling funktioniert

Frame N (ohne Motion Blur):          Frame N (mit Motion Blur, 5 Samples):

  Einzelner Moment:                    5 Sub-Frames gemischt:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Gemischtes Ergebnis
                                     +--------+

Jeder Sub-Frame schreitet die Animations-Timeline um ein winziges Inkrement voran (1/fps geteilt durch die Sample-Anzahl). Die Sub-Frames werden dann alpha-gemischt, um den finalen Frame zu erzeugen. Objekte, die sich zwischen Sub-Frames bewegt haben, erscheinen entlang ihres Bewegungspfades verschwommen, während stationäre Elemente scharf bleiben.

Performance-Überlegungen

Motion Blur multipliziert die Renderzeit proportional zur Sample-Anzahl. Ein 10-Sekunden-Video bei 30fps hat 300 Frames. Mit high-Qualität (16 Samples) muss der Renderer 4.800 Sub-Frames anstelle von 300 generieren. Verwenden Sie draft-Qualität während der Entwicklung und wechseln Sie nur für finale Exports zu high oder ultra.

Cloud-Rendering und Docker-paralleles Rendering funktionieren gut mit Motion Blur, da die Pro-Frame-Kosten auf Worker verteilt werden. Eine 16x Pro-Frame-Erhöhung geteilt durch 16 Worker ergibt ungefähr dieselbe Gesamt-Renderzeit wie ein nicht-verschwommener Render auf einer Maschine.

GIF-Export

Rendervids GIF-Export geht weit über eine einfache Frame-zu-GIF-Konvertierung hinaus. Es verwendet FFmpegs Palettengenerierungs-Pipeline, um optimierte, hochqualitative animierte GIFs mit konfigurierbarem Dithering, Farbanzahlen und Dateigrößenbeschränkungen zu erzeugen.

Wie GIF-Optimierung funktioniert

Standard-GIF-Kodierung verwendet eine einzelne globale Palette von 256 Farben, was oft zu Banding und schlechter Farbwiedergabe führt. Rendervid verwendet einen zweistufigen Ansatz:

1. Pass 1 (palettegen): Alle Frames analysieren, um eine optimale 256-Farben-Palette zu generieren, die den gesamten Farbbereich des Videos am besten repräsentiert.
2. Pass 2 (paletteuse): Jeden Frame mit der optimierten Palette und optionalem Dithering für sanfte Verläufe neu kodieren.

Optimierungsvoreinstellungen

Dithering-Optionen

Konfiguration

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 Auflösung
    colors: 256,            // 2-256 Farbpalette
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-Optimierung unter 5MB
    fps: 15,                // Niedrigere FPS = kleinere Datei
  },
});

console.log(`GIF-Größe: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Geschätzte Größe war: ${result.estimatedSizeKB} KB`);

Dateigrößenschätzung und Auto-Optimierung

Wenn Sie ein targetSizeKB festlegen, schätzt Rendervid die Ausgabedateigröße vor dem Rendering und passt automatisch Parameter (Farbanzahl, Auflösung, FPS) an, um das Ziel zu erreichen. Dies ist besonders nützlich für Plattformen mit Dateigrößenbeschränkungen (z.B. Slacks 50 MB-Limit, typische 10 MB-Beschränkung für E-Mails).

// Auto-Optimierung für 2MB E-Mail-Beschränkung
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Paket-Architektur

Rendervid ist als Monorepo mit 13 Paketen organisiert. Jedes Paket hat eine fokussierte Verantwortung, und sie fügen sich zusammen, um jedes Deployment-Szenario zu unterstützen.

@rendervid/
├── core                    Engine, Typen, Validierung, Animationssystem
│   ├── Template-Parser und Validator (AJV + JSON Schema)
│   ├── Animations-Engine (40+ Presets, 30+ Easing-Funktionen)
│   ├── Layer-System (text, image, video, shape, audio, group, lottie, custom)
│   └── Szenen-Management und Übergänge (17 Typen)
│
├── renderer-browser        Clientseitiges Rendering
│   ├── Canvas-basiertes Frame-Rendering
│   ├── MediaRecorder für WebM-Export
│   └── WebAssembly MP4-Encoder
│
├── renderer-node           Serverseitiges Rendering
│   ├── Playwright/Puppeteer Headless-Browser
│   ├── FFmpeg-Integration (fluent-ffmpeg)
│   ├── GPU-Beschleunigung
│   └── GIF-Optimierungs-Pipeline
│
├── cloud-rendering         Multi-Cloud-Orchestrierung
│   ├── AWS Lambda Provider
│   ├── Azure Functions Provider
│   ├── Google Cloud Functions Provider
│   ├── Docker Local Provider
│   ├── Chunk-Splitter und Merger
│   └── Object Storage Adapter (S3, Blob, GCS)
│
├── player                  Video/Template-Player-Komponente
├── editor                  Visueller Template-Editor (Zustand State)
├── components              Vorgefertigte React-Komponenten
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Template-Definitionen und Beispiele (100+)
├── testing                 Testing-Utilities
│   ├── Vitest Custom Matchers
│   ├── Snapshot-Testing-Helfer
│   └── Visual Regression Utilities
│
├── editor-playground       Editor-Entwicklungsumgebung
├── player-playground       Player-Entwicklungsumgebung
├── mcp                     Model Context Protocol Server
└── docs                    VitePress-Dokumentationsseite

Wie die Pakete zusammenhängen

• @rendervid/core ist die Grundlage. Jedes andere Paket hängt davon für Template-Typen, Validierung und das Animationssystem ab.
• @rendervid/renderer-browser und @rendervid/renderer-node konsumieren beide Core-Templates, geben aber über unterschiedliche Pipelines aus (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering umhüllt renderer-node und verteilt seine Arbeit auf Cloud-Funktionen oder Docker-Container.
• @rendervid/player und @rendervid/editor sind React-basierte UI-Pakete für Wiedergabe und visuelle Bearbeitung. Der Editor verwendet Zustand für State-Management.
• @rendervid/components bietet die vorgefertigten React-Komponenten (AnimatedLineChart, AuroraBackground, etc.), die in Templates verwendet werden können.
• @rendervid/testing bietet Vitest-Matcher und Snapshot-Testing-Helfer zur Validierung von Templates.
• mcp ist die KI-Integrations -Schicht, die Rendervids Fähigkeiten über das Model Context Protocol für KI-Agenten verfügbar macht.

Technologie-Stack

Rendervid basiert auf einem modernen TypeScript-Stack, der für Zuverlässigkeit, Performance und Entwicklererfahrung ausgewählt wurde.

Testing

Rendervid enthält ein dediziertes Testing-Paket (@rendervid/testing), das Custom Vitest Matchers, Snapshot-Testing-Helfer und Visual Regression Utilities zur Validierung von Templates bereitstellt.

Vitest Custom Matchers

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

describe("Product Showcase Template", () => {
  it("sollte ein gültiges Template sein", () => {
    expect(template).toBeValidTemplate();
  });

  it("sollte die richtigen Abmessungen haben", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("sollte mindestens eine Text-Ebene enthalten", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("sollte Animationen auf der Überschrift haben", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot-Testing

Snapshot-Testing rendert ein Template zu einem Bild und vergleicht es mit einer gespeicherten Referenz. Jede visuelle Änderung führt dazu, dass der Test fehlschlägt, was es einfach macht, unbeabsichtigte Regressionen zu erkennen.

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

describe("Template Visual Regression", () => {
  it("sollte mit dem Referenz-Snapshot bei Frame 0 übereinstimmen", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("sollte mit dem Referenz-Snapshot am Mittelpunkt übereinstimmen", 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

Integrieren Sie Visual Regression Tests in Ihre CI/CD-Pipeline, um Rendering-Änderungen zu erkennen, bevor sie die Produktion erreichen:

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

Performance-Optimierung

Um die schnellstmöglichen Renderzeiten zu erzielen, müssen Sie verstehen, wo Zeit verbracht wird und welche Hebel Sie ziehen können. Hier sind die wirkungsvollsten Optimierungsstrategien.

1. Wählen Sie das richtige Deployment-Ziel

2. Template-Komplexität optimieren

• Ebenenanzahl reduzieren. Jede Ebene wird unabhängig gerendert. Weniger Ebenen bedeuten weniger Zeichenoperationen pro Frame.
• Verwenden Sie draft-Qualität während Entwicklung und Testing. Wechseln Sie nur für finale Exports zu high oder lossless.
• Animationen vereinfachen während der Vorschau. Komplexe Keyframe-Sequenzen mit vielen Easing-Funktionen fügen Berechnung pro Frame hinzu.

3. renderWaitTime weise verwenden

Die renderWaitTime-Option pausiert das Rendering, damit externe Medien (Bilder, Videos, Schriften) geladen werden können. Setzen Sie dies auf den Minimalwert, der sicherstellt, dass alle Assets geladen sind. Ein Wert von 500-2000ms ist typisch. Zu hoch eingestellt verschwendet Zeit bei jedem Frame.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 Sekunde ist normalerweise genug
});

4. Paralleles Rendering nutzen

Für jedes Video länger als 10 Sekunden ist paralleles Rendering (Docker oder Cloud) schneller als sequenzielles Rendering. Der Break-Even-Punkt hängt von Ihrer Hardware und Cloud-Konfiguration ab, aber als Faustregel:

• < 10 Sekunden: Einzelner Node.js-Renderer ist in Ordnung
• 10-60 Sekunden: Docker mit 4-8 Workern
• 1-10 Minuten: Docker mit 8-16 Workern oder Cloud
• > 10 Minuten: Cloud-Rendering mit 50+ Workern

5. GIF-Ausgabe optimieren

GIFs sind von Natur aus groß. Um Dateigrößen handhabbar zu halten:

• FPS senken auf 10-15. Die meisten GIFs sehen bei reduzierten Bildraten gut aus.
• Auflösung reduzieren mit Presets (social, web, email).
• Farben begrenzen auf 128 oder weniger für einfache Animationen.
• targetSizeKB verwenden, um Rendervid Parameter automatisch optimieren zu lassen.
• Dithering vermeiden (none), wenn Dateigröße wichtiger ist als Verlaufsqualität.

6. GPU-Beschleunigung aktivieren

Auf Maschinen mit kompatiblen GPUs kann hardware-beschleunigte Kodierung die Renderzeiten für den Kodierungsschritt um das 2-5-fache reduzieren. Dies ist am wirkungsvollsten für hohe Auflösungen (4K+) und hohe Bitraten-Ausgaben.

7. Assets vorab laden

Wenn Ihr Template externe Bilder oder Videos referenziert, laden Sie diese vor dem Rendering auf lokalen Speicher herunter. Netzwerk-Latenz während des Renderings ist die häufigste Ursache für langsame oder fehlgeschlagene Renders.

Nächste Schritte

• Starten Sie mit Rendervid: Besuchen Sie die Rendervid-Übersicht für Installation und ersten Render
• Lernen Sie das Template-System: Lesen Sie die Template-System-Dokumentation für JSON-Template-Struktur, Variablen, Szenen, Ebenen und Animationen
• Komponenten erkunden: Durchsuchen Sie die Komponentenbibliothek für vorgefertigte React-Komponenten wie AnimatedLineChart und AuroraBackground
• KI-Integration einrichten: Siehe den KI-Integrationsleitfaden , um Claude Code, Cursor oder Windsurf über MCP mit Rendervid zu verbinden
• Quellcode ansehen: Besuchen Sie das Rendervid GitHub Repository für den vollständigen Quellcode und 100+ Beispiel-Templates