Rendervid-käyttöönotto - Selain, Node.js, pilvi ja Docker-renderöinti

Johdanto

Rendervid on suunniteltu renderöimään missä tahansa työnkulkusi vaatii. Tarvitsetpa sitten välittömiä esikatseluja selaimessa, tuotantotason videokoodausta palvelimella tai massiivisesti rinnakkaista renderöintiä pilvi-infrastruktuurissa, Rendervid tarjoaa oman paketin jokaiseen ympäristöön. Jokainen käyttöönottokohde jakaa saman mallipohja-järjestelmän ja komponenttikirjaston , joten mallipohja, joka toimii selaimessa, toimii identtisesti AWS Lambdassa tai Docker-konttissa.

Tämä opas kattaa kaikki neljä käyttöönottoympäristöä, kussakin saatavilla olevat renderöintivaihtoehdot ja kehittyneet ominaisuudet kuten liikesumennuksen, GIF-viennin ja suorituskyvyn optimoinnin. Lopussa tiedät tarkalleen, mikä käyttöönottopolku sopii projektiisi ja miten se konfiguroidaan.

                        +---------------------+
                        |   JSON-mallipohja   |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |     Selain       |  |    Node.js     |  |     Pilvi       |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Rinnakkaiset työntekijät
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Selainrenderöinti

@rendervid/renderer-browser-paketti käsittelee asiakaspuolen renderöinnin kokonaan käyttäjän selaimessa. Palvelininfrastruktuuria ei tarvita. Tämä tekee siitä nopeimman polun mallipohjan esikatselu.

Milloin käyttää selainrenderöintiä

• Reaaliaikaiset esikatselut mallipohjan muokkauksen aikana visuaalisessa editorissa
• Verkkosovellukset, jotka tarvitsevat generoida video- tai kuvaresursseja lennossa
• Prototyyppien luominen uusista mallipohjista ennen palvelinpuolen renderöintiin sitoutumista
• Kevyet viennit, joissa MP4-, WebM-, PNG-, JPEG- tai WebP-tuloste on riittävä

Asennus

npm install @rendervid/renderer-browser

Miten se toimii

Selainrenderöinti käyttää HTML Canvas API:a piirtämään jokaisen mallipohjan kehyksen. Renderöijä käy läpi jokaisen kohtauksen ja tason, soveltaa animaatiot ja keventämisfunktiot, yhdistää tuloksen canvas-elementtiin ja kaappaa jokaisen kehyksen. Videotulosteessa kehykset koodataan käyttäen selaimen sisäänrakennettua MediaRecorder API:a (WebM) tai WebAssembly-pohjaista MP4-kooderia.

Tuetut tulosteformaatit

Koodiesimerkki

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

// Renderöi canvas-elementtiin esikatselua varten
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Vie yksittäinen kehys PNG:nä
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Selainrenderöinnin rajoitukset

• Ei FFmpeg-pääsyä, joten H.265/HEVC ja MOV eivät ole käytettävissä
• GIF-vienti vaatii Node.js-renderöijän palettioptimointia varten
• Maksimoresoluutio riippuu selaimen Canvas-kokorajoituksista (tyypillisesti 4096x4096 tai 8192x8192)
• Renderöintinopeus riippuu asiakaspäätelaitteen CPU:sta ja GPU:sta

Node.js-renderöinti

@rendervid/renderer-node-paketti tarjoaa palvelinpuolen renderöinnin täydellä FFmpeg-integraatiolla. Se käyttää Playwrightia tai Puppeteeria renderöimään jokaisen kehyksen headless-selaimessa ja putkittaa kehykset FFmpeg:iin ammattitason videokoodausta varten.

Milloin käyttää Node.js-renderöintiä

• Tuotannon videokoodaus täydellä kodekituella (H.264, H.265, VP9)
• Eräajo satoja tai tuhansia mallipohja automatisoituissa putkilinjoissa
• REST API:t, jotka vastaanottavat mallipohjan JSON:n ja palauttavat renderöidyn videon
• CI/CD-putkilinjat automaattista sisällön generointia varten
• GIF-vienti palettioptimointilla ja dithering-ohjauksella

Asennus

# Asenna renderöijä
npm install @rendervid/renderer-node

# Asenna Playwright (sisältää selainbinäärit)
npx playwright install chromium

# Asenna FFmpeg (vaaditaan videokoodaukseen)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (Chocolatey:n kautta)
choco install ffmpeg

Tuetut tulosteformaatit

Renderöinnin laatuasetukset

Rendervid tarjoaa neljä laatuasetusta, jotka ohjaavat koodausparametreja:

GPU-kiihdytys

Node.js-renderöijä tukee laitteistokiihdytystä koodauksen siirtämiseksi GPU:lle. Tämä vähentää merkittävästi renderöintiaikaa monimutkaisissa mallipohjissa, joissa on monia tasoja, korkeita resoluutioita ja efektejä.

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

GPU-kiihdytys on saatavilla järjestelmissä, joissa on yhteensopiva NVIDIA (NVENC), AMD (AMF) tai Intel (Quick Sync) -laitteisto. FFmpeg on käännettävä vastaavan kooderin tuella.

Koodiesimerkki

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: "Otsikko",
      default: "Tuotteesi, korotettuna",
    },
  },
};

// Renderöi mukautetuilla syötteillä
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Odota 2s median latautumista
  inputs: {
    headline: "Kesäale — 50% alennusta kaikesta",
  },
});

console.log(`Renderöity: ${result.outputPath}`);
console.log(`Kesto: ${result.duration}s`);
console.log(`Tiedostokoko: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Eräajo

Monien mallipohja käsittelyyn peräkkäin, käytä eräajo-API:a:

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

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Maija" }, output: "maija.mp4" },
  { template: socialTemplate, inputs: { name: "Pekka" }, output: "pekka.mp4" },
  { template: socialTemplate, inputs: { name: "Liisa" }, output: "liisa.mp4" },
];

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

Todellista rinnakkaista renderöintiä yhdellä koneella varten, katso Docker-paikallinen renderöinti -osio alla.

Pilvirenderöinti

@rendervid/cloud-rendering-paketti mahdollistaa hajautetun, rinnakkaisen renderöinnin pilvi-infrastruktuurissa. Sen sijaan, että renderöisi kehykset peräkkäin yhdellä koneella, pilvirenderöinti jakaa työn monille työntekijäfunktioille, jotka renderöivät kehyksiä samanaikaisesti ja yhdistävät ne sitten lopulliseksi tulosteeksi.

Milloin käyttää pilvirenderöintiä

• Korkean suorituskyvyn putkilinjat, jotka käsittelevät satoja videoita tunnissa
• Pitkämuotoinen sisältö, jossa peräkkäinen renderöinti on liian hidasta
• Aikaherkät työkuormat, joissa 10-50x nopeusparannus on merkittävä
• Automaattinen skaalautuminen käsittelemään arvaamattomia kysyntäpiikkejä

Arkkitehtuuri

+------------------+
|   Sovelluksesi   |
|  (Koordinaattori)|
+--------+---------+
         |
         | 1. Jaa video kehyspaloihin
         v
+--------+---------+
|   Palojako       |
+--------+---------+
         |
         |  2. Jaa palat työntekijöille
         v
+--------+---+---+---+---+--------+
|  Työntekijä 1 | Työntekijä 2 | Työntekijä N |
|  (Lambda/     | (Lambda/     | (Lambda/     |
|   Azure/      |  Azure/      |  Azure/      |
|   GCP)        |  GCP)        |  GCP)        |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Jokainen työntekijä renderöi kehyksensä
      v            v           v
+-----+------+----+------+----+----+
|  Kehykset  |  Kehykset |  Kehykset |
|  001-030   |  031-060  |  061-090  |
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |    Yhdistäjä    |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Yhdistä lopulliseksi videoksi
             v
     +-------+---------+
     |  Objektitallennus |
     |  S3 / Blob / GCS  |
     +------------------+
             |
             | 5. Lataa tai tarjoa
             v
     +-------+---------+
     |  Lopullinen tuloste |
     |   video.mp4         |
     +------------------+

Miten se toimii vaihe vaiheelta:

1. Koordinaattori analysoi mallipohjan ja määrittää kuinka monta kehystä on renderöitävä kokonaiskeston ja FPS:n perusteella.
2. Palojako jakaa kokonaiskehysmäärän paloihin (esim. 30 kehystä per pala 30fps-videolle = 1 sekunti per pala).
3. Jokainen työntekijäfunktio vastaanottaa palatehtävän (alkukehys, loppukehys), renderöi kyseiset kehykset käyttäen Node.js-renderöijää ja lataa renderöidyn segmentin objektitallennukseen.
4. Yhdistäjä lataa kaikki segmentit ja ketjuttaa ne lopulliseksi videoksi käyttäen FFmpeg:iä.
5. Lopullinen tuloste tallennetaan pilvitarjoajan objektitallennukseen (S3, Azure Blob tai GCS) ja valinnaisesti ladataan paikalliseen tiedostojärjestelmään.

Pilvikonfiguraatio

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

Täydellinen konfiguraatio-rajapinta:

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

AWS Lambda on yleisin pilvikäyttöönottokohde. Jokainen työntekijäfunktio suoritetaan erillisessä Lambda-käynnistyksessä, mahdollistaen massiivisen rinnakkaisuuden.

Edellytykset:

• AWS-tili Lambda- ja S3-pääsyllä
• AWS CLI konfiguroitu
• Node.js 18+ Lambda-ajoympäristö

Konfiguraatio:

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(`Renderöity ${result.renderTime}ms:ssa`);
console.log(`Käytettyjä työntekijöitä: ${result.workersUsed}`);
console.log(`Tuloste: ${result.outputUrl}`);

Tyypillinen AWS Lambda -konfiguraatio:

• Muisti: 1024-3008 MB (enemmän muistia = enemmän CPU:ta = nopeampi renderöinti)
• Aikakatkaisu: 300 sekuntia (5 minuuttia)
• Väliaikainen tallennus: 512 MB - 10 GB
• Samanaikaisuus: 100-1000 (säädä työkuorman mukaan)

Azure Functions -asetukset

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

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

Kustannusvertailu

Kaikki pilvitarjoajat tarjoavat ilmaisia tasoja, jotka kattavat merkittäviä renderöintityökuormia kehityksen ja matalan volyymin tuotannon aikana.

Suorituskykyvertailut

Pilvirenderöinti saavuttaa 10-50x nopeusparannuksen verrattuna yhden koneen peräkkäiseen renderöintiin. Tarkka nopeusparannus riippuu työntekijöiden määrästä, mallipohjan monimutkaisuudesta ja videon kestosta.

Pidemmät videot hyötyvät enemmän rinnakkaisuudesta, koska työntekijän käynnistyksen ja kehysten yhdistämisen yleiskustannukset jakautuvat useammalle kehykselle.

Docker-paikallinen renderöinti

Docker-pohjainen renderöinti antaa sinulle saman rinnakkaisen renderöintiarkkitehtuurin kuin pilvirenderöinti, mutta suorittaen kokonaan paikallisella koneellasi. Se on täysin ilmainen, ei käytä pilvitilejä ja on ihanteellinen itse ylläpidetyille asetuksille, kehitykselle ja tiimeille, jotka haluavat rinnakkaista renderöintiä ilman pilvikustannuksia.

Milloin käyttää Docker-renderöintiä

• Ilmainen rinnakkainen renderöinti ilman pilvitarjoajan tilejä
• Itse ylläpidetty infrastruktuuri palomuurin takana
• Kehitys ja testaus pilvirenderöinnin työnkuluista paikallisesti
• Pienet ja keskisuuret työkuormat, jotka hyötyvät rinnakkaisuudesta mutta eivät tarvitse automaattista skaalautumista

Asennus

# Varmista, että Docker on asennettu ja käynnissä
docker --version

# Asenna pilvirenderöintipaketti
npm install @rendervid/cloud-rendering

Konfiguraatio

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, // Rinnakkain suoritettavien Docker-konttien määrä
  },
});

const result = await renderer.render(template);
console.log(`Renderöity ${result.renderTime}ms:ssa käyttäen ${result.workersUsed} työntekijää`);

workersCount:n valinta: Aseta tämä koneesi käytettävissä olevien CPU-ytimien määräksi. Esimerkiksi 8-ytiminen kone toimii hyvin 8 työntekijällä. Ytimien määrän ylittäminen lisää kontekstin vaihdon aiheuttamaa yleiskustannusta parantamatta läpimenoa.

Docker-arkkitehtuuri

+------------------+
|   Koordinaattori |
|  (prosessisi)    |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Docker-kontit
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Jaettu volyymi         |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |    Yhdistäjä    |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Jokainen Docker-kontti on itsenäinen työntekijä, jossa on Node.js, Playwright ja FFmpeg esiasennettuina. Työntekijät lukevat kehystehtävänsä jaetusta volyymista, renderöivät kehykset ja kirjoittavat tulokset takaisin. Koordinaattori yhdistää sitten kaikki segmentit lopulliseksi tulosteeksi.

Liikesumennus

Rendervid tukee liikesumennusta ajallisen supernäytteenottoa kautta. Sen sijaan, että renderöisi yhden hetken per kehys, renderöijä kaappaa useita alikehyksiä hieman eri aikapisteissä ja sekoittaa ne yhteen. Tämä tuottaa luonnollisen sumennuksen, jonka kamerat luovat, kun objektit liikkuvat valotuksen aikana.

Laatuasetukset

Konfiguraatio

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

Miten ajallinen supernäytteenotto toimii

Kehys N (ei liikesumennusta):      Kehys N (liikesumennuksella, 5 näytettä):

  Yksittäinen hetki:                5 alikehystä sekoitettuna:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Sekoitettu tulos
                                     +--------+

Jokainen alikehys edistää animaation aikajanaa pienellä lisäyksellä (1/fps jaettuna näytemäärällä). Alikehykset sekoitetaan sitten alfa-sekoituksella lopullisen kehyksen tuottamiseksi. Objektit, jotka liikkuivat alikehysten välillä, näkyvät sumennetuina liikepolkunsa varrella, kun taas paikallaan pysyvät elementit pysyvät terävinä.

Suorituskykyhuomiot

Liikesumennus moninkertaistaa renderöintiajan suhteessa näytemäärään. 10 sekunnin videossa 30fps:llä on 300 kehystä. high-laadulla (16 näytettä) renderöijän on generoitava 4 800 alikehystä 300:n sijaan. Käytä draft-laatua kehityksen aikana ja vaihda high- tai ultra-laatuun vain lopullisissa vienneissä.

Pilvirenderöinti ja Docker-rinnakkainen renderöinti toimivat hyvin liikesumennuksen kanssa, koska per-kehys-kustannukset jakautuvat työntekijöiden kesken. 16x per-kehys-lisäys jaettuna 16 työntekijälle johtaa suunnilleen samaan kokonaisrenderöintiaikaan kuin ei-sumennettu renderöinti yhdellä koneella.

GIF-vienti

Rendervidin GIF-vienti menee paljon pidemmälle kuin yksinkertainen kehys-GIF-muunnos. Se käyttää FFmpeg:in palettigeneraatioputkilinjaa tuottamaan optimoituja, korkealaatuisia animoituja GIF:ejä säädettävällä ditheringillä, värimäärillä ja tiedostokokorajoituksilla.

Miten GIF-optimointi toimii

Tavallinen GIF-koodaus käyttää yhtä globaalia 256 värin palettia, mikä usein johtaa kaistoitukseen ja heikkoon värien toistoon. Rendervid käyttää kaksivaiheista lähestymistapaa:

1. Vaihe 1 (palettegen): Analysoi kaikki kehykset optimaalisen 256 värin paletin generoimiseksi, joka parhaiten edustaa videon täyttä väriavaruutta.
2. Vaihe 2 (paletteuse): Koodaa jokainen kehys uudelleen käyttäen optimoitua palettia valinnaisella ditheringillä sujuvia liukuvärejä varten.

Optimointiasetukset

Dithering-vaihtoehdot

Konfiguraatio

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 resoluutio
    colors: 256,            // 2-256 väripaletti
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Automaattinen optimointi alle 5MB:n
    fps: 15,                // Matalampi FPS = pienempi tiedosto
  },
});

console.log(`GIF-koko: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Arvioitu koko oli: ${result.estimatedSizeKB} KB`);

Tiedostokoon arviointi ja automaattinen optimointi

Kun asetat targetSizeKB:n, Rendervid arvioi tulostiedoston koon ennen renderöintiä ja säätää automaattisesti parametreja (värimäärä, resoluutio, FPS) tavoitteen saavuttamiseksi. Tämä on erityisen hyödyllistä alustoille, joilla on tiedostokokorajoituksia (esim. Slackin 50 MB raja, sähköpostin tyypillinen 10 MB rajoitus).

// Automaattinen optimointi 2MB:n sähköpostirajoituksen sisällä
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Pakettiarkkitehtuuri

Rendervid on organisoitu monorepo:na 13 paketilla. Jokaisella paketilla on keskittynyt vastuu, ja ne koostuvat yhteen tukemaan jokaista käyttöönottoskenaariota.

@rendervid/
├── core                    Moottori, tyypit, validointi, animaatiojärjestelmä
│   ├── Mallipohjan jäsentäjä ja validoija (AJV + JSON Schema)
│   ├── Animaatiomoottori (40+ esiasetusta, 30+ keventämisfunktiota)
│   ├── Tasojärjestelmä (teksti, kuva, video, muoto, ääni, ryhmä, lottie, mukautettu)
│   └── Kohtauksen hallinta ja siirtymät (17 tyyppiä)
│
├── renderer-browser        Asiakaspuolen renderöinti
│   ├── Canvas-pohjainen kehysrenderöinti
│   ├── MediaRecorder WebM-vientiin
│   └── WebAssembly MP4-kooderi
│
├── renderer-node           Palvelinpuolen renderöinti
│   ├── Playwright/Puppeteer headless-selain
│   ├── FFmpeg-integraatio (fluent-ffmpeg)
│   ├── GPU-kiihdytys
│   └── GIF-optimointiputkilinja
│
├── cloud-rendering         Monipilvi-orkestrointi
│   ├── AWS Lambda -tarjoaja
│   ├── Azure Functions -tarjoaja
│   ├── Google Cloud Functions -tarjoaja
│   ├── Docker-paikallinen tarjoaja
│   ├── Palojako ja yhdistäjä
│   └── Objektitallennussovittimet (S3, Blob, GCS)
│
├── player                  Video/mallipohjasoitin-komponentti
├── editor                  Visuaalinen mallipohjaeditori (Zustand-tila)
├── components              Esirakennetut React-komponentit
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Mallipohjan määrittelyt ja esimerkit (100+)
├── testing                 Testausapuvälineet
│   ├── Vitest-mukautetut täsmääjät
│   ├── Snapshot-testausapurit
│   └── Visuaalisen regression apuvälineet
│
├── editor-playground       Editorin kehitysympäristö
├── player-playground       Soittimen kehitysympäristö
├── mcp                     Model Context Protocol -palvelin
└── docs                    VitePress-dokumentaatiosivusto

Miten paketit yhdistyvät

• @rendervid/core on perusta. Jokainen muu paketti riippuu siitä mallipohjatyyppejä, validointia ja animaatiojärjestelmää varten.
• @rendervid/renderer-browser ja @rendervid/renderer-node molemmat kuluttavat ydinmallipohja mutta tulostavat eri putkilinjojen kautta (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering käärii renderer-node:n ja jakaa sen työn pilvifunktioiden tai Docker-konttien kesken.
• @rendervid/player ja @rendervid/editor ovat React-pohjaisia käyttöliittymäpaketteja toistoa ja visuaalista editointia varten. Editori käyttää Zustandia tilanhallinnan.
• @rendervid/components tarjoaa esirakennetut React-komponentit (AnimatedLineChart, AuroraBackground, jne.), joita voidaan käyttää mallipohjissa.
• @rendervid/testing tarjoaa Vitest-täsmääjiä ja snapshot-testausapureita mallipohja validointiin.
• mcp on AI-integraatio -kerros, joka paljastaa Rendervidin kyvyt AI-agenteille Model Context Protocol -protokollan kautta.

Teknologiapino

Rendervid on rakennettu modernilla TypeScript-pinolla, joka on valittu luotettavuuden, suorituskyvyn ja kehittäjäkokemuksen vuoksi.

Testaus

Rendervid sisältää erillisen testauspaketin (@rendervid/testing), joka tarjoaa mukautetut Vitest-täsmääjät, snapshot-testausapurit ja visuaalisen regression apuvälineet mallipohja validointiin.

Vitest-mukautetut täsmääjät

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

describe("Tuote-esittely-mallipohja", () => {
  it("pitäisi olla kelvollinen mallipohja", () => {
    expect(template).toBeValidTemplate();
  });

  it("pitäisi olla oikeat mitat", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("pitäisi sisältää vähintään yksi tekstitaso", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("pitäisi olla animaatioita otsikossa", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot-testaus

Snapshot-testaus renderöi mallipohjan kuvaksi ja vertaa sitä tallennettuun viitteeseen. Mikä tahansa visuaalinen muutos aiheuttaa testin epäonnistumisen, mikä helpottaa tahattomien regressioiden havaitsemista.

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

describe("Mallipohjan visuaalinen regressio", () => {
  it("pitäisi vastata viite-snapshottia kehyksessä 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("pitäisi vastata viite-snapshottia keskipisteessä", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Visuaalisen regression testaus CI:ssä

Integroi visuaalisen regression testit CI/CD-putkilinjaasi havaitaksesi renderöintimuutokset ennen kuin ne saavuttavat tuotannon:

# .github/workflows/visual-regression.yml
name: Visuaalisen regression testit
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

Suorituskyvyn optimointi

Nopeimpien mahdollisten renderöintiaikojen saavuttaminen vaatii ymmärrystä siitä, mihin aika kuluu ja mitä vipuja voit vetää. Tässä ovat vaikuttavimmat optimointistrategiat.

1. Valitse oikea käyttöönottokohde

2. Optimoi mallipohjan monimutkaisuus

• Vähennä tasojen määrää. Jokainen taso renderöidään itsenäisesti. Vähemmän tasoja tarkoittaa vähemmän piirto-operaatioita per kehys.
• Käytä draft-laatua kehityksen ja testauksen aikana. Vaihda high- tai lossless-laatuun vain lopullisissa vienneissä.
• Yksinkertaista animaatioita esikatselun aikana. Monimutkaiset keyframe-sekvenssit monilla keventämisfunktioilla lisäävät laskentaa per kehys.

3. Käytä renderWaitTime:a viisaasti

renderWaitTime-vaihtoehto keskeyttää renderöinnin salliakseen ulkoisten median (kuvat, videot, fontit) latautua. Aseta tämä minimiin arvoon, joka varmistaa, että kaikki resurssit on ladattu. Arvo 500-2000ms on tyypillinen. Liian korkean arvon asettaminen tuhlaa aikaa jokaisessa kehyksessä.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 sekunti on yleensä riittävä
});

4. Hyödynnä rinnakkaista renderöintiä

Mille tahansa yli 10 sekunnin videolle rinnakkainen renderöinti (Docker tai pilvi) on nopeampi kuin peräkkäinen renderöinti. Kannattavuuspiste riippuu laitteistostasi ja pilvikonfiguraatiostasi, mutta nyrkkisääntönä:

• < 10 sekuntia: Yksittäinen Node.js-renderöijä on hyvä
• 10-60 sekuntia: Docker 4-8 työntekijällä
• 1-10 minuuttia: Docker 8-16 työntekijällä tai pilvi
• > 10 minuuttia: Pilvirenderöinti 50+ työntekijällä

5. Optimoi GIF-tuloste

GIF:t ovat luonnostaan suuria. Tiedostokokojen pitämiseksi hallittavina:

• Laske FPS 10-15:een. Useimmat GIF:t näyttävät hyviltä alennetuilla kuvanopeuksilla.
• Vähennä resoluutiota käyttämällä esiasetuksia (social, web, email).
• Rajoita värejä 128:aan tai vähempään yksinkertaisissa animaatioissa.
• Käytä targetSizeKB:tä antaaksesi Rendervidin automaattisesti optimoida parametreja.
• Vältä ditheringiä (none), jos tiedostokoko on tärkeämpi kuin liukuvärin laatu.

6. Ota GPU-kiihdytys käyttöön

Koneilla, joissa on yhteensopivat GPU:t, laitteistokiihdytetty koodaus voi vähentää renderöintiaikoja 2-5x koodausvaiheessa. Tämä on vaikuttavinta korkeissa resoluutioissa (4K+) ja korkean bittinopeuden tulosteissa.

7. Esilataa resurssit

Jos mallipohja viittaa ulkoisiin kuviin tai videoihin, esilataa ne paikalliseen tallennukseen ennen renderöintiä. Verkon viive renderöinnin aikana on yleisin syy hitaisiin tai epäonnistuneisiin renderöinteihin.

Seuraavat vaiheet

• Aloita Rendervidin kanssa: Vieraile Rendervid-yleiskatsauksessa asennusta ja ensimmäistä renderöintiä varten
• Opi mallipohja-järjestelmä: Lue Mallipohja-järjestelmän dokumentaatio JSON-mallipohjan rakenteesta, muuttujista, kohtauksista, tasoista ja animaatioista
• Tutustu komponentteihin: Selaa Komponenttikirjastoa esirakennettujen React-komponenttien, kuten AnimatedLineChartin ja AuroraBackgroundin, osalta
• Asenna AI-integraatio: Katso AI-integraatio-opas yhdistääksesi Claude Coden, Cursorin tai Windsurfin Rendervidiin MCP:n kautta
• Katso lähdekoodi: Vieraile Rendervid GitHub -repositoriossa täydellisen lähdekoodin ja 100+ esimerkkimallipohjan osalta