Rendervid Deployment - Webbläsare, Node.js, Moln & Docker Rendering

Introduktion

Rendervid är designad för att rendera var som helst ditt arbetsflöde kräver. Oavsett om du behöver omedelbara förhandsvisningar i webbläsaren, videokodning av produktionskvalitet på en server, eller massivt parallell rendering över molninfrastruktur, tillhandahåller Rendervid ett dedikerat paket för varje miljö. Varje distributionsmål delar samma mallsystem och komponentbibliotek , så en mall som fungerar i webbläsaren fungerar identiskt på AWS Lambda eller i en Docker-container.

Denna guide täcker alla fyra distributionsmiljöer, renderingsalternativen tillgängliga i var och en, och avancerade funktioner som rörelseoskärpa, GIF-export och prestandaoptimering. I slutet kommer du att veta exakt vilken distributionsväg som passar ditt projekt och hur du konfigurerar 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          |
                                               +-----------------+

Webbläsarrendering

Paketet @rendervid/renderer-browser hanterar rendering på klientsidan helt och hållet inom användarens webbläsare. Ingen serverinfrastruktur krävs. Detta gör det till den snabbaste vägen från mall till förhandsvisning.

När ska man använda webbläsarrendering

• Förhandsvisningar i realtid under mallredigering i den visuella editorn
• Webbapplikationer som behöver generera video- eller bildresurser i farten
• Prototyper av nya mallar innan man förbinder sig till rendering på serversidan
• Lättviktsexporter där MP4, WebM, PNG, JPEG eller WebP-utdata är tillräckligt

Installation

npm install @rendervid/renderer-browser

Hur det fungerar

Webbläsarrendering använder HTML Canvas API för att rita varje bildruta av mallen. Renderaren går igenom varje scen och lager, tillämpar animationer och easing-funktioner, komponerar resultatet på ett canvas-element och fångar varje bildruta. För videoutdata kodas bildrutorna med hjälp av webbläsarens inbyggda MediaRecorder API (WebM) eller en WebAssembly-baserad MP4-kodare.

Stödda utdataformat

Kodexempel

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 från webbläsaren",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Rendera till ett canvas-element för förhandsvisning
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

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

Begränsningar för webbläsarrendering

• Ingen FFmpeg-åtkomst, så H.265/HEVC och MOV är inte tillgängliga
• GIF-export kräver Node.js-renderaren för palettoptimering
• Maximal upplösning beror på webbläsarens Canvas-storleksgränser (vanligtvis 4096x4096 eller 8192x8192)
• Renderingshastigheten beror på klientenhetens CPU och GPU

Node.js-rendering

Paketet @rendervid/renderer-node tillhandahåller rendering på serversidan med full FFmpeg-integration. Det använder Playwright eller Puppeteer för att rendera varje bildruta i en huvudlös webbläsare, sedan skickar bildrutorna till FFmpeg för professionell videokodning.

När ska man använda Node.js-rendering

• Videokodning för produktion med fullt codec-stöd (H.264, H.265, VP9)
• Batchbearbetning av hundratals eller tusentals mallar i automatiserade pipelines
• REST API:er som accepterar mall-JSON och returnerar renderad video
• CI/CD-pipelines för automatiserad innehållsgenerering
• GIF-export med palettoptimering och dithering-kontroll

Installation

# Installera renderaren
npm install @rendervid/renderer-node

# Installera Playwright (inkluderar webbläsarbinärer)
npx playwright install chromium

# Installera FFmpeg (krävs för videokodning)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (via Chocolatey)
choco install ffmpeg

Stödda utdataformat

Förinställningar för renderingskvalitet

Rendervid tillhandahåller fyra kvalitetsförinställningar som styr kodningsparametrar:

GPU-acceleration

Node.js-renderaren stöder hårdvaruacceleration för att avlasta kodning till GPU:n. Detta minskar avsevärt renderingstiden för komplexa mallar med många lager, höga upplösningar och effekter.

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

GPU-acceleration är tillgänglig på system med kompatibel NVIDIA (NVENC), AMD (AMF) eller Intel (Quick Sync) hårdvara. FFmpeg måste vara kompilerad med motsvarande kodarstöd.

Kodexempel

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: "Rubrik",
      default: "Din produkt, upphöjd",
    },
  },
};

// Rendera med anpassade indata
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Vänta 2s för att media ska laddas
  inputs: {
    headline: "Sommarrea — 50% rabatt på allt",
  },
});

console.log(`Renderad: ${result.outputPath}`);
console.log(`Varaktighet: ${result.duration}s`);
console.log(`Filstorlek: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Batchbearbetning

För bearbetning av många mallar i sekvens, använd 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 verklig parallell rendering på en enda maskin, se avsnittet Docker lokal rendering nedan.

Molnrendering

Paketet @rendervid/cloud-rendering möjliggör distribuerad, parallell rendering över molninfrastruktur. Istället för att rendera bildrutor sekventiellt på en maskin, delar molnrendering upp arbetet över många arbetsfunktioner som renderar bildrutor samtidigt, sedan slår ihop dem till den slutliga utdata.

När ska man använda molnrendering

• Högthroughput-pipelines som bearbetar hundratals videor per timme
• Långt innehåll där sekventiell rendering är för långsam
• Tidskänsliga arbetsbelastningar där en 10-50x snabbhet spelar roll
• Autoskalning för att hantera oförutsägbara efterfrågepåslag

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

Hur det fungerar steg för steg:

1. Koordinatorn analyserar mallen och bestämmer hur många bildrutor som behöver renderas baserat på den totala varaktigheten och FPS.
2. Segmentdelaren delar upp det totala antalet bildrutor i segment (t.ex. 30 bildrutor per segment för en 30fps-video = 1 sekund per segment).
3. Varje arbetsfunktion tar emot en segmenttilldelning (startbildruta, slutbildruta), renderar dessa bildrutor med hjälp av Node.js-renderaren och laddar upp det renderade segmentet till objektlagring.
4. Sammanslagaren laddar ner alla segment och sammanfogar dem till den slutliga videon med hjälp av FFmpeg.
5. Den slutliga utdata lagras i molnleverantörens objektlagring (S3, Azure Blob eller GCS) och laddas eventuellt ner till det lokala filsystemet.

Molnkonfiguration

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 fullständiga konfigurationsgränssnittet:

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

AWS Lambda är det vanligaste molndistributionsmålet. Varje arbetsfunktion körs i en separat Lambda-anrop, vilket möjliggör massiv parallellism.

Förutsättningar:

• AWS-konto med Lambda och S3-åtkomst
• AWS CLI konfigurerad
• 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(`Renderad på ${result.renderTime}ms`);
console.log(`Arbetare använda: ${result.workersUsed}`);
console.log(`Utdata: ${result.outputUrl}`);

Typisk AWS Lambda-konfiguration:

• Minne: 1024-3008 MB (mer minne = mer CPU = snabbare rendering)
• Timeout: 300 sekunder (5 minuter)
• Efemär lagring: 512 MB - 10 GB
• Samtidighet: 100-1000 (justera baserat på arbetsbelastning)

Azure Functions-installation

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

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

Kostnadsjämförelse

Alla molnleverantörer erbjuder gratisplaner som täcker betydande renderingsarbetsbelastningar under utveckling och lågvolymproduktion.

Prestandabenchmarks

Molnrendering uppnår en 10-50x snabbhet jämfört med sekventiell rendering på en enda maskin. Den exakta snabbheten beror på antalet arbetare, mallkomplexitet och videovaraktighet.

Längre videor drar nytta mer av parallellism eftersom overhead för arbetarstart och bildsammanslagning amorteras över fler bildrutor.

Docker lokal rendering

Docker-baserad rendering ger dig samma parallella renderingsarkitektur som molnrendering, men körs helt på din lokala maskin. Det är helt gratis, använder inga molnkonton och är idealiskt för självhostade installationer, utveckling och team som vill ha parallell rendering utan molnkostnader.

När ska man använda Docker-rendering

• Gratis parallell rendering utan molnleverantörskonton
• Självhostad infrastruktur bakom en brandvägg
• Utveckling och testning av molnrenderingsarbetsflöden lokalt
• Små till medelstora arbetsbelastningar som drar nytta av parallellism men inte behöver autoskalning

Installation

# Se till att Docker är installerat och körs
docker --version

# Installera molnrenderingspaketet
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-containrar att köra parallellt
  },
});

const result = await renderer.render(template);
console.log(`Renderad på ${result.renderTime}ms med ${result.workersUsed} arbetare`);

Välja workersCount: Ställ in detta till antalet CPU-kärnor tillgängliga på din maskin. Till exempel fungerar en 8-kärnig maskin bra med 8 arbetare. Att gå över ditt kärnantal lägger till overhead från kontextväxling utan att förbättra genomströ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  |
      +-----------------+

Varje Docker-container är en självständig arbetare med Node.js, Playwright och FFmpeg förinstallerat. Arbetare läser sina bildrutetilldelningar från den delade volymen, renderar bildrutorna och skriver resultaten tillbaka. Koordinatorn slår sedan samman alla segment till den slutliga utdata.

Rörelseoskärpa

Rendervid stöder rörelseoskärpa genom temporal supersampling. Istället för att rendera ett enda ögonblick per bildruta, fångar renderaren flera underbilder vid något olika tidpunkter och blandar dem tillsammans. Detta ger den naturliga oskärpa som kameror skapar när objekt rör sig under en exponering.

Kvalitetsförinställningar

Konfiguration

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

Hur temporal supersampling fungerar

Frame N (ingen rörelseoskärpa):          Frame N (med rörelseoskärpa, 5 sampel):

  Enstaka ögonblick:                    5 underbilder blandade:

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

Varje underbild avancerar animationstidslinjen med ett litet steg (1/fps delat med samplingsantalet). Underbilderna blandas sedan med alfa för att producera den slutliga bildrutan. Objekt som rörde sig mellan underbilder verkar suddiga längs sin rörelseväg, medan stationära element förblir skarpa.

Prestandaöverväganden

Rörelseoskärpa multiplicerar renderingstiden proportionellt mot samplingsantalet. En 10-sekunders video vid 30fps har 300 bildrutor. Med high kvalitet (16 sampel) måste renderaren generera 4 800 underbilder istället för 300. Använd draft kvalitet under utveckling och byt till high eller ultra endast för slutliga exporter.

Molnrendering och Docker parallell rendering fungerar bra med rörelseoskärpa eftersom kostnaden per bildruta distribueras över arbetare. En 16x ökning per bildruta delad över 16 arbetare resulterar i ungefär samma totala renderingstid som en icke-suddig rendering på en maskin.

GIF-export

Renderids GIF-export går långt bortom en enkel bildruta-till-GIF-konvertering. Den använder FFmpegs palettgenereringspipeline för att producera optimerade, högkvalitativa animerade GIF:ar med konfigurerbar dithering, färgantal och filstorleksbegränsningar.

Hur GIF-optimering fungerar

Standard GIF-kodning använder en enda global palett med 256 färger, vilket ofta resulterar i banding och dålig färgåtergivning. Rendervid använder en tvåpassmetod:

1. Pass 1 (palettegen): Analysera alla bildrutor för att generera en optimal 256-färgspalett som bäst representerar videons fulla färgomfång.
2. Pass 2 (paletteuse): Koda om varje bildruta med den optimerade paletten med valfri dithering för mjuka gradienter.

Optimeringsförinställningar

Dithering-alternativ

Konfiguration

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 upplösning
    colors: 256,            // 2-256 färgpalett
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimera för att hålla sig under 5MB
    fps: 15,                // Lägre FPS = mindre fil
  },
});

console.log(`GIF-storlek: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Uppskattad storlek var: ${result.estimatedSizeKB} KB`);

Filstorleksuppskattning och auto-optimering

När du ställer in en targetSizeKB, uppskattar Rendervid utdatafilstorleken innan rendering och justerar automatiskt parametrar (färgantal, upplösning, FPS) för att uppfylla målet. Detta är särskilt användbart för plattformar med filstorleksgränser (t.ex. Slacks 50 MB-gräns, e-postens typiska 10 MB-begränsning).

// Auto-optimera för att passa inom en 2MB e-postbegränsning
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Paketarkitektur

Rendervid är organiserad som en monorepo med 13 paket. Varje paket har ett fokuserat ansvar, och de komponerar tillsammans för att stödja varje distributionsscenario.

@rendervid/
├── core                    Motor, typer, validering, animationssystem
│   ├── Mallparser och validator (AJV + JSON Schema)
│   ├── Animationsmotor (40+ förinställningar, 30+ easing-funktioner)
│   ├── Lagersystem (text, bild, video, form, ljud, grupp, lottie, anpassad)
│   └── Scenhantering och övergångar (17 typer)
│
├── renderer-browser        Rendering på klientsidan
│   ├── Canvas-baserad bildruterendering
│   ├── MediaRecorder för WebM-export
│   └── WebAssembly MP4-kodare
│
├── renderer-node           Rendering på serversidan
│   ├── Playwright/Puppeteer huvudlös webbläsare
│   ├── FFmpeg-integration (fluent-ffmpeg)
│   ├── GPU-acceleration
│   └── GIF-optimeringspipeline
│
├── cloud-rendering         Multi-molnorkestrering
│   ├── AWS Lambda-leverantör
│   ├── Azure Functions-leverantör
│   ├── Google Cloud Functions-leverantör
│   ├── Docker lokal leverantör
│   ├── Segmentdelare och sammanslagare
│   └── Objektlagringsadaptrar (S3, Blob, GCS)
│
├── player                  Video/mallspelarkomponent
├── editor                  Visuell mallredigerare (Zustand-tillstånd)
├── components              Förbyggda React-komponenter
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Malldefinitioner och exempel (100+)
├── testing                 Testverktyg
│   ├── Vitest anpassade matchare
│   ├── Snapshot-testhjälpare
│   └── Visuella regressionsverktyg
│
├── editor-playground       Redigerarens utvecklingsmiljö
├── player-playground       Spelarens utvecklingsmiljö
├── mcp                     Model Context Protocol-server
└── docs                    VitePress dokumentationswebbplats

Hur paketen ansluter

• @rendervid/core är grunden. Varje annat paket beror på det för malltyper, validering och animationssystemet.
• @rendervid/renderer-browser och @rendervid/renderer-node konsumerar båda kärnmallar men matar ut genom olika pipelines (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering omsluter renderer-node och distribuerar sitt arbete över molnfunktioner eller Docker-containrar.
• @rendervid/player och @rendervid/editor är React-baserade UI-paket för uppspelning och visuell redigering. Redigeraren använder Zustand för tillståndshantering.
• @rendervid/components tillhandahåller de förbyggda React-komponenterna (AnimatedLineChart, AuroraBackground, etc.) som kan användas i mallar.
• @rendervid/testing tillhandahåller Vitest-matchare och snapshot-testhjälpare för validering av mallar.
• mcp är AI-integrations lagret som exponerar Renderids kapacitet för AI-agenter via Model Context Protocol.

Teknikstack

Rendervid är byggd på en modern TypeScript-stack vald för tillförlitlighet, prestanda och utvecklarupplevelse.

Testning

Rendervid inkluderar ett dedikerat testpaket (@rendervid/testing) som tillhandahåller anpassade Vitest-matchare, snapshot-testhjälpare och visuella regressionsverktyg för validering av mallar.

Vitest anpassade matchare

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

describe("Product Showcase Template", () => {
  it("should be a valid template", () => {
    expect(template).toBeValidTemplate();
  });

  it("should have the correct dimensions", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("should contain at least one text layer", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("should have animations on the headline", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot-testning

Snapshot-testning renderar en mall till en bild och jämför den mot en lagrad referens. Alla visuella ändringar orsakar att testet misslyckas, vilket gör det enkelt att fånga oavsiktliga regressioner.

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

describe("Template Visual Regression", () => {
  it("should match the reference snapshot at frame 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("should match the reference snapshot at the midpoint", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Visuell regressionstestning i CI

Integrera visuella regressionstester i din CI/CD-pipeline för att fånga renderingsändringar innan 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

Prestandaoptimering

Att få snabbast möjliga renderingstider kräver förståelse för var tid spenderas och vilka spakar du kan dra i. Här är de mest effektfulla optimeringsstrategierna.

1. Välj rätt distributionsmål

2. Optimera mallkomplexitet

• Minska lagerantal. Varje lager renderas oberoende. Färre lager betyder färre ritoperationer per bildruta.
• Använd draft kvalitet under utveckling och testning. Byt till high eller lossless endast för slutliga exporter.
• Förenkla animationer under förhandsvisning. Komplexa keyframe-sekvenser med många easing-funktioner lägger till beräkning per bildruta.

3. Använd renderWaitTime klokt

Alternativet renderWaitTime pausar rendering för att tillåta extern media (bilder, videor, typsnitt) att ladda. Ställ in detta till minimivärdet som säkerställer att alla tillgångar är laddade. Ett värde på 500-2000ms är typiskt. Att ställa in det för högt slösar tid på varje bildruta.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 sekund är vanligtvis tillräckligt
});

4. Utnyttja parallell rendering

För alla videor längre än 10 sekunder kommer parallell rendering (Docker eller moln) att vara snabbare än sekventiell rendering. Brytpunkten beror på din hårdvara och molnkonfiguration, men som en tumregel:

• < 10 sekunder: Enkel Node.js-renderare är bra
• 10-60 sekunder: Docker med 4-8 arbetare
• 1-10 minuter: Docker med 8-16 arbetare eller moln
• > 10 minuter: Molnrendering med 50+ arbetare

5. Optimera GIF-utdata

GIF:ar är i sig stora. För att hålla filstorlekarna hanterbara:

• Sänk FPS till 10-15. De flesta GIF:ar ser bra ut vid reducerade bildfrekvenser.
• Minska upplösningen med förinställningar (social, web, email).
• Begränsa färger till 128 eller färre för enkla animationer.
• Använd targetSizeKB för att låta Rendervid auto-optimera parametrar.
• Undvik dithering (none) om filstorlek spelar större roll än gradientkvalitet.

6. Aktivera GPU-acceleration

På maskiner med kompatibla GPU:er kan hårdvaruaccelererad kodning minska renderingstider med 2-5x för kodningssteget. Detta är mest effektfullt för hög upplösning (4K+) och höga bithastighetsutdata.

7. Förladda tillgångar

Om din mall refererar till externa bilder eller videor, förladda dem till lokal lagring innan rendering. Nätverksfördröjning under rendering är den vanligaste orsaken till långsamma eller misslyckade renderingar.

Nästa steg

• Kom igång med Rendervid: Besök Rendervid-översikten för installation och första rendering
• Lär dig mallsystemet: Läs Mallsystemdokumentationen för JSON-mallstruktur, variabler, scener, lager och animationer
• Utforska komponenter: Bläddra i Komponentbiblioteket för förbyggda React-komponenter som AnimatedLineChart och AuroraBackground
• Konfigurera AI-integration: Se AI-integrationsguiden för att ansluta Claude Code, Cursor eller Windsurf till Rendervid via MCP
• Visa källkoden: Besök Rendervid GitHub-repositoriet för den fullständiga källkoden och 100+ exempelmallar