Rendervid Distribusjon - Nettleser, Node.js, Sky og Docker Rendering

Introduksjon

Rendervid er designet for å rendre hvor som helst arbeidsflyten din krever det. Enten du trenger umiddelbare forhåndsvisninger i nettleseren, produksjonskvalitet videokoding på en server, eller massivt parallell rendering på tvers av skyinfrastruktur, gir Rendervid en dedikert pakke for hvert miljø. Hvert distribusjonsmål deler samme malsystem og komponentbibliotek , så en mal som fungerer i nettleseren fungerer identisk på AWS Lambda eller i en Docker-container.

Denne guiden dekker alle fire distribusjonsmiljøer, renderingsalternativene som er tilgjengelige i hver, og avanserte funksjoner som motion blur, GIF-eksport og ytelsesoptimalisering. Ved slutten vil du vite nøyaktig hvilken distribusjonssti som passer til prosjektet ditt og hvordan du konfigurerer det.

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

Nettleser-rendering

@rendervid/renderer-browser-pakken håndterer klient-side rendering helt innenfor brukerens nettleser. Ingen serverinfrastruktur er nødvendig. Dette gjør det til den raskeste veien fra mal til forhåndsvisning.

Når skal man bruke nettleser-rendering

• Sanntidsforhåndsvisninger under malredigering i visuell editor
• Webapplikasjoner som trenger å generere video eller bilderessurser på farten
• Prototyping av nye maler før man forplikter seg til server-side rendering
• Lette eksporter der MP4, WebM, PNG, JPEG eller WebP-utdata er tilstrekkelig

Installasjon

npm install @rendervid/renderer-browser

Hvordan det fungerer

Nettleser-rendering bruker HTML Canvas API til å tegne hvert bilde av malen. Rendereren går gjennom hver scene og lag, bruker animasjoner og easing-funksjoner, komponerer resultatet på et canvas-element, og fanger hvert bilde. For videoutdata kodes bildene ved bruk av nettleserens innebygde MediaRecorder API (WebM) eller en WebAssembly-basert MP4-koder.

Støttede utdataformater

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

// Render til et canvas-element for 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 et enkelt bilde som PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Begrensninger for nettleser-rendering

• Ingen FFmpeg-tilgang, så H.265/HEVC og MOV er ikke tilgjengelig
• GIF-eksport krever Node.js-rendereren for palettoptimalisering
• Maksimal oppløsning avhenger av nettleserens Canvas-størrelsesgrenser (typisk 4096x4096 eller 8192x8192)
• Renderingshastighet avhenger av klientenhetens CPU og GPU

Node.js-rendering

@rendervid/renderer-node-pakken gir server-side rendering med full FFmpeg-integrasjon. Den bruker Playwright eller Puppeteer til å rendre hvert bilde i en hodeløs nettleser, deretter sender bildene til FFmpeg for profesjonell videokoding.

Når skal man bruke Node.js-rendering

• Produksjonsvideokoding med full kodekstøtte (H.264, H.265, VP9)
• Batch-prosessering av hundrevis eller tusenvis av maler i automatiserte pipelines
• REST APIer som aksepterer mal-JSON og returnerer rendret video
• CI/CD-pipelines for automatisert innholdsgenerering
• GIF-eksport med palettoptimalisering og dithering-kontroll

Installasjon

# Installer rendereren
npm install @rendervid/renderer-node

# Installer Playwright (inkluderer nettleser-binærfiler)
npx playwright install chromium

# Installer FFmpeg (påkrevd for videokoding)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (via Chocolatey)
choco install ffmpeg

Støttede utdataformater

Renderingskvalitetspreseter

Rendervid tilbyr fire kvalitetspreseter som kontrollerer kodingsparametere:

GPU-akselerasjon

Node.js-rendereren støtter maskinvareakselerasjon for å avlaste koding til GPU-en. Dette reduserer renderingstiden betydelig for komplekse maler med mange lag, høye oppløsninger og effekter.

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

GPU-akselerasjon er tilgjengelig på systemer med kompatibel NVIDIA (NVENC), AMD (AMF), eller Intel (Quick Sync) maskinvare. FFmpeg må være kompilert med tilsvarende koderstøtte.

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

// Render med tilpassede inndata
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Vent 2s på at media skal laste
  inputs: {
    headline: "Sommersalg — 50% rabatt på alt",
  },
});

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

Batch-prosessering

For prosessering av mange maler i sekvens, bruk 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,
  });
}

For ekte parallell rendering på en enkelt maskin, se Docker Lokal Rendering-seksjonen nedenfor.

Sky-rendering

@rendervid/cloud-rendering-pakken muliggjør distribuert, parallell rendering på tvers av skyinfrastruktur. I stedet for å rendre bilder sekvensielt på én maskin, deler sky-rendering arbeidet på tvers av mange arbeidsfunksjoner som rendrer bilder samtidig, og slår dem deretter sammen til den endelige utdataen.

Når skal man bruke sky-rendering

• Høy-gjennomstrømningspipelines som prosesserer hundrevis av videoer per time
• Langt innhold der sekvensiell rendering er for treg
• Tidssensitive arbeidsbelastninger der en 10-50x hastighetsøkning betyr noe
• Auto-skalering for å håndtere uforutsigbare etterspørselstopper

Arkitektur

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

Hvordan det fungerer steg for steg:

1. Koordinatoren analyserer malen og bestemmer hvor mange bilder som må rendres basert på total varighet og FPS.
2. Chunk-splitteren deler det totale bildeantallet inn i biter (f.eks. 30 bilder per bit for en 30fps video = 1 sekund per bit).
3. Hver arbeidsfunksjon mottar en bit-tildeling (startbilde, sluttbilde), rendrer disse bildene ved bruk av Node.js-rendereren, og laster opp det rendrede segmentet til objektlagring.
4. Sammenslåeren laster ned alle segmenter og slår dem sammen til den endelige videoen ved bruk av FFmpeg.
5. Den endelige utdataen lagres i skyleverandørens objektlagring (S3, Azure Blob, eller GCS) og lastes eventuelt ned til det lokale filsystemet.

Sky-konfigurasjon

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

Det fullstendige konfigurasjonsgrensesnittet:

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

AWS Lambda er det vanligste skydistribusjonsmålet. Hver arbeidsfunksjon kjører i en separat Lambda-påkalling, som muliggjør massiv parallellisme.

Forutsetninger:

• AWS-konto med Lambda og S3-tilgang
• AWS CLI konfigurert
• Node.js 18+ Lambda runtime

Konfigurasjon:

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(`Rendret på ${result.renderTime}ms`);
console.log(`Arbeidere brukt: ${result.workersUsed}`);
console.log(`Utdata: ${result.outputUrl}`);

Typisk AWS Lambda-konfigurasjon:

• Minne: 1024-3008 MB (mer minne = mer CPU = raskere rendering)
• Tidsavbrudd: 300 sekunder (5 minutter)
• Efemær lagring: 512 MB - 10 GB
• Samtidighet: 100-1000 (juster basert på arbeidsbelastning)

Azure Functions-oppsett

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

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

Kostnadssammenligning

Alle skyleverandører tilbyr gratis nivåer som dekker betydelige renderingsarbeidsbelastninger under utvikling og lavvolumproduksjon.

Ytelsesmålinger

Sky-rendering oppnår en 10-50x hastighetsøkning sammenlignet med enkeltmaskin sekvensiell rendering. Den nøyaktige hastighetsøkningen avhenger av antall arbeidere, malkompleksitet og videovarighet.

Lengre videoer drar større nytte av parallellisme fordi overhead fra arbeideroppstart og bildesammenslåing amortiseres over flere bilder.

Docker Lokal Rendering

Docker-basert rendering gir deg samme parallelle renderingsarkitektur som sky-rendering, men kjører helt på din lokale maskin. Det er helt gratis, bruker ingen skykontoer, og er ideelt for selvhostede oppsett, utvikling, og team som ønsker parallell rendering uten skykostnader.

Når skal man bruke Docker-rendering

• Gratis parallell rendering uten skyleverandørkontoer
• Selvhostet infrastruktur bak en brannmur
• Utvikling og testing av sky-renderingsarbeidsflyter lokalt
• Små til middels arbeidsbelastninger som drar nytte av parallellisme men ikke trenger auto-skalering

Installasjon

# Sørg for at Docker er installert og kjører
docker --version

# Installer sky-renderingspakken
npm install @rendervid/cloud-rendering

Konfigurasjon

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, // Antall Docker-containere som skal kjøres parallelt
  },
});

const result = await renderer.render(template);
console.log(`Rendret på ${result.renderTime}ms ved bruk av ${result.workersUsed} arbeidere`);

Valg av workersCount: Sett denne til antall CPU-kjerner som er tilgjengelige på maskinen din. For eksempel fungerer en 8-kjerne maskin godt med 8 arbeidere. Å gå utover kjerneantallet ditt legger til overhead fra kontekstbytte uten å forbedre gjennomstrømningen.

Docker-arkitektur

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

Hver Docker-container er en selvstendig arbeider med Node.js, Playwright og FFmpeg forhåndsinstallert. Arbeidere leser sine bildetildelinger fra det delte volumet, rendrer bildene, og skriver resultatene tilbake. Koordinatoren slår deretter sammen alle segmenter til den endelige utdataen.

Motion Blur

Rendervid støtter motion blur gjennom temporal supersampling. I stedet for å rendre et enkelt øyeblikk per bilde, fanger rendereren flere sub-bilder på litt forskjellige tidspunkter og blander dem sammen. Dette produserer den naturlige uskarphet som kameraer skaper når objekter beveger seg under en eksponering.

Kvalitetspreseter

Konfigurasjon

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

Hvordan temporal supersampling fungerer

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

  Enkelt øyeblikk:                   5 sub-bilder blandet:

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

Hvert sub-bilde fremmer animasjonstidslinjen med en liten økning (1/fps delt på sampleantallet). Sub-bildene er deretter alfa-blandet for å produsere det endelige bildet. Objekter som beveget seg mellom sub-bilder vises uskarpe langs bevegelsesveien, mens stasjonære elementer forblir skarpe.

Ytelsesbetraktninger

Motion blur multipliserer renderingstid proporsjonalt med sampleantallet. En 10-sekunders video ved 30fps har 300 bilder. Med high kvalitet (16 sampler), må rendereren generere 4 800 sub-bilder i stedet for 300. Bruk draft kvalitet under utvikling og bytt til high eller ultra kun for endelige eksporter.

Sky-rendering og Docker parallell rendering fungerer godt med motion blur fordi per-bilde-kostnaden er distribuert på tvers av arbeidere. En 16x per-bilde-økning delt på tvers av 16 arbeidere resulterer i omtrent samme totale renderingstid som en ikke-uskarp rendering på én maskin.

GIF-eksport

Renderivds GIF-eksport går langt utover en enkel bilde-til-GIF-konvertering. Den bruker FFmpegs palettgenereringspipeline for å produsere optimaliserte, høykvalitets animerte GIF-er med konfigurerbar dithering, fargeantall og filstørrelsebegrensninger.

Hvordan GIF-optimalisering fungerer

Standard GIF-koding bruker en enkelt global palett på 256 farger, som ofte resulterer i banding og dårlig fargegjengivelse. Rendervid bruker en to-pass tilnærming:

1. Pass 1 (palettegen): Analyser alle bilder for å generere en optimal 256-fargepalett som best representerer videoens fulle fargeområde.
2. Pass 2 (paletteuse): Re-kod hvert bilde ved bruk av den optimaliserte paletten med valgfri dithering for glatte gradienter.

Optimaliseringspreseter

Dithering-alternativer

Konfigurasjon

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

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

Filstørrelsesestimering og auto-optimalisering

Når du setter en targetSizeKB, estimerer Rendervid utdatafilstørrelsen før rendering og justerer automatisk parametere (fargeantall, oppløsning, FPS) for å møte målet. Dette er spesielt nyttig for plattformer med filstørrelsesgrenser (f.eks. Slacks 50 MB-grense, e-posts typiske 10 MB-begrensning).

// Auto-optimaliser for å passe innenfor en 2MB e-postbegrensning
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Pakkearkitektur

Rendervid er organisert som en monorepo med 13 pakker. Hver pakke har et fokusert ansvar, og de komponerer sammen for å støtte hvert distribusjonsscenario.

@rendervid/
├── core                    Motor, typer, validering, animasjonssystem
│   ├── Malparser og validator (AJV + JSON Schema)
│   ├── Animasjonsmotor (40+ preseter, 30+ easing-funksjoner)
│   ├── Lagsystem (tekst, bilde, video, form, lyd, gruppe, lottie, tilpasset)
│   └── Scenehåndtering og overganger (17 typer)
│
├── renderer-browser        Klient-side rendering
│   ├── Canvas-basert bilderendering
│   ├── MediaRecorder for WebM-eksport
│   └── WebAssembly MP4-koder
│
├── renderer-node           Server-side rendering
│   ├── Playwright/Puppeteer hodeløs nettleser
│   ├── FFmpeg-integrasjon (fluent-ffmpeg)
│   ├── GPU-akselerasjon
│   └── GIF-optimaliseringspipeline
│
├── cloud-rendering         Multi-sky-orkestrering
│   ├── AWS Lambda-leverandør
│   ├── Azure Functions-leverandør
│   ├── Google Cloud Functions-leverandør
│   ├── Docker lokal leverandør
│   ├── Chunk-splitter og sammenslåer
│   └── Objektlagringsadaptere (S3, Blob, GCS)
│
├── player                  Video/malspiller-komponent
├── editor                  Visuell malredigerer (Zustand-tilstand)
├── components              Ferdigbygde React-komponenter
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Maldefinisjoner og eksempler (100+)
├── testing                 Testverktøy
│   ├── Vitest tilpassede matchere
│   ├── Snapshot-testhjelpere
│   └── Visuell regresjonsverktøy
│
├── editor-playground       Redigeringutviklingsmiljø
├── player-playground       Spillerutviklingsmiljø
├── mcp                     Model Context Protocol-server
└── docs                    VitePress dokumentasjonsside

Hvordan pakkene kobles sammen

• @rendervid/core er grunnlaget. Alle andre pakker avhenger av den for maltyper, validering og animasjonssystemet.
• @rendervid/renderer-browser og @rendervid/renderer-node konsumerer begge kjerne-maler men gir utdata gjennom forskjellige pipelines (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering pakker inn renderer-node og distribuerer arbeidet på tvers av skyfunksjoner eller Docker-containere.
• @rendervid/player og @rendervid/editor er React-baserte UI-pakker for avspilling og visuell redigering. Editoren bruker Zustand for tilstandshåndtering.
• @rendervid/components gir de ferdigbygde React-komponentene (AnimatedLineChart, AuroraBackground, osv.) som kan brukes i maler.
• @rendervid/testing gir Vitest-matchere og snapshot-testhjelpere for validering av maler.
• mcp er AI-integrasjons -laget som eksponerer Renderivds evner til AI-agenter via Model Context Protocol.

Teknologistakk

Rendervid er bygget på en moderne TypeScript-stakk valgt for pålitelighet, ytelse og utvikleropplevelse.

Testing

Rendervid inkluderer en dedikert testpakke (@rendervid/testing) som gir tilpassede Vitest-matchere, snapshot-testhjelpere og visuell regresjonsverktøy for validering av maler.

Vitest tilpassede matchere

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

describe("Produktvisningsmal", () => {
  it("skal være en gyldig mal", () => {
    expect(template).toBeValidTemplate();
  });

  it("skal ha de riktige dimensjonene", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("skal inneholde minst ett tekstlag", () => {
    expect(template).toContainLayerOfType("text");
  });

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

Snapshot-testing

Snapshot-testing rendrer en mal til et bilde og sammenligner det med en lagret referanse. Enhver visuell endring får testen til å feile, noe som gjør det enkelt å fange opp utilsiktede regresjoner.

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

describe("Mal visuell regresjon", () => {
  it("skal matche referansesnapshot ved bilde 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("skal matche referansesnapshot ved midtpunktet", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Visuell regresjonstesting i CI

Integrer visuelle regresjonstester i din CI/CD-pipeline for å fange opp renderingsendringer før de når produksjon:

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

Ytelsesoptimalisering

Å få raskest mulig renderingstider krever forståelse av hvor tid brukes og hvilke spaker du kan trekke i. Her er de mest effektive optimaliseringsstrategiene.

1. Velg riktig distribusjonsmål

2. Optimaliser malkompleksitet

• Reduser lagantall. Hvert lag rendres uavhengig. Færre lag betyr færre tegneoperasjoner per bilde.
• Bruk draft kvalitet under utvikling og testing. Bytt til high eller lossless kun for endelige eksporter.
• Forenkle animasjoner under forhåndsvisning. Komplekse keyframe-sekvenser med mange easing-funksjoner legger til beregning per bilde.

3. Bruk renderWaitTime klokt

renderWaitTime-alternativet pauser rendering for å la ekstern media (bilder, videoer, fonter) laste. Sett dette til minimumsverdien som sikrer at alle ressurser er lastet. En verdi på 500-2000ms er typisk. Å sette den for høyt kaster bort tid på hvert bilde.

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

4. Utnytt parallell rendering

For enhver video lengre enn 10 sekunder vil parallell rendering (Docker eller sky) være raskere enn sekvensiell rendering. Break-even-punktet avhenger av maskinvaren din og skykonfigurasjonen, men som en tommelfingerregel:

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

5. Optimaliser GIF-utdata

GIF-er er iboende store. For å holde filstørrelsene håndterbare:

• Senk FPS til 10-15. De fleste GIF-er ser fine ut ved reduserte bildefrekvenser.
• Reduser oppløsning ved bruk av preseter (social, web, email).
• Begrens farger til 128 eller færre for enkle animasjoner.
• Bruk targetSizeKB for å la Rendervid auto-optimalisere parametere.
• Unngå dithering (none) hvis filstørrelse betyr mer enn gradientkvalitet.

6. Aktiver GPU-akselerasjon

På maskiner med kompatible GPU-er kan maskinvareakselerert koding redusere renderingstider med 2-5x for kodingstrinnet. Dette er mest effektivt for høy oppløsning (4K+) og høy bitrate-utdata.

7. Forhåndslast ressurser

Hvis malen din refererer til eksterne bilder eller videoer, forhåndslast dem til lokal lagring før rendering. Nettverkslatens under rendering er den vanligste årsaken til treg eller mislykket rendering.

Neste steg

• Kom i gang med Rendervid: Besøk Rendervid-oversikten for installasjon og første rendering
• Lær malsystemet: Les Malsystem-dokumentasjonen for JSON-malstruktur, variabler, scener, lag og animasjoner
• Utforsk komponenter: Bla gjennom Komponentbiblioteket for ferdigbygde React-komponenter som AnimatedLineChart og AuroraBackground
• Sett opp AI-integrasjon: Se AI-integrasjonsguiden for å koble Claude Code, Cursor eller Windsurf til Rendervid via MCP
• Se kildekoden: Besøk Rendervid GitHub-repositoriet for full kildekode og 100+ eksempelmaler