Wdrożenie Rendervid - Renderowanie w przeglądarce, Node.js, chmurze i Dockerze

Wprowadzenie

Rendervid został zaprojektowany do renderowania wszędzie tam, gdzie wymaga tego Twój workflow. Niezależnie od tego, czy potrzebujesz natychmiastowych podglądów w przeglądarce, kodowania wideo klasy produkcyjnej na serwerze, czy masowo równoległego renderowania w infrastrukturze chmurowej, Rendervid zapewnia dedykowany pakiet dla każdego środowiska. Każdy cel wdrożenia współdzieli ten sam system szablonów i bibliotekę komponentów , więc szablon działający w przeglądarce działa identycznie na AWS Lambda lub w kontenerze Docker.

Ten przewodnik obejmuje wszystkie cztery środowiska wdrożeniowe, opcje renderowania dostępne w każdym z nich oraz zaawansowane funkcje takie jak rozmycie ruchu, eksport GIF i optymalizacja wydajności. Pod koniec będziesz dokładnie wiedzieć, która ścieżka wdrożenia pasuje do Twojego projektu i jak ją skonfigurować.

                        +---------------------+
                        |   Szablon JSON      |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |   Przeglądarka   |  |    Node.js     |  |     Chmura      |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Równoległe Workery
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Renderowanie w przeglądarce

Pakiet @rendervid/renderer-browser obsługuje renderowanie po stronie klienta całkowicie w przeglądarce użytkownika. Nie jest wymagana żadna infrastruktura serwerowa. To najszybsza ścieżka od szablonu do podglądu.

Kiedy używać renderowania w przeglądarce

• Podglądy w czasie rzeczywistym podczas edycji szablonu w edytorze wizualnym
• Aplikacje webowe, które muszą generować zasoby wideo lub obrazów w locie
• Prototypowanie nowych szablonów przed zatwierdzeniem do renderowania po stronie serwera
• Lekkie eksporty, gdzie wystarczające jest wyjście MP4, WebM, PNG, JPEG lub WebP

Instalacja

npm install @rendervid/renderer-browser

Jak to działa

Renderowanie w przeglądarce wykorzystuje HTML Canvas API do rysowania każdej klatki szablonu. Renderer przechodzi przez każdą scenę i warstwę, stosuje animacje i funkcje wygładzania, komponuje wynik na elemencie canvas i przechwytuje każdą klatkę. Dla wyjścia wideo klatki są kodowane przy użyciu wbudowanego w przeglądarkę API MediaRecorder (WebM) lub kodera MP4 opartego na WebAssembly.

Obsługiwane formaty wyjściowe

Przykład kodu

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: "Witaj z przeglądarki",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Renderuj do elementu canvas dla podglądu
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Eksportuj pojedynczą klatkę jako PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Ograniczenia renderowania w przeglądarce

• Brak dostępu do FFmpeg, więc H.265/HEVC i MOV nie są dostępne
• Eksport GIF wymaga renderera Node.js dla optymalizacji palety
• Maksymalna rozdzielczość zależy od limitów rozmiaru Canvas przeglądarki (zazwyczaj 4096x4096 lub 8192x8192)
• Prędkość renderowania zależy od procesora i GPU urządzenia klienta

Renderowanie Node.js

Pakiet @rendervid/renderer-node zapewnia renderowanie po stronie serwera z pełną integracją FFmpeg. Wykorzystuje Playwright lub Puppeteer do renderowania każdej klatki w przeglądarce headless, a następnie przekazuje klatki do FFmpeg w celu profesjonalnego kodowania wideo.

Kiedy używać renderowania Node.js

• Kodowanie wideo produkcyjnego z pełną obsługą kodeków (H.264, H.265, VP9)
• Przetwarzanie wsadowe setek lub tysięcy szablonów w zautomatyzowanych pipeline’ach
• REST API, które przyjmują JSON szablonu i zwracają renderowane wideo
• Pipeline’y CI/CD do automatycznego generowania treści
• Eksport GIF z optymalizacją palety i kontrolą ditheringu

Instalacja

# Zainstaluj renderer
npm install @rendervid/renderer-node

# Zainstaluj Playwright (zawiera pliki binarne przeglądarki)
npx playwright install chromium

# Zainstaluj FFmpeg (wymagane do kodowania wideo)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (przez Chocolatey)
choco install ffmpeg

Obsługiwane formaty wyjściowe

Presety jakości renderowania

Rendervid zapewnia cztery presety jakości, które kontrolują parametry kodowania:

Akceleracja GPU

Renderer Node.js obsługuje akcelerację sprzętową, aby przenieść kodowanie na GPU. To znacznie skraca czas renderowania dla złożonych szablonów z wieloma warstwami, wysokimi rozdzielczościami i efektami.

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

Akceleracja GPU jest dostępna w systemach z kompatybilnym sprzętem NVIDIA (NVENC), AMD (AMF) lub Intel (Quick Sync). FFmpeg musi być skompilowany z obsługą odpowiedniego kodera.

Przykład kodu

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: "Nagłówek",
      default: "Twój produkt, wyniesiony na wyższy poziom",
    },
  },
};

// Renderuj z niestandardowymi danymi wejściowymi
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Czekaj 2s na załadowanie mediów
  inputs: {
    headline: "Letnia wyprzedaż — 50% zniżki na wszystko",
  },
});

console.log(`Wyrenderowano: ${result.outputPath}`);
console.log(`Czas trwania: ${result.duration}s`);
console.log(`Rozmiar pliku: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Przetwarzanie wsadowe

Do przetwarzania wielu szablonów w sekwencji użyj API wsadowego:

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alicja" }, output: "alicja.mp4" },
  { template: socialTemplate, inputs: { name: "Bob" }, output: "bob.mp4" },
  { template: socialTemplate, inputs: { name: "Karol" }, output: "karol.mp4" },
];

for (const job of templates) {
  await renderer.render(job.template, {
    format: "mp4",
    quality: "standard",
    outputPath: `/output/${job.output}`,
    inputs: job.inputs,
  });
}

Dla prawdziwego równoległego renderowania na pojedynczej maszynie, zobacz sekcję Renderowanie lokalne Docker poniżej.

Renderowanie w chmurze

Pakiet @rendervid/cloud-rendering umożliwia rozproszone, równoległe renderowanie w infrastrukturze chmurowej. Zamiast renderować klatki sekwencyjnie na jednej maszynie, renderowanie w chmurze dzieli pracę na wiele funkcji roboczych, które renderują klatki jednocześnie, a następnie łączy je w końcowe wyjście.

Kiedy używać renderowania w chmurze

• Pipeline’y o wysokiej przepustowości przetwarzające setki filmów na godzinę
• Treści długometrażowe, gdzie sekwencyjne renderowanie jest zbyt wolne
• Obciążenia czasochłonne, gdzie przyspieszenie 10-50x ma znaczenie
• Automatyczne skalowanie do obsługi nieprzewidywalnych skoków zapotrzebowania

Architektura

+------------------+
|   Twoja aplikacja |
|  (Koordynator)   |
+--------+---------+
         |
         | 1. Podziel wideo na fragmenty klatek
         v
+--------+---------+
|  Dzielnik fragmentów |
+--------+---------+
         |
         |  2. Dystrybuuj fragmenty do workerów
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Każdy worker renderuje swoje klatki
      v            v           v
+-----+------+----+------+----+----+
|  Klatki    |  Klatki   |  Klatki |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Połącz w końcowe wideo
             v
     +-------+---------+
     |  Magazyn obiektów  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Pobierz lub serwuj
             v
     +-------+---------+
     |  Końcowe wyjście  |
     |   video.mp4      |
     +------------------+

Jak to działa krok po kroku:

1. Koordynator analizuje szablon i określa, ile klatek trzeba wyrenderować na podstawie całkowitego czasu trwania i FPS.
2. Dzielnik fragmentów dzieli całkowitą liczbę klatek na fragmenty (np. 30 klatek na fragment dla wideo 30fps = 1 sekunda na fragment).
3. Każda funkcja robocza otrzymuje przypisanie fragmentu (klatka początkowa, klatka końcowa), renderuje te klatki przy użyciu renderera Node.js i przesyła wyrenderowany segment do magazynu obiektów.
4. Merger pobiera wszystkie segmenty i łączy je w końcowe wideo przy użyciu FFmpeg.
5. Końcowe wyjście jest przechowywane w magazynie obiektów dostawcy chmury (S3, Azure Blob lub GCS) i opcjonalnie pobierane do lokalnego systemu plików.

Konfiguracja chmury

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

Pełny interfejs konfiguracji:

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

Konfiguracja AWS Lambda

AWS Lambda to najpopularniejszy cel wdrożenia w chmurze. Każda funkcja robocza działa w oddzielnym wywołaniu Lambda, umożliwiając masową równoległość.

Wymagania wstępne:

• Konto AWS z dostępem do Lambda i S3
• Skonfigurowane AWS CLI
• Runtime Node.js 18+ Lambda

Konfiguracja:

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(`Wyrenderowano w ${result.renderTime}ms`);
console.log(`Użyto workerów: ${result.workersUsed}`);
console.log(`Wyjście: ${result.outputUrl}`);

Typowa konfiguracja AWS Lambda:

• Pamięć: 1024-3008 MB (więcej pamięci = więcej CPU = szybsze renderowanie)
• Timeout: 300 sekund (5 minut)
• Pamięć efemeryczna: 512 MB - 10 GB
• Współbieżność: 100-1000 (dostosuj w zależności od obciążenia)

Konfiguracja Azure Functions

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

Konfiguracja Google Cloud Functions

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

Porównanie kosztów

Wszyscy dostawcy chmury oferują bezpłatne poziomy, które pokrywają znaczące obciążenia renderowania podczas rozwoju i produkcji o niskim wolumenie.

Testy wydajności

Renderowanie w chmurze osiąga przyspieszenie 10-50x w porównaniu do sekwencyjnego renderowania na pojedynczej maszynie. Dokładne przyspieszenie zależy od liczby workerów, złożoności szablonu i czasu trwania wideo.

Dłuższe filmy bardziej korzystają z równoległości, ponieważ narzut uruchamiania workerów i łączenia klatek jest amortyzowany na większej liczbie klatek.

Renderowanie lokalne Docker

Renderowanie oparte na Dockerze daje tę samą architekturę renderowania równoległego co renderowanie w chmurze, ale działa całkowicie na lokalnej maszynie. Jest całkowicie bezpłatne, nie wymaga kont w chmurze i jest idealne dla konfiguracji self-hosted, rozwoju i zespołów, które chcą renderowania równoległego bez kosztów chmury.

Kiedy używać renderowania Docker

• Bezpłatne renderowanie równoległe bez kont dostawców chmury
• Infrastruktura self-hosted za zaporą
• Rozwój i testowanie workflow renderowania w chmurze lokalnie
• Małe i średnie obciążenia, które korzystają z równoległości, ale nie potrzebują automatycznego skalowania

Instalacja

# Upewnij się, że Docker jest zainstalowany i uruchomiony
docker --version

# Zainstaluj pakiet renderowania w chmurze
npm install @rendervid/cloud-rendering

Konfiguracja

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, // Liczba kontenerów Docker do uruchomienia równolegle
  },
});

const result = await renderer.render(template);
console.log(`Wyrenderowano w ${result.renderTime}ms używając ${result.workersUsed} workerów`);

Wybór workersCount: Ustaw to na liczbę rdzeni CPU dostępnych na Twojej maszynie. Na przykład maszyna z 8 rdzeniami dobrze działa z 8 workerami. Przekroczenie liczby rdzeni dodaje narzut z przełączania kontekstu bez poprawy przepustowości.

Architektura Docker

+------------------+
|   Koordynator    |
|  (twój proces)   |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... kontenery Docker
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Współdzielony wolumen  |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Każdy kontener Docker to samodzielny worker z preinstalowanym Node.js, Playwright i FFmpeg. Workery odczytują swoje przypisania klatek ze współdzielonego wolumenu, renderują klatki i zapisują wyniki z powrotem. Koordynator następnie łączy wszystkie segmenty w końcowe wyjście.

Rozmycie ruchu

Rendervid obsługuje rozmycie ruchu poprzez temporalne supersampleowanie. Zamiast renderować pojedynczy moment na klatkę, renderer przechwytuje wiele pod-klatek w nieznacznie różnych punktach czasowych i miesza je razem. To tworzy naturalne rozmycie, które kamery tworzą, gdy obiekty poruszają się podczas naświetlania.

Presety jakości

Konfiguracja

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // 16 próbek na klatkę
  },
});

Jak działa temporalne supersampleowanie

Klatka N (bez rozmycia ruchu):       Klatka N (z rozmyciem ruchu, 5 próbek):

  Pojedynczy moment:                    5 pod-klatek zmieszanych:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Zmieszany wynik
                                     +--------+

Każda pod-klatka przesuwa oś czasu animacji o mały przyrost (1/fps podzielone przez liczbę próbek). Pod-klatki są następnie mieszane z alfa-blendingiem, aby utworzyć końcową klatkę. Obiekty, które poruszyły się między pod-klatkami, wyglądają rozmyte wzdłuż ścieżki ruchu, podczas gdy elementy nieruchome pozostają ostre.

Rozważania dotyczące wydajności

Rozmycie ruchu mnoży czas renderowania proporcjonalnie do liczby próbek. 10-sekundowe wideo przy 30fps ma 300 klatek. Przy jakości high (16 próbek) renderer musi wygenerować 4800 pod-klatek zamiast 300. Używaj jakości draft podczas rozwoju i przełączaj na high lub ultra tylko dla końcowych eksportów.

Renderowanie w chmurze i równoległe renderowanie Docker dobrze współpracują z rozmyciem ruchu, ponieważ koszt na klatkę jest rozłożony na workery. 16x wzrost na klatkę podzielony na 16 workerów skutkuje mniej więcej takim samym całkowitym czasem renderowania jak render bez rozmycia na jednej maszynie.

Eksport GIF

Eksport GIF w Rendervid wykracza daleko poza prostą konwersję klatka-do-GIF. Wykorzystuje pipeline generowania palety FFmpeg do tworzenia zoptymalizowanych, wysokiej jakości animowanych GIF-ów z konfigurowalnym ditheringiem, liczbą kolorów i ograniczeniami rozmiaru pliku.

Jak działa optymalizacja GIF

Standardowe kodowanie GIF używa pojedynczej globalnej palety 256 kolorów, co często skutkuje pasmowaniem i słabą reprodukcją kolorów. Rendervid wykorzystuje podejście dwuprzebiegowe:

1. Przebieg 1 (palettegen): Analizuj wszystkie klatki, aby wygenerować optymalną paletę 256 kolorów, która najlepiej reprezentuje pełny zakres kolorów wideo.
2. Przebieg 2 (paletteuse): Ponownie zakoduj każdą klatkę używając zoptymalizowanej palety z opcjonalnym ditheringiem dla gładkich gradientów.

Presety optymalizacji

Opcje ditheringu

Konfiguracja

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // rozdzielczość 480x480
    colors: 256,            // paleta 2-256 kolorów
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optymalizuj, aby pozostać poniżej 5MB
    fps: 15,                // Niższe FPS = mniejszy plik
  },
});

console.log(`Rozmiar GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Szacowany rozmiar wynosił: ${result.estimatedSizeKB} KB`);

Szacowanie rozmiaru pliku i auto-optymalizacja

Gdy ustawisz targetSizeKB, Rendervid szacuje rozmiar pliku wyjściowego przed renderowaniem i automatycznie dostosowuje parametry (liczba kolorów, rozdzielczość, FPS), aby osiągnąć cel. Jest to szczególnie przydatne dla platform z limitami rozmiaru pliku (np. limit 50 MB Slacka, typowe ograniczenie 10 MB dla emaili).

// Auto-optymalizuj, aby zmieścić się w ograniczeniu 2MB dla emaila
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Architektura pakietów

Rendervid jest zorganizowany jako monorepo z 13 pakietami. Każdy pakiet ma skoncentrowaną odpowiedzialność i komponują się razem, aby obsługiwać każdy scenariusz wdrożenia.

@rendervid/
├── core                    Silnik, typy, walidacja, system animacji
│   ├── Parser i walidator szablonów (AJV + JSON Schema)
│   ├── Silnik animacji (40+ presetów, 30+ funkcji wygładzania)
│   ├── System warstw (text, image, video, shape, audio, group, lottie, custom)
│   └── Zarządzanie scenami i przejściami (17 typów)
│
├── renderer-browser        Renderowanie po stronie klienta
│   ├── Renderowanie klatek oparte na Canvas
│   ├── MediaRecorder dla eksportu WebM
│   └── Koder MP4 WebAssembly
│
├── renderer-node           Renderowanie po stronie serwera
│   ├── Przeglądarka headless Playwright/Puppeteer
│   ├── Integracja FFmpeg (fluent-ffmpeg)
│   ├── Akceleracja GPU
│   └── Pipeline optymalizacji GIF
│
├── cloud-rendering         Orkiestracja multi-cloud
│   ├── Dostawca AWS Lambda
│   ├── Dostawca Azure Functions
│   ├── Dostawca Google Cloud Functions
│   ├── Dostawca lokalny Docker
│   ├── Dzielnik fragmentów i merger
│   └── Adaptery magazynu obiektów (S3, Blob, GCS)
│
├── player                  Komponent odtwarzacza wideo/szablonu
├── editor                  Wizualny edytor szablonów (stan Zustand)
├── components              Wbudowane komponenty React
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Definicje szablonów i przykłady (100+)
├── testing                 Narzędzia testowe
│   ├── Niestandardowe matchery Vitest
│   ├── Helpery testów snapshot
│   └── Narzędzia regresji wizualnej
│
├── editor-playground       Środowisko rozwojowe edytora
├── player-playground       Środowisko rozwojowe odtwarzacza
├── mcp                     Serwer Model Context Protocol
└── docs                    Strona dokumentacji VitePress

Jak łączą się pakiety

• @rendervid/core to fundament. Każdy inny pakiet zależy od niego dla typów szablonów, walidacji i systemu animacji.
• @rendervid/renderer-browser i @rendervid/renderer-node oba konsumują szablony core, ale wyprowadzają przez różne pipeline’y (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering opakowuje renderer-node i dystrybuuje jego pracę na funkcje chmurowe lub kontenery Docker.
• @rendervid/player i @rendervid/editor to pakiety UI oparte na React do odtwarzania i edycji wizualnej. Edytor używa Zustand do zarządzania stanem.
• @rendervid/components zapewnia wbudowane komponenty React (AnimatedLineChart, AuroraBackground, itp.), które mogą być używane w szablonach.
• @rendervid/testing zapewnia matchery Vitest i helpery testów snapshot do walidacji szablonów.
• mcp to warstwa integracji AI , która udostępnia możliwości Rendervid agentom AI poprzez Model Context Protocol.

Stos technologiczny

Rendervid jest zbudowany na nowoczesnym stosie TypeScript wybranym dla niezawodności, wydajności i doświadczenia programisty.

Testowanie

Rendervid zawiera dedykowany pakiet testowy (@rendervid/testing), który zapewnia niestandardowe matchery Vitest, helpery testów snapshot i narzędzia regresji wizualnej do walidacji szablonów.

Niestandardowe matchery Vitest

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

describe("Szablon prezentacji produktu", () => {
  it("powinien być prawidłowym szablonem", () => {
    expect(template).toBeValidTemplate();
  });

  it("powinien mieć prawidłowe wymiary", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("powinien zawierać przynajmniej jedną warstwę tekstową", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("powinien mieć animacje na nagłówku", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Testowanie snapshot

Testowanie snapshot renderuje szablon do obrazu i porównuje go z przechowywaną referencją. Każda zmiana wizualna powoduje niepowodzenie testu, co ułatwia wychwytywanie niezamierzonych regresji.

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

describe("Regresja wizualna szablonu", () => {
  it("powinien pasować do referencyjnego snapshota w klatce 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("powinien pasować do referencyjnego snapshota w połowie", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Testowanie regresji wizualnej w CI

Zintegruj testy regresji wizualnej w swoim pipeline CI/CD, aby wychwycić zmiany renderowania przed wejściem do produkcji:

# .github/workflows/visual-regression.yml
name: Testy regresji wizualnej
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

Optymalizacja wydajności

Uzyskanie jak najszybszych czasów renderowania wymaga zrozumienia, gdzie spędzany jest czas i jakie dźwignie można pociągnąć. Oto najbardziej wpływowe strategie optymalizacji.

1. Wybierz odpowiedni cel wdrożenia

2. Optymalizuj złożoność szablonu

• Zmniejsz liczbę warstw. Każda warstwa jest renderowana niezależnie. Mniej warstw oznacza mniej operacji rysowania na klatkę.
• Używaj jakości draft podczas rozwoju i testowania. Przełącz na high lub lossless tylko dla końcowych eksportów.
• Upraszczaj animacje podczas podglądu. Złożone sekwencje klatek kluczowych z wieloma funkcjami wygładzania dodają obliczenia na klatkę.

3. Mądrze używaj renderWaitTime

Opcja renderWaitTime wstrzymuje renderowanie, aby umożliwić załadowanie zewnętrznych mediów (obrazy, filmy, czcionki). Ustaw to na minimalną wartość, która zapewnia załadowanie wszystkich zasobów. Wartość 500-2000ms jest typowa. Ustawienie zbyt wysokiej wartości marnuje czas na każdej klatce.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 sekunda jest zwykle wystarczająca
});

4. Wykorzystaj renderowanie równoległe

Dla każdego wideo dłuższego niż 10 sekund renderowanie równoległe (Docker lub chmura) będzie szybsze niż renderowanie sekwencyjne. Punkt równowagi zależy od Twojego sprzętu i konfiguracji chmury, ale jako ogólna zasada:

• < 10 sekund: Pojedynczy renderer Node.js jest w porządku
• 10-60 sekund: Docker z 4-8 workerami
• 1-10 minut: Docker z 8-16 workerami lub chmura
• > 10 minut: Renderowanie w chmurze z 50+ workerami

5. Optymalizuj wyjście GIF

GIF-y są z natury duże. Aby utrzymać rozmiary plików w rozsądnych granicach:

• Obniż FPS do 10-15. Większość GIF-ów wygląda dobrze przy zmniejszonych częstotliwościach klatek.
• Zmniejsz rozdzielczość używając presetów (social, web, email).
• Ogranicz kolory do 128 lub mniej dla prostych animacji.
• Używaj targetSizeKB, aby pozwolić Rendervid auto-optymalizować parametry.
• Unikaj ditheringu (none), jeśli rozmiar pliku ma większe znaczenie niż jakość gradientu.

6. Włącz akcelerację GPU

Na maszynach z kompatybilnymi GPU kodowanie z akceleracją sprzętową może zmniejszyć czasy renderowania o 2-5x dla kroku kodowania. Jest to najbardziej wpływowe dla wysokich rozdzielczości (4K+) i wyjść o wysokim bitrate.

7. Wstępnie załaduj zasoby

Jeśli Twój szablon odwołuje się do zewnętrznych obrazów lub filmów, pobierz je wcześniej do lokalnego magazynu przed renderowaniem. Opóźnienie sieci podczas renderowania jest najczęstszą przyczyną wolnych lub nieudanych renderów.

Następne kroki

• Zacznij z Rendervid: Odwiedź przegląd Rendervid dla instalacji i pierwszego renderowania
• Naucz się systemu szablonów: Przeczytaj dokumentację systemu szablonów dla struktury szablonu JSON, zmiennych, scen, warstw i animacji
• Eksploruj komponenty: Przeglądaj bibliotekę komponentów dla wbudowanych komponentów React takich jak AnimatedLineChart i AuroraBackground
• Skonfiguruj integrację AI: Zobacz przewodnik integracji AI , aby połączyć Claude Code, Cursor lub Windsurf z Rendervid poprzez MCP
• Zobacz źródło: Odwiedź repozytorium GitHub Rendervid dla pełnego kodu źródłowego i 100+ przykładowych szablonów