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

Introduktion

Rendervid er designet til at rendere hvor som helst dit workflow kræver det. Uanset om du har brug for øjeblikkelige forhåndsvisninger i browseren, produktionsgrad videokodning på en server, eller massivt parallel rendering på tværs af cloud-infrastruktur, tilbyder Rendervid en dedikeret pakke til hvert miljø. Hvert deployment-mål deler det samme skabelonsystem og komponentbibliotek , så en skabelon, der virker i browseren, virker identisk på AWS Lambda eller i en Docker-container.

Denne guide dækker alle fire deployment-miljøer, de rendering-muligheder, der er tilgængelige i hver, og avancerede funktioner som motion blur, GIF-eksport og ydeevneoptimering. I slutningen vil du vide præcis, hvilken deployment-vej der passer til dit projekt, og hvordan du konfigurerer den.

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

Pakken @rendervid/renderer-browser håndterer klientside rendering helt inden for brugerens browser. Ingen server-infrastruktur er påkrævet. Dette gør det til den hurtigste vej fra skabelon til forhåndsvisning.

Hvornår skal du bruge Browser Rendering

• Real-time forhåndsvisninger under skabelonredigering i den visuelle editor
• Webapplikationer, der skal generere video- eller billedaktiver on the fly
• Prototyping af nye skabeloner før commit til serverside rendering
• Lette eksporter, hvor MP4, WebM, PNG, JPEG eller WebP output er tilstrækkeligt

Installation

npm install @rendervid/renderer-browser

Hvordan det virker

Browser rendering bruger HTML Canvas API til at tegne hver frame af skabelonen. Rendereren går igennem hver scene og hvert lag, anvender animationer og easing-funktioner, komponerer resultatet på et canvas-element og fanger hver frame. Til videooutput kodes frames ved hjælp af browserens indbyggede MediaRecorder API (WebM) eller en WebAssembly-baseret MP4-encoder.

Understøttede outputformater

Kodeeksempel

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

// Render til et canvas-element til forhåndsvisning
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Eksporter en enkelt frame som PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Browser Rendering-begrænsninger

• Ingen FFmpeg-adgang, så H.265/HEVC og MOV er ikke tilgængelige
• GIF-eksport kræver Node.js rendereren til paletteoptimering
• Maksimal opløsning afhænger af browserens Canvas-størrelsesgrænser (typisk 4096x4096 eller 8192x8192)
• Rendering-hastighed afhænger af klientenhedens CPU og GPU

Node.js Rendering

Pakken @rendervid/renderer-node tilbyder serverside rendering med fuld FFmpeg-integration. Den bruger Playwright eller Puppeteer til at rendere hver frame i en headless browser og sender derefter frames til FFmpeg til professionel videokodning.

Hvornår skal du bruge Node.js Rendering

• Produktions videokodning med fuld codec-understøttelse (H.264, H.265, VP9)
• Batch-behandling af hundreder eller tusinder af skabeloner i automatiserede pipelines
• REST API’er, der accepterer skabelon-JSON og returnerer renderet video
• CI/CD pipelines til automatiseret indholdsgenering
• GIF-eksport med paletteoptimering og dithering-kontrol

Installation

# Installer rendereren
npm install @rendervid/renderer-node

# Installer Playwright (inkluderer browser-binaries)
npx playwright install chromium

# Installer FFmpeg (påkrævet til videokodning)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (via Chocolatey)
choco install ffmpeg

Understøttede outputformater

Rendering kvalitetspræsætninger

Rendervid tilbyder fire kvalitetspræsætninger, der styrer kodningsparametre:

GPU-acceleration

Node.js rendereren understøtter hardwareacceleration for at aflaste kodning til GPU’en. Dette reducerer markant rendering-tiden for komplekse skabeloner med mange lag, høje opløsninger og effekter.

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

GPU-acceleration er tilgængelig på systemer med kompatibel NVIDIA (NVENC), AMD (AMF) eller Intel (Quick Sync) hardware. FFmpeg skal være kompileret med den tilsvarende encoder-understøttelse.

Kodeeksempel

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: "Overskrift",
      default: "Dit produkt, løftet",
    },
  },
};

// Render med brugerdefinerede inputs
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Vent 2s på at medier indlæses
  inputs: {
    headline: "Sommerudsalg — 50% rabat på alt",
  },
});

console.log(`Renderet: ${result.outputPath}`);
console.log(`Varighed: ${result.duration}s`);
console.log(`Filstørrelse: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Batch-behandling

Til behandling af mange skabeloner i sekvens, brug batch API’et:

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

For ægte parallel rendering på en enkelt maskine, se Docker Local Rendering-sektionen nedenfor.

Cloud Rendering

Pakken @rendervid/cloud-rendering muliggør distribueret, parallel rendering på tværs af cloud-infrastruktur. I stedet for at rendere frames sekventielt på én maskine, opdeler cloud rendering arbejdet på tværs af mange worker-funktioner, der renderer frames samtidigt, og derefter merger dem til det endelige output.

Hvornår skal du bruge Cloud Rendering

• High-throughput pipelines, der behandler hundreder af videoer per time
• Langformat indhold, hvor sekventiel rendering er for langsom
• Tidsfølsomme workloads, hvor en 10-50x speedup betyder noget
• Auto-scaling til at håndtere uforudsigelige efterspørgselstoppe

Arkitektur

+------------------+
|   Din App        |
|  (Koordinator)   |
+--------+---------+
         |
         | 1. Opdel video i frame chunks
         v
+--------+---------+
|   Chunk Splitter |
+--------+---------+
         |
         |  2. Distribuer chunks til workers
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Hver worker renderer sine frames
      v            v           v
+-----+------+----+------+----+----+
|  Frames    |  Frames   |  Frames |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Kombiner til endelig video
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Download eller server
             v
     +-------+---------+
     |   Endeligt Output   |
     |   video.mp4      |
     +------------------+

Sådan virker det trin for trin:

1. Koordinatoren analyserer skabelonen og bestemmer, hvor mange frames der skal renderes baseret på den samlede varighed og FPS.
2. Chunk splitteren opdeler det samlede frame-antal i chunks (f.eks. 30 frames per chunk for en 30fps video = 1 sekund per chunk).
3. Hver worker-funktion modtager en chunk-tildeling (start frame, slut frame), renderer disse frames ved hjælp af Node.js rendereren og uploader det renderede segment til object storage.
4. Mergeren downloader alle segmenter og sammenkæder dem til den endelige video ved hjælp af FFmpeg.
5. Det endelige output gemmes i cloud-udbyderens object storage (S3, Azure Blob eller GCS) og downloades eventuelt til det lokale filsystem.

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

Den fulde konfigurationsgrænseflade:

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-opsætning

AWS Lambda er det mest almindelige cloud deployment-mål. Hver worker-funktion kører i en separat Lambda-invokation, hvilket muliggør massiv parallelisme.

Forudsætninger:

• AWS-konto med Lambda- og S3-adgang
• AWS CLI konfigureret
• 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(`Renderet på ${result.renderTime}ms`);
console.log(`Workers brugt: ${result.workersUsed}`);
console.log(`Output: ${result.outputUrl}`);

Typisk AWS Lambda-konfiguration:

• Hukommelse: 1024-3008 MB (mere hukommelse = mere CPU = hurtigere rendering)
• Timeout: 300 sekunder (5 minutter)
• Ephemeral storage: 512 MB - 10 GB
• Concurrency: 100-1000 (juster baseret på workload)

Azure Functions-opsætning

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-opsætning

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

Omkostningssammenligning

Alle cloud-udbydere tilbyder gratis tiers, der dækker betydelige rendering-workloads under udvikling og lavvolumen-produktion.

Performance Benchmarks

Cloud rendering opnår en 10-50x speedup sammenlignet med enkelt-maskine sekventiel rendering. Den nøjagtige speedup afhænger af antallet af workers, skabelonkompleksitet og videovarighed.

Længere videoer drager mere fordel af parallelisme, fordi overhead fra worker-opstart og frame-merging amortiseres over flere frames.

Docker Local Rendering

Docker-baseret rendering giver dig den samme parallelle rendering-arkitektur som cloud rendering, men kører helt på din lokale maskine. Det er fuldstændig gratis, bruger ingen cloud-konti og er ideelt til self-hosted setups, udvikling og teams, der ønsker parallel rendering uden cloud-omkostninger.

Hvornår skal du bruge Docker Rendering

• Gratis parallel rendering uden cloud-udbyder-konti
• Self-hosted infrastruktur bag en firewall
• Udvikling og test af cloud rendering-workflows lokalt
• Små til mellemstore workloads, der drager fordel af parallelisme, men ikke har brug for auto-scaling

Installation

# Sørg for at Docker er installeret og kører
docker --version

# Installer cloud rendering-pakken
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, // Antal Docker-containere der skal køre parallelt
  },
});

const result = await renderer.render(template);
console.log(`Renderet på ${result.renderTime}ms ved hjælp af ${result.workersUsed} workers`);

Valg af workersCount: Sæt dette til antallet af CPU-kerner, der er tilgængelige på din maskine. For eksempel fungerer en 8-kerne maskine godt med 8 workers. At gå ud over dit kerneantal tilføjer overhead fra kontekstskift uden at forbedre throughput.

Docker-arkitektur

+------------------+
|   Koordinator    |
|  (din proces)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Docker containere
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Delt Volume          |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Hver Docker-container er en selvstændig worker med Node.js, Playwright og FFmpeg præ-installeret. Workers læser deres frame-tildelinger fra det delte volume, renderer frames og skriver resultaterne tilbage. Koordinatoren merger derefter alle segmenter til det endelige output.

Motion Blur

Rendervid understøtter motion blur gennem temporal supersampling. I stedet for at rendere et enkelt øjeblik per frame, fanger rendereren flere sub-frames på lidt forskellige tidspunkter og blender dem sammen. Dette producerer den naturlige blur, som kameraer skaber, når objekter bevæger sig under en eksponering.

Kvalitetspræsætninger

Konfiguration

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

Hvordan temporal supersampling virker

Frame N (ingen motion blur):          Frame N (med motion blur, 5 samples):

  Enkelt øjeblik:                    5 sub-frames blended:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Blended resultat
                                     +--------+

Hver sub-frame fremmer animationstidslinjen med et lille trin (1/fps divideret med sample-antallet). Sub-frames alpha-blendes derefter for at producere den endelige frame. Objekter, der flyttede sig mellem sub-frames, fremstår slørede langs deres bevægelsesbane, mens stationære elementer forbliver skarpe.

Ydeevneovervejelser

Motion blur multiplicerer rendering-tiden proportionalt med sample-antallet. En 10-sekunders video ved 30fps har 300 frames. Med high kvalitet (16 samples) skal rendereren generere 4.800 sub-frames i stedet for 300. Brug draft kvalitet under udvikling og skift til high eller ultra kun til endelige eksporter.

Cloud rendering og Docker parallel rendering fungerer godt med motion blur, fordi per-frame omkostningen fordeles på tværs af workers. En 16x per-frame stigning divideret på tværs af 16 workers resulterer i omtrent samme samlede rendering-tid som en ikke-blurred render på én maskine.

GIF-eksport

Renderivids GIF-eksport går langt ud over en simpel frame-til-GIF konvertering. Den bruger FFmpeg’s palettegenereringspipeline til at producere optimerede, høj-kvalitets animerede GIF’er med konfigurerbar dithering, farveantal og filstørrelsesbegrænsninger.

Hvordan GIF-optimering virker

Standard GIF-kodning bruger en enkelt global palette på 256 farver, hvilket ofte resulterer i banding og dårlig farvegengivelse. Rendervid bruger en to-pass tilgang:

1. Pass 1 (palettegen): Analyser alle frames for at generere en optimal 256-farve palette, der bedst repræsenterer videoens fulde farveområde.
2. Pass 2 (paletteuse): Re-kod hver frame ved hjælp af den optimerede palette med valgfri dithering til glatte gradienter.

Optimeringspræsætninger

Dithering-muligheder

Konfiguration

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 opløsning
    colors: 256,            // 2-256 farvepalette
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimer for at holde sig under 5MB
    fps: 15,                // Lavere FPS = mindre fil
  },
});

console.log(`GIF-størrelse: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Estimeret størrelse var: ${result.estimatedSizeKB} KB`);

Filstørrelsesestimering og auto-optimering

Når du sætter en targetSizeKB, estimerer Rendervid output-filstørrelsen før rendering og justerer automatisk parametre (farveantal, opløsning, FPS) for at opfylde målet. Dette er særligt nyttigt for platforme med filstørrelsesbegrænsninger (f.eks. Slacks 50 MB-grænse, e-mails typiske 10 MB-begrænsning).

// Auto-optimer for at passe inden for en 2MB e-mail-begrænsning
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Pakkearkitektur

Rendervid er organiseret som et monorepo med 13 pakker. Hver pakke har et fokuseret ansvar, og de komponerer sammen for at understøtte hvert deployment-scenarie.

@rendervid/
├── core                    Engine, typer, validering, animationssystem
│   ├── Skabelonparser og validator (AJV + JSON Schema)
│   ├── Animationsmotor (40+ præsætninger, 30+ easing-funktioner)
│   ├── Lagsystem (text, image, video, shape, audio, group, lottie, custom)
│   └── Scene management og overgange (17 typer)
│
├── renderer-browser        Klientside rendering
│   ├── Canvas-baseret frame rendering
│   ├── MediaRecorder til WebM-eksport
│   └── WebAssembly MP4 encoder
│
├── renderer-node           Serverside rendering
│   ├── Playwright/Puppeteer headless browser
│   ├── FFmpeg integration (fluent-ffmpeg)
│   ├── GPU-acceleration
│   └── GIF-optimeringspipeline
│
├── cloud-rendering         Multi-cloud orkestrering
│   ├── AWS Lambda provider
│   ├── Azure Functions provider
│   ├── Google Cloud Functions provider
│   ├── Docker lokal provider
│   ├── Chunk splitter og merger
│   └── Object storage adaptere (S3, Blob, GCS)
│
├── player                  Video/skabelon player-komponent
├── editor                  Visuel skabeloneditor (Zustand state)
├── components              Præ-byggede React-komponenter
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Skabelondefinitioner og eksempler (100+)
├── testing                 Test-utilities
│   ├── Vitest custom matchers
│   ├── Snapshot testing helpers
│   └── Visual regression utilities
│
├── editor-playground       Editor udviklingsmiljø
├── player-playground       Player udviklingsmiljø
├── mcp                     Model Context Protocol server
└── docs                    VitePress dokumentationssite

Hvordan pakkerne forbinder

• @rendervid/core er fundamentet. Alle andre pakker afhænger af det for skabelontyper, validering og animationssystemet.
• @rendervid/renderer-browser og @rendervid/renderer-node forbruger begge core-skabeloner, men outputter gennem forskellige pipelines (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering wrapper renderer-node og distribuerer dets arbejde på tværs af cloud-funktioner eller Docker-containere.
• @rendervid/player og @rendervid/editor er React-baserede UI-pakker til afspilning og visuel redigering. Editoren bruger Zustand til state management.
• @rendervid/components leverer de præ-byggede React komponenter (AnimatedLineChart, AuroraBackground, osv.), der kan bruges i skabeloner.
• @rendervid/testing leverer Vitest matchers og snapshot testing helpers til validering af skabeloner.
• mcp er AI-integrations laget, der eksponerer Renderivids kapaciteter til AI-agenter via Model Context Protocol.

Teknologistack

Rendervid er bygget på en moderne TypeScript-stack valgt for pålidelighed, ydeevne og udvikleroplevelse.

Test

Rendervid inkluderer en dedikeret testpakke (@rendervid/testing), der leverer custom Vitest matchers, snapshot testing helpers og visual regression utilities til validering af skabeloner.

Vitest Custom Matchers

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

describe("Product Showcase Template", () => {
  it("skal være en gyldig skabelon", () => {
    expect(template).toBeValidTemplate();
  });

  it("skal have de korrekte dimensioner", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("skal indeholde mindst ét tekstlag", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("skal have animationer på overskriften", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Testing

Snapshot testing renderer en skabelon til et billede og sammenligner det med en gemt reference. Enhver visuel ændring får testen til at fejle, hvilket gør det nemt at fange utilsigtede regressioner.

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

describe("Template Visual Regression", () => {
  it("skal matche reference-snapshottet ved frame 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("skal matche reference-snapshottet ved midtpunktet", 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 i CI

Integrer visual regression tests i din CI/CD-pipeline for at fange rendering-ændringer, før de når produktion:

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

Ydeevneoptimering

At få de hurtigst mulige rendering-tider kræver forståelse af, hvor tiden bruges, og hvilke håndtag du kan trække i. Her er de mest effektfulde optimeringsstrategier.

1. Vælg det rigtige deployment-mål

2. Optimer skabelonkompleksitet

• Reducer lagantal. Hvert lag renderes uafhængigt. Færre lag betyder færre tegneoperationer per frame.
• Brug draft kvalitet under udvikling og test. Skift til high eller lossless kun til endelige eksporter.
• Forenkl animationer under forhåndsvisning. Komplekse keyframe-sekvenser med mange easing-funktioner tilføjer beregning per frame.

3. Brug renderWaitTime klogt

renderWaitTime-muligheden pauser rendering for at tillade eksterne medier (billeder, videoer, skrifttyper) at indlæse. Sæt dette til minimumsværdien, der sikrer, at alle aktiver er indlæst. En værdi på 500-2000ms er typisk. At sætte den for højt spilder tid på hver frame.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 sekund er normalt nok
});

4. Udnyt parallel rendering

For enhver video længere end 10 sekunder vil parallel rendering (Docker eller cloud) være hurtigere end sekventiel rendering. Break-even-punktet afhænger af din hardware og cloud-konfiguration, men som en tommelfingerregel:

• < 10 sekunder: Enkelt Node.js renderer er fint
• 10-60 sekunder: Docker med 4-8 workers
• 1-10 minutter: Docker med 8-16 workers eller cloud
• > 10 minutter: Cloud rendering med 50+ workers

5. Optimer GIF-output

GIF’er er iboende store. For at holde filstørrelser håndterbare:

• Sænk FPS til 10-15. De fleste GIF’er ser fine ud ved reducerede frame rates.
• Reducer opløsning ved hjælp af præsætninger (social, web, email).
• Begræns farver til 128 eller færre for simple animationer.
• Brug targetSizeKB for at lade Rendervid auto-optimere parametre.
• Undgå dithering (none), hvis filstørrelse betyder mere end gradientkvalitet.

6. Aktiver GPU-acceleration

På maskiner med kompatible GPU’er kan hardwareaccelereret kodning reducere rendering-tider med 2-5x for kodnings-trinnet. Dette er mest effektfuldt for høj-opløsning (4K+) og høj-bitrate outputs.

7. Præ-indlæs aktiver

Hvis din skabelon refererer til eksterne billeder eller videoer, præ-download dem til lokal lagring før rendering. Netværkslatens under rendering er den mest almindelige årsag til langsomme eller mislykkede renders.

Næste trin

• Kom i gang med Rendervid: Besøg Rendervid-oversigten for installation og første render
• Lær skabelonsystemet: Læs Template System-dokumentationen for JSON-skabelonstruktur, variabler, scener, lag og animationer
• Udforsk komponenter: Gennemse Komponentbiblioteket for præ-byggede React-komponenter som AnimatedLineChart og AuroraBackground
• Opsæt AI-integration: Se AI Integration-guiden for at forbinde Claude Code, Cursor eller Windsurf til Rendervid via MCP
• Se kilden: Besøg Rendervid GitHub-repositoriet for den fulde kildekode og 100+ eksempelskabeloner