Déploiement Rendervid - Rendu Navigateur, Node.js, Cloud et Docker

Introduction

Rendervid est conçu pour effectuer le rendu partout où votre flux de travail l’exige. Que vous ayez besoin d’aperçus instantanés dans le navigateur, d’encodage vidéo de qualité professionnelle sur un serveur, ou d’un rendu massivement parallèle sur une infrastructure cloud, Rendervid fournit un package dédié pour chaque environnement. Chaque cible de déploiement partage le même système de modèles et la même bibliothèque de composants , de sorte qu’un modèle qui fonctionne dans le navigateur fonctionne de manière identique sur AWS Lambda ou dans un conteneur Docker.

Ce guide couvre les quatre environnements de déploiement, les options de rendu disponibles dans chacun, et les fonctionnalités avancées comme le flou de mouvement, l’export GIF et l’optimisation des performances. À la fin, vous saurez exactement quel chemin de déploiement convient à votre projet et comment le configurer.

                        +---------------------+
                        |   Modèle JSON       |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |   Navigateur     |  |    Node.js     |  |     Cloud       |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Workers parallèles
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Rendu Navigateur

Le package @rendervid/renderer-browser gère le rendu côté client entièrement dans le navigateur de l’utilisateur. Aucune infrastructure serveur n’est requise. Cela en fait le chemin le plus rapide du modèle à l’aperçu.

Quand utiliser le rendu navigateur

• Aperçus en temps réel pendant l’édition de modèles dans l’éditeur visuel
• Applications web qui doivent générer des ressources vidéo ou image à la volée
• Prototypage de nouveaux modèles avant de s’engager dans le rendu côté serveur
• Exports légers où la sortie MP4, WebM, PNG, JPEG ou WebP est suffisante

Installation

npm install @rendervid/renderer-browser

Comment ça fonctionne

Le rendu navigateur utilise l’API HTML Canvas pour dessiner chaque image du modèle. Le moteur de rendu parcourt chaque scène et calque, applique les animations et les fonctions d’assouplissement, compose le résultat sur un élément canvas et capture chaque image. Pour la sortie vidéo, les images sont encodées en utilisant l’API MediaRecorder intégrée au navigateur (WebM) ou un encodeur MP4 basé sur WebAssembly.

Formats de sortie pris en charge

Exemple de code

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

// Rendu sur un élément canvas pour l'aperçu
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

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

// Export d'une seule image en PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Limitations du rendu navigateur

• Pas d’accès FFmpeg, donc H.265/HEVC et MOV ne sont pas disponibles
• L’export GIF nécessite le moteur de rendu Node.js pour l’optimisation de palette
• La résolution maximale dépend des limites de taille Canvas du navigateur (généralement 4096x4096 ou 8192x8192)
• La vitesse de rendu dépend du CPU et du GPU de l’appareil client

Rendu Node.js

Le package @rendervid/renderer-node fournit un rendu côté serveur avec une intégration FFmpeg complète. Il utilise Playwright ou Puppeteer pour rendre chaque image dans un navigateur sans interface graphique, puis envoie les images à FFmpeg pour un encodage vidéo de qualité professionnelle.

Quand utiliser le rendu Node.js

• Encodage vidéo de production avec prise en charge complète des codecs (H.264, H.265, VP9)
• Traitement par lots de centaines ou milliers de modèles dans des pipelines automatisés
• API REST qui acceptent du JSON de modèle et retournent une vidéo rendue
• Pipelines CI/CD pour la génération automatisée de contenu
• Export GIF avec optimisation de palette et contrôle du tramage

Installation

# Installer le moteur de rendu
npm install @rendervid/renderer-node

# Installer Playwright (inclut les binaires du navigateur)
npx playwright install chromium

# Installer FFmpeg (requis pour l'encodage vidéo)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (via Chocolatey)
choco install ffmpeg

Formats de sortie pris en charge

Préréglages de qualité de rendu

Rendervid fournit quatre préréglages de qualité qui contrôlent les paramètres d’encodage :

Accélération GPU

Le moteur de rendu Node.js prend en charge l’accélération matérielle pour décharger l’encodage sur le GPU. Cela réduit considérablement le temps de rendu pour les modèles complexes avec de nombreux calques, hautes résolutions et effets.

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

L’accélération GPU est disponible sur les systèmes avec du matériel compatible NVIDIA (NVENC), AMD (AMF) ou Intel (Quick Sync). FFmpeg doit être compilé avec la prise en charge de l’encodeur correspondant.

Exemple de code

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: "Titre",
      default: "Votre produit, sublimé",
    },
  },
};

// Rendu avec entrées personnalisées
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Attendre 2s pour le chargement des médias
  inputs: {
    headline: "Soldes d'été — 50% de réduction sur tout",
  },
});

console.log(`Rendu : ${result.outputPath}`);
console.log(`Durée : ${result.duration}s`);
console.log(`Taille du fichier : ${(result.fileSize / 1024 / 1024).toFixed(2)} Mo`);

Traitement par lots

Pour traiter de nombreux modèles en séquence, utilisez l’API de traitement par lots :

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

Pour un véritable rendu parallèle sur une seule machine, consultez la section Rendu local Docker ci-dessous.

Rendu Cloud

Le package @rendervid/cloud-rendering permet un rendu distribué et parallèle sur une infrastructure cloud. Au lieu de rendre les images séquentiellement sur une seule machine, le rendu cloud divise le travail entre de nombreuses fonctions worker qui rendent les images simultanément, puis les fusionne dans la sortie finale.

Quand utiliser le rendu cloud

• Pipelines à haut débit traitant des centaines de vidéos par heure
• Contenu de longue durée où le rendu séquentiel est trop lent
• Charges de travail urgentes où une accélération de 10 à 50 fois est importante
• Mise à l’échelle automatique pour gérer les pics de demande imprévisibles

Architecture

+------------------+
|   Votre appli    |
|  (Coordinateur)  |
+--------+---------+
         |
         | 1. Diviser la vidéo en morceaux d'images
         v
+--------+---------+
| Diviseur de      |
| morceaux         |
+--------+---------+
         |
         |  2. Distribuer les morceaux aux workers
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Chaque worker rend ses images
      v            v           v
+-----+------+----+------+----+----+
|  Images    |  Images   |  Images |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |   Fusionneur    |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Combiner en vidéo finale
             v
     +-------+---------+
     | Stockage objet  |
     |  S3 / Blob / GCS|
     +------------------+
             |
             | 5. Télécharger ou servir
             v
     +-------+---------+
     |  Sortie finale  |
     |   video.mp4     |
     +------------------+

Comment ça fonctionne étape par étape :

1. Le coordinateur analyse le modèle et détermine combien d’images doivent être rendues en fonction de la durée totale et du FPS.
2. Le diviseur de morceaux divise le nombre total d’images en morceaux (par exemple, 30 images par morceau pour une vidéo à 30fps = 1 seconde par morceau).
3. Chaque fonction worker reçoit une affectation de morceau (image de début, image de fin), rend ces images en utilisant le moteur de rendu Node.js, et télécharge le segment rendu vers le stockage d’objets.
4. Le fusionneur télécharge tous les segments et les concatène dans la vidéo finale en utilisant FFmpeg.
5. La sortie finale est stockée dans le stockage d’objets du fournisseur cloud (S3, Azure Blob ou GCS) et optionnellement téléchargée vers le système de fichiers local.

Configuration cloud

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

L’interface de configuration complète :

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

Configuration AWS Lambda

AWS Lambda est la cible de déploiement cloud la plus courante. Chaque fonction worker s’exécute dans une invocation Lambda séparée, permettant un parallélisme massif.

Prérequis :

• Compte AWS avec accès Lambda et S3
• AWS CLI configuré
• Runtime Lambda Node.js 18+

Configuration :

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(`Rendu en ${result.renderTime}ms`);
console.log(`Workers utilisés : ${result.workersUsed}`);
console.log(`Sortie : ${result.outputUrl}`);

Configuration typique AWS Lambda :

• Mémoire : 1024-3008 Mo (plus de mémoire = plus de CPU = rendu plus rapide)
• Délai d’attente : 300 secondes (5 minutes)
• Stockage éphémère : 512 Mo - 10 Go
• Concurrence : 100-1000 (ajuster selon la charge de travail)

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

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

Comparaison des coûts

Tous les fournisseurs cloud offrent des niveaux gratuits qui couvrent des charges de travail de rendu importantes pendant le développement et la production à faible volume.

Benchmarks de performance

Le rendu cloud atteint une accélération de 10 à 50 fois par rapport au rendu séquentiel sur une seule machine. L’accélération exacte dépend du nombre de workers, de la complexité du modèle et de la durée de la vidéo.

Les vidéos plus longues bénéficient davantage du parallélisme car le surcoût de démarrage des workers et de fusion des images est amorti sur plus d’images.

Rendu local Docker

Le rendu basé sur Docker vous offre la même architecture de rendu parallèle que le rendu cloud, mais s’exécutant entièrement sur votre machine locale. Il est totalement gratuit, n’utilise aucun compte cloud et est idéal pour les configurations auto-hébergées, le développement et les équipes qui souhaitent un rendu parallèle sans coûts cloud.

Quand utiliser le rendu Docker

• Rendu parallèle gratuit sans comptes de fournisseurs cloud
• Infrastructure auto-hébergée derrière un pare-feu
• Développement et tests de flux de travail de rendu cloud localement
• Charges de travail petites à moyennes qui bénéficient du parallélisme mais n’ont pas besoin de mise à l’échelle automatique

Installation

# Assurez-vous que Docker est installé et en cours d'exécution
docker --version

# Installer le package de rendu cloud
npm install @rendervid/cloud-rendering

Configuration

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, // Nombre de conteneurs Docker à exécuter en parallèle
  },
});

const result = await renderer.render(template);
console.log(`Rendu en ${result.renderTime}ms en utilisant ${result.workersUsed} workers`);

Choix de workersCount : Définissez cette valeur au nombre de cœurs CPU disponibles sur votre machine. Par exemple, une machine à 8 cœurs fonctionne bien avec 8 workers. Aller au-delà du nombre de cœurs ajoute un surcoût de changement de contexte sans améliorer le débit.

Architecture Docker

+------------------+
|   Coordinateur   |
| (votre processus)|
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Conteneurs Docker
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Volume partagé         |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |   Fusionneur    |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Chaque conteneur Docker est un worker autonome avec Node.js, Playwright et FFmpeg pré-installés. Les workers lisent leurs affectations d’images depuis le volume partagé, rendent les images et écrivent les résultats. Le coordinateur fusionne ensuite tous les segments dans la sortie finale.

Flou de mouvement

Rendervid prend en charge le flou de mouvement grâce au suréchantillonnage temporel. Au lieu de rendre un seul instant par image, le moteur de rendu capture plusieurs sous-images à des moments légèrement différents et les mélange ensemble. Cela produit le flou naturel que les caméras créent lorsque les objets se déplacent pendant une exposition.

Préréglages de qualité

Configuration

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

Comment fonctionne le suréchantillonnage temporel

Image N (sans flou de mouvement) :    Image N (avec flou de mouvement, 5 échantillons) :

  Instant unique :                     5 sous-images mélangées :

  +--------+                           +--------+   +--------+   +--------+
  |    O   |                           |   O    | + |    O   | + |     O  |  ...
  +--------+                           +--------+   +--------+   +--------+
                                                |
                                                v
                                       +--------+
                                       |  ~O~   |  <- Résultat mélangé
                                       +--------+

Chaque sous-image fait avancer la timeline d’animation d’un petit incrément (1/fps divisé par le nombre d’échantillons). Les sous-images sont ensuite mélangées en alpha pour produire l’image finale. Les objets qui se sont déplacés entre les sous-images apparaissent flous le long de leur trajectoire de mouvement, tandis que les éléments stationnaires restent nets.

Considérations de performance

Le flou de mouvement multiplie le temps de rendu proportionnellement au nombre d’échantillons. Une vidéo de 10 secondes à 30fps a 300 images. Avec une qualité high (16 échantillons), le moteur de rendu doit générer 4 800 sous-images au lieu de 300. Utilisez la qualité draft pendant le développement et passez à high ou ultra uniquement pour les exports finaux.

Le rendu cloud et le rendu parallèle Docker fonctionnent bien avec le flou de mouvement car le coût par image est distribué entre les workers. Une augmentation de 16x par image divisée par 16 workers résulte en un temps de rendu total à peu près identique à un rendu sans flou sur une seule machine.

Export GIF

L’export GIF de Rendervid va bien au-delà d’une simple conversion image vers GIF. Il utilise le pipeline de génération de palette de FFmpeg pour produire des GIF animés optimisés et de haute qualité avec tramage configurable, nombre de couleurs et contraintes de taille de fichier.

Comment fonctionne l’optimisation GIF

L’encodage GIF standard utilise une seule palette globale de 256 couleurs, ce qui entraîne souvent des bandes et une mauvaise reproduction des couleurs. Rendervid utilise une approche en deux passes :

1. Passe 1 (palettegen) : Analyser toutes les images pour générer une palette optimale de 256 couleurs qui représente au mieux la gamme de couleurs complète de la vidéo.
2. Passe 2 (paletteuse) : Ré-encoder chaque image en utilisant la palette optimisée avec tramage optionnel pour des dégradés lisses.

Préréglages d’optimisation

Options de tramage

Configuration

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // résolution 480x480
    colors: 256,            // palette de 2-256 couleurs
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-optimiser pour rester sous 5Mo
    fps: 15,                // FPS plus bas = fichier plus petit
  },
});

console.log(`Taille GIF : ${(result.fileSize / 1024).toFixed(0)} Ko`);
console.log(`Taille estimée était : ${result.estimatedSizeKB} Ko`);

Estimation de la taille de fichier et auto-optimisation

Lorsque vous définissez un targetSizeKB, Rendervid estime la taille du fichier de sortie avant le rendu et ajuste automatiquement les paramètres (nombre de couleurs, résolution, FPS) pour atteindre la cible. Ceci est particulièrement utile pour les plateformes avec des limites de taille de fichier (par exemple, limite de 50 Mo de Slack, contrainte typique de 10 Mo pour les emails).

// Auto-optimiser pour tenir dans une contrainte email de 2Mo
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Architecture des packages

Rendervid est organisé comme un monorepo avec 13 packages. Chaque package a une responsabilité ciblée, et ils se composent ensemble pour prendre en charge chaque scénario de déploiement.

@rendervid/
├── core                    Moteur, types, validation, système d'animation
│   ├── Parseur et validateur de modèle (AJV + JSON Schema)
│   ├── Moteur d'animation (40+ préréglages, 30+ fonctions d'assouplissement)
│   ├── Système de calques (texte, image, vidéo, forme, audio, groupe, lottie, personnalisé)
│   └── Gestion des scènes et transitions (17 types)
│
├── renderer-browser        Rendu côté client
│   ├── Rendu d'images basé sur Canvas
│   ├── MediaRecorder pour export WebM
│   └── Encodeur MP4 WebAssembly
│
├── renderer-node           Rendu côté serveur
│   ├── Navigateur sans interface Playwright/Puppeteer
│   ├── Intégration FFmpeg (fluent-ffmpeg)
│   ├── Accélération GPU
│   └── Pipeline d'optimisation GIF
│
├── cloud-rendering         Orchestration multi-cloud
│   ├── Fournisseur AWS Lambda
│   ├── Fournisseur Azure Functions
│   ├── Fournisseur Google Cloud Functions
│   ├── Fournisseur Docker local
│   ├── Diviseur et fusionneur de morceaux
│   └── Adaptateurs de stockage d'objets (S3, Blob, GCS)
│
├── player                  Composant lecteur vidéo/modèle
├── editor                  Éditeur visuel de modèles (état Zustand)
├── components              Composants React pré-construits
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Définitions et exemples de modèles (100+)
├── testing                 Utilitaires de test
│   ├── Matchers personnalisés Vitest
│   ├── Helpers de test snapshot
│   └── Utilitaires de régression visuelle
│
├── editor-playground       Environnement de développement éditeur
├── player-playground       Environnement de développement lecteur
├── mcp                     Serveur Model Context Protocol
└── docs                    Site de documentation VitePress

Comment les packages se connectent

• @rendervid/core est la fondation. Tous les autres packages en dépendent pour les types de modèles, la validation et le système d’animation.
• @rendervid/renderer-browser et @rendervid/renderer-node consomment tous deux les modèles core mais sortent via différents pipelines (Canvas vs FFmpeg).
• @rendervid/cloud-rendering encapsule renderer-node et distribue son travail entre les fonctions cloud ou les conteneurs Docker.
• @rendervid/player et @rendervid/editor sont des packages UI basés sur React pour la lecture et l’édition visuelle. L’éditeur utilise Zustand pour la gestion d’état.
• @rendervid/components fournit les composants React pré-construits (AnimatedLineChart, AuroraBackground, etc.) qui peuvent être utilisés dans les modèles.
• @rendervid/testing fournit des matchers Vitest et des helpers de test snapshot pour valider les modèles.
• mcp est la couche d’intégration IA qui expose les capacités de Rendervid aux agents IA via le Model Context Protocol.

Stack technologique

Rendervid est construit sur un stack TypeScript moderne choisi pour la fiabilité, la performance et l’expérience développeur.

Tests

Rendervid inclut un package de test dédié (@rendervid/testing) qui fournit des matchers Vitest personnalisés, des helpers de test snapshot et des utilitaires de régression visuelle pour valider les modèles.

Matchers personnalisés Vitest

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

describe("Modèle vitrine produit", () => {
  it("devrait être un modèle valide", () => {
    expect(template).toBeValidTemplate();
  });

  it("devrait avoir les bonnes dimensions", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("devrait contenir au moins un calque de texte", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("devrait avoir des animations sur le titre", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Tests snapshot

Les tests snapshot rendent un modèle en image et le comparent à une référence stockée. Tout changement visuel fait échouer le test, facilitant la détection des régressions non intentionnelles.

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

describe("Régression visuelle du modèle", () => {
  it("devrait correspondre au snapshot de référence à l'image 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("devrait correspondre au snapshot de référence au point médian", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Tests de régression visuelle en CI

Intégrez les tests de régression visuelle dans votre pipeline CI/CD pour détecter les changements de rendu avant qu’ils n’atteignent la production :

# .github/workflows/visual-regression.yml
name: Tests de régression visuelle
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

Optimisation des performances

Obtenir les temps de rendu les plus rapides possibles nécessite de comprendre où le temps est dépensé et quels leviers vous pouvez actionner. Voici les stratégies d’optimisation les plus impactantes.

1. Choisir la bonne cible de déploiement

2. Optimiser la complexité du modèle

• Réduire le nombre de calques. Chaque calque est rendu indépendamment. Moins de calques signifie moins d’opérations de dessin par image.
• Utiliser la qualité draft pendant le développement et les tests. Passer à high ou lossless uniquement pour les exports finaux.
• Simplifier les animations pendant l’aperçu. Les séquences complexes de keyframes avec de nombreuses fonctions d’assouplissement ajoutent du calcul par image.

3. Utiliser renderWaitTime judicieusement

L’option renderWaitTime met en pause le rendu pour permettre aux médias externes (images, vidéos, polices) de se charger. Définissez cette valeur au minimum qui garantit que tous les assets sont chargés. Une valeur de 500-2000ms est typique. La définir trop haut gaspille du temps sur chaque image.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 seconde est généralement suffisante
});

4. Tirer parti du rendu parallèle

Pour toute vidéo de plus de 10 secondes, le rendu parallèle (Docker ou cloud) sera plus rapide que le rendu séquentiel. Le point d’équilibre dépend de votre matériel et de votre configuration cloud, mais en règle générale :

• < 10 secondes : Un seul moteur de rendu Node.js suffit
• 10-60 secondes : Docker avec 4-8 workers
• 1-10 minutes : Docker avec 8-16 workers ou cloud
• > 10 minutes : Rendu cloud avec 50+ workers

5. Optimiser la sortie GIF

Les GIF sont intrinsèquement volumineux. Pour garder les tailles de fichiers gérables :

• Réduire le FPS à 10-15. La plupart des GIF sont corrects à des fréquences d’images réduites.
• Réduire la résolution en utilisant les préréglages (social, web, email).
• Limiter les couleurs à 128 ou moins pour les animations simples.
• Utiliser targetSizeKB pour laisser Rendervid auto-optimiser les paramètres.
• Éviter le tramage (none) si la taille du fichier compte plus que la qualité des dégradés.

6. Activer l’accélération GPU

Sur les machines avec des GPU compatibles, l’encodage accéléré par matériel peut réduire les temps de rendu de 2 à 5 fois pour l’étape d’encodage. Ceci est plus impactant pour les sorties haute résolution (4K+) et à haut débit.

7. Pré-charger les assets

Si votre modèle référence des images ou vidéos externes, pré-téléchargez-les vers le stockage local avant le rendu. La latence réseau pendant le rendu est la cause la plus courante de rendus lents ou échoués.

Prochaines étapes

• Commencer avec Rendervid : Visitez l’aperçu Rendervid pour l’installation et le premier rendu
• Apprendre le système de modèles : Lisez la documentation du système de modèles pour la structure de modèle JSON, les variables, scènes, calques et animations
• Explorer les composants : Parcourez la bibliothèque de composants pour les composants React pré-construits comme AnimatedLineChart et AuroraBackground
• Configurer l’intégration IA : Consultez le guide d’intégration IA pour connecter Claude Code, Cursor ou Windsurf à Rendervid via MCP
• Voir le code source : Visitez le dépôt GitHub Rendervid pour le code source complet et 100+ exemples de modèles