Rendervid Dağıtımı - Tarayıcı, Node.js, Bulut ve Docker Render Etme

Giriş

Rendervid, iş akışınızın gerektirdiği her yerde render etmek için tasarlanmıştır. Tarayıcıda anlık önizlemelere, sunucuda üretim kalitesinde video kodlamaya veya bulut altyapısında büyük ölçekli paralel render’a ihtiyacınız olsun, Rendervid her ortam için özel bir paket sağlar. Her dağıtım hedefi aynı şablon sistemini ve bileşen kütüphanesini paylaşır, bu nedenle tarayıcıda çalışan bir şablon AWS Lambda’da veya Docker konteynerinde aynı şekilde çalışır.

Bu kılavuz dört dağıtım ortamını, her birinde mevcut render seçeneklerini ve motion blur, GIF dışa aktarma ve performans optimizasyonu gibi gelişmiş özellikleri kapsar. Sonunda, hangi dağıtım yolunun projenize uygun olduğunu ve nasıl yapılandırılacağını tam olarak bileceksiniz.

                        +---------------------+
                        |   JSON Şablonu      |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |    Tarayıcı      |  |    Node.js     |  |      Bulut      |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Paralel Worker'lar
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Tarayıcı Render

@rendervid/renderer-browser paketi, istemci tarafı render işlemini tamamen kullanıcının tarayıcısında gerçekleştirir. Sunucu altyapısı gerekmez. Bu, şablondan önizlemeye giden en hızlı yoldur.

Tarayıcı Render Ne Zaman Kullanılır

• Görsel editörde şablon düzenlemesi sırasında gerçek zamanlı önizlemeler
• Anında video veya görsel varlıklar oluşturması gereken web uygulamaları
• Sunucu tarafı render’a geçmeden önce yeni şablonları prototipleme
• MP4, WebM, PNG, JPEG veya WebP çıktısının yeterli olduğu hafif dışa aktarmalar

Kurulum

npm install @rendervid/renderer-browser

Nasıl Çalışır

Tarayıcı render, şablonun her karesini çizmek için HTML Canvas API’sini kullanır. Renderer her sahne ve katmanda gezinir, animasyonları ve yumuşatma fonksiyonlarını uygular, sonucu bir canvas elementine kompoze eder ve her kareyi yakalar. Video çıktısı için kareler, tarayıcının yerleşik MediaRecorder API’si (WebM) veya WebAssembly tabanlı MP4 kodlayıcı kullanılarak kodlanır.

Desteklenen Çıktı Formatları

Kod Örneği

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

// Önizleme için bir canvas elementine render et
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

// MP4 olarak dışa aktar
const mp4Blob = await renderer.render(template, {
  format: "mp4",
  quality: "standard",
});

// Tek bir kareyi PNG olarak dışa aktar
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Tarayıcı Render Sınırlamaları

• FFmpeg erişimi yok, bu nedenle H.265/HEVC ve MOV kullanılamaz
• GIF dışa aktarma, palet optimizasyonu için Node.js renderer gerektirir
• Maksimum çözünürlük tarayıcının Canvas boyut sınırlarına bağlıdır (tipik olarak 4096x4096 veya 8192x8192)
• Render hızı istemci cihazının CPU ve GPU’suna bağlıdır

Node.js Render

@rendervid/renderer-node paketi, tam FFmpeg entegrasyonu ile sunucu tarafı render sağlar. Her kareyi başsız (headless) bir tarayıcıda render etmek için Playwright veya Puppeteer kullanır, ardından profesyonel kalitede video kodlama için kareleri FFmpeg’e aktarır.

Node.js Render Ne Zaman Kullanılır

• Tam codec desteği (H.264, H.265, VP9) ile üretim video kodlama
• Otomatik hatlarda yüzlerce veya binlerce şablonu toplu işleme
• Şablon JSON’u kabul eden ve render edilmiş video döndüren REST API’ler
• Otomatik içerik üretimi için CI/CD hatları
• Palet optimizasyonu ve dithering kontrolü ile GIF dışa aktarma

Kurulum

# Renderer'ı yükle
npm install @rendervid/renderer-node

# Playwright'ı yükle (tarayıcı binary'lerini içerir)
npx playwright install chromium

# FFmpeg'i yükle (video kodlama için gerekli)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (Chocolatey ile)
choco install ffmpeg

Desteklenen Çıktı Formatları

Render Kalite Ön Ayarları

Rendervid, kodlama parametrelerini kontrol eden dört kalite ön ayarı sağlar:

GPU Hızlandırma

Node.js renderer, kodlamayı GPU’ya devretmek için donanım hızlandırmayı destekler. Bu, birçok katman, yüksek çözünürlük ve efektlere sahip karmaşık şablonlar için render süresini önemli ölçüde azaltır.

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

GPU hızlandırma, uyumlu NVIDIA (NVENC), AMD (AMF) veya Intel (Quick Sync) donanımına sahip sistemlerde mevcuttur. FFmpeg, ilgili kodlayıcı desteği ile derlenmiş olmalıdır.

Kod Örneği

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: "Başlık",
      default: "Ürününüz, Yüceltilmiş",
    },
  },
};

// Özel girişlerle render et
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Medyanın yüklenmesi için 2 saniye bekle
  inputs: {
    headline: "Yaz İndirimi — Her Şeyde %50 İndirim",
  },
});

console.log(`Render edildi: ${result.outputPath}`);
console.log(`Süre: ${result.duration}s`);
console.log(`Dosya boyutu: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Toplu İşleme

Birçok şablonu sırayla işlemek için toplu API’yi kullanın:

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

Tek bir makinede gerçek paralel render için aşağıdaki Docker Yerel Render bölümüne bakın.

Bulut Render

@rendervid/cloud-rendering paketi, bulut altyapısı üzerinde dağıtık, paralel render sağlar. Kareleri bir makinede sırayla render etmek yerine, bulut render işi aynı anda kare render eden birçok worker fonksiyonuna böler, ardından bunları nihai çıktıda birleştirir.

Bulut Render Ne Zaman Kullanılır

• Saatte yüzlerce video işleyen yüksek verimli hatlar
• Sıralı render’ın çok yavaş olduğu uzun biçimli içerik
• 10-50 kat hızlanmanın önemli olduğu zamana duyarlı iş yükleri
• Öngörülemeyen talep artışlarını karşılamak için otomatik ölçeklendirme

Mimari

+------------------+
|   Uygulamanız    |
|  (Koordinatör)   |
+--------+---------+
         |
         | 1. Videoyu kare parçalarına böl
         v
+--------+---------+
|   Parça Bölücü   |
+--------+---------+
         |
         |  2. Parçaları worker'lara dağıt
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Her worker karelerini render eder
      v            v           v
+-----+------+----+------+----+----+
|  Kareler   |  Kareler  |  Kareler|
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |  Birleştirici   |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Nihai videoda birleştir
             v
     +-------+---------+
     | Nesne Depolama   |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. İndir veya sun
             v
     +-------+---------+
     |  Nihai Çıktı     |
     |   video.mp4      |
     +------------------+

Adım adım nasıl çalışır:

1. Koordinatör şablonu analiz eder ve toplam süre ve FPS’e göre kaç karenin render edilmesi gerektiğini belirler.
2. Parça bölücü toplam kare sayısını parçalara böler (örneğin, 30 fps bir video için parça başına 30 kare = parça başına 1 saniye).
3. Her worker fonksiyonu bir parça ataması (başlangıç karesi, bitiş karesi) alır, bu kareleri Node.js renderer kullanarak render eder ve render edilmiş segmenti nesne depolamaya yükler.
4. Birleştirici tüm segmentleri indirir ve FFmpeg kullanarak bunları nihai videoda birleştirir.
5. Nihai çıktı, bulut sağlayıcısının nesne depolamasında (S3, Azure Blob veya GCS) saklanır ve isteğe bağlı olarak yerel dosya sistemine indirilir.

Bulut Yapılandırması

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

Tam yapılandırma arayüzü:

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 Kurulumu

AWS Lambda en yaygın bulut dağıtım hedefidir. Her worker fonksiyonu ayrı bir Lambda çağrısında çalışır ve büyük ölçekli paralellik sağlar.

Ön koşullar:

• Lambda ve S3 erişimine sahip AWS hesabı
• AWS CLI yapılandırılmış
• Node.js 18+ Lambda runtime

Yapılandırma:

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(`${result.renderTime}ms içinde render edildi`);
console.log(`Kullanılan worker sayısı: ${result.workersUsed}`);
console.log(`Çıktı: ${result.outputUrl}`);

Tipik AWS Lambda yapılandırması:

• Bellek: 1024-3008 MB (daha fazla bellek = daha fazla CPU = daha hızlı render)
• Zaman aşımı: 300 saniye (5 dakika)
• Geçici depolama: 512 MB - 10 GB
• Eşzamanlılık: 100-1000 (iş yüküne göre ayarlayın)

Azure Functions Kurulumu

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 Kurulumu

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

Maliyet Karşılaştırması

Tüm bulut sağlayıcılar, geliştirme ve düşük hacimli üretim sırasında önemli render iş yüklerini kapsayan ücretsiz katmanlar sunar.

Performans Kıyaslamaları

Bulut render, tek makineli sıralı render’a kıyasla 10-50 kat hızlanma sağlar. Tam hızlanma, worker sayısına, şablon karmaşıklığına ve video süresine bağlıdır.

Daha uzun videolar paralellikten daha fazla faydalanır çünkü worker başlatma ve kare birleştirme ek yükü daha fazla kareye yayılır.

Docker Yerel Render

Docker tabanlı render, bulut render ile aynı paralel render mimarisini sunar, ancak tamamen yerel makinenizde çalışır. Tamamen ücretsizdir, bulut hesabı kullanmaz ve kendi sunuculu kurulumlar, geliştirme ve bulut maliyetleri olmadan paralel render isteyen ekipler için idealdir.

Docker Render Ne Zaman Kullanılır

• Bulut sağlayıcı hesapları olmadan ücretsiz paralel render
• Güvenlik duvarı arkasında kendi sunuculu altyapı
• Bulut render iş akışlarının yerel olarak geliştirilmesi ve test edilmesi
• Paralellikten yararlanan ancak otomatik ölçeklendirmeye ihtiyaç duymayan küçük ve orta ölçekli iş yükleri

Kurulum

# Docker'ın yüklü ve çalışır durumda olduğundan emin olun
docker --version

# Bulut render paketini yükleyin
npm install @rendervid/cloud-rendering

Yapılandırma

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, // Paralel olarak çalıştırılacak Docker konteyner sayısı
  },
});

const result = await renderer.render(template);
console.log(`${result.workersUsed} worker kullanılarak ${result.renderTime}ms içinde render edildi`);

workersCount Seçimi: Bunu makinenizdeki mevcut CPU çekirdek sayısına ayarlayın. Örneğin, 8 çekirdekli bir makine 8 worker ile iyi çalışır. Çekirdek sayınızın ötesine geçmek, verimi artırmadan bağlam değiştirmeden kaynaklanan ek yük ekler.

Docker Mimarisi

+------------------+
|   Koordinatör    |
|  (süreciniz)     |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Docker konteynerleri
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Paylaşılan Volume      |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |  Birleştirici   |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Her Docker konteyneri, Node.js, Playwright ve FFmpeg önceden yüklenmiş bağımsız bir worker’dır. Worker’lar kare atamalarını paylaşılan volume’den okur, kareleri render eder ve sonuçları geri yazar. Koordinatör daha sonra tüm segmentleri nihai çıktıda birleştirir.

Motion Blur

Rendervid, temporal supersampling yoluyla motion blur destekler. Kare başına tek bir anı render etmek yerine, renderer zamanda hafifçe farklı noktalarda birden fazla alt kare yakalar ve bunları birleştirir. Bu, kameralar nesneler hareket ederken pozlama sırasında oluşturdukları doğal bulanıklığı üretir.

Kalite Ön Ayarları

Yapılandırma

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // Kare başına 16 örnek
  },
});

Temporal Supersampling Nasıl Çalışır

Kare N (motion blur yok):          Kare N (motion blur ile, 5 örnek):

  Tek an:                            5 alt kare birleştirilmiş:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Birleştirilmiş sonuç
                                     +--------+

Her alt kare, animasyon zaman çizelgesini küçük bir artışla ilerletir (1/fps, örnek sayısına bölünür). Alt kareler daha sonra nihai kareyi üretmek için alfa karıştırılır. Alt kareler arasında hareket eden nesneler hareket yolları boyunca bulanık görünürken, sabit elemanlar keskin kalır.

Performans Değerlendirmeleri

Motion blur, render süresini örnek sayısıyla orantılı olarak çarpar. 30 fps’de 10 saniyelik bir videoda 300 kare vardır. high kalite (16 örnek) ile renderer, 300 yerine 4.800 alt kare üretmelidir. Geliştirme sırasında draft kalitesini kullanın ve yalnızca nihai dışa aktarmalar için high veya ultra‘ya geçin.

Bulut render ve Docker paralel render, motion blur ile iyi çalışır çünkü kare başına maliyet worker’lar arasında dağıtılır. Worker’lar arasında bölünmüş kare başına 16 kat artış, bir makinede blur olmayan bir render ile kabaca aynı toplam render süresine yol açar.

GIF Dışa Aktarma

Rendervid’in GIF dışa aktarması, basit bir kareden GIF’e dönüşümün çok ötesine geçer. Yapılandırılabilir dithering, renk sayıları ve dosya boyutu kısıtlamaları ile optimize edilmiş, yüksek kaliteli animasyonlu GIF’ler üretmek için FFmpeg’in palet oluşturma hattını kullanır.

GIF Optimizasyonu Nasıl Çalışır

Standart GIF kodlaması, genellikle bantlama ve zayıf renk üretimine yol açan 256 renkten oluşan tek bir global palet kullanır. Rendervid iki geçişli bir yaklaşım kullanır:

1. Geçiş 1 (palettegen): Videonun tam renk aralığını en iyi temsil eden optimal 256 renkli bir palet oluşturmak için tüm kareleri analiz edin.
2. Geçiş 2 (paletteuse): Yumuşak geçişler için isteğe bağlı dithering ile optimize edilmiş paleti kullanarak her kareyi yeniden kodlayın.

Optimizasyon Ön Ayarları

Dithering Seçenekleri

Yapılandırma

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // 480x480 çözünürlük
    colors: 256,            // 2-256 renk paleti
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // 5MB altında kalmak için otomatik optimize et
    fps: 15,                // Daha düşük FPS = daha küçük dosya
  },
});

console.log(`GIF boyutu: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Tahmini boyut: ${result.estimatedSizeKB} KB`);

Dosya Boyutu Tahmini ve Otomatik Optimizasyon

Bir targetSizeKB ayarladığınızda, Rendervid render etmeden önce çıktı dosya boyutunu tahmin eder ve hedefe ulaşmak için parametreleri (renk sayısı, çözünürlük, FPS) otomatik olarak ayarlar. Bu, özellikle dosya boyutu sınırları olan platformlar için kullanışlıdır (örneğin, Slack’in 50 MB sınırı, e-postanın tipik 10 MB kısıtlaması).

// 2MB e-posta kısıtlamasına sığdırmak için otomatik optimize et
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Paket Mimarisi

Rendervid, 13 paketten oluşan bir monorepo olarak organize edilmiştir. Her paket odaklanmış bir sorumluluğa sahiptir ve her dağıtım senaryosunu desteklemek için bir araya gelirler.

@rendervid/
├── core                    Motor, tipler, doğrulama, animasyon sistemi
│   ├── Şablon ayrıştırıcı ve doğrulayıcı (AJV + JSON Schema)
│   ├── Animasyon motoru (40+ ön ayar, 30+ yumuşatma fonksiyonu)
│   ├── Katman sistemi (text, image, video, shape, audio, group, lottie, custom)
│   └── Sahne yönetimi ve geçişler (17 tip)
│
├── renderer-browser        İstemci tarafı render
│   ├── Canvas tabanlı kare render
│   ├── WebM dışa aktarma için MediaRecorder
│   └── WebAssembly MP4 kodlayıcı
│
├── renderer-node           Sunucu tarafı render
│   ├── Playwright/Puppeteer başsız tarayıcı
│   ├── FFmpeg entegrasyonu (fluent-ffmpeg)
│   ├── GPU hızlandırma
│   └── GIF optimizasyon hattı
│
├── cloud-rendering         Çoklu bulut orkestrasyon
│   ├── AWS Lambda sağlayıcı
│   ├── Azure Functions sağlayıcı
│   ├── Google Cloud Functions sağlayıcı
│   ├── Docker yerel sağlayıcı
│   ├── Parça bölücü ve birleştirici
│   └── Nesne depolama adaptörleri (S3, Blob, GCS)
│
├── player                  Video/şablon oynatıcı bileşeni
├── editor                  Görsel şablon editörü (Zustand state)
├── components              Önceden oluşturulmuş React bileşenleri
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Şablon tanımları ve örnekler (100+)
├── testing                 Test yardımcı araçları
│   ├── Vitest özel eşleştiriciler
│   ├── Snapshot test yardımcıları
│   └── Görsel regresyon yardımcı araçları
│
├── editor-playground       Editör geliştirme ortamı
├── player-playground       Oynatıcı geliştirme ortamı
├── mcp                     Model Context Protocol sunucusu
└── docs                    VitePress dokümantasyon sitesi

Paketler Nasıl Bağlanır

• @rendervid/core temeldir. Diğer her paket şablon tipleri, doğrulama ve animasyon sistemi için ona bağlıdır.
• @rendervid/renderer-browser ve @rendervid/renderer-node her ikisi de core şablonları tüketir ancak farklı hatlar (Canvas vs. FFmpeg) üzerinden çıktı verir.
• @rendervid/cloud-rendering, renderer-node‘u sarar ve işini bulut fonksiyonları veya Docker konteynerleri arasında dağıtır.
• @rendervid/player ve @rendervid/editor, oynatma ve görsel düzenleme için React tabanlı UI paketleridir. Editör, state yönetimi için Zustand kullanır.
• @rendervid/components, şablonlarda kullanılabilen önceden oluşturulmuş React bileşenlerini (AnimatedLineChart, AuroraBackground, vb.) sağlar.
• @rendervid/testing, şablonları doğrulamak için Vitest eşleştiricileri ve snapshot test yardımcıları sağlar.
• mcp, Model Context Protocol aracılığıyla Rendervid’in yeteneklerini AI ajanlarına açan AI entegrasyon katmanıdır.

Teknoloji Yığını

Rendervid, güvenilirlik, performans ve geliştirici deneyimi için seçilmiş modern bir TypeScript yığını üzerine inşa edilmiştir.

Test

Rendervid, şablonları doğrulamak için özel Vitest eşleştiricileri, snapshot test yardımcıları ve görsel regresyon yardımcı araçları sağlayan özel bir test paketi (@rendervid/testing) içerir.

Vitest Özel Eşleştiriciler

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

describe("Ürün Vitrin Şablonu", () => {
  it("geçerli bir şablon olmalı", () => {
    expect(template).toBeValidTemplate();
  });

  it("doğru boyutlara sahip olmalı", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("en az bir metin katmanı içermeli", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("başlıkta animasyonlar olmalı", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Test

Snapshot test, bir şablonu görüntüye render eder ve saklanan bir referansla karşılaştırır. Herhangi bir görsel değişiklik testin başarısız olmasına neden olur, bu da istenmeyen regresyonları yakalamanı kolaylaştırır.

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

describe("Şablon Görsel Regresyon", () => {
  it("kare 0'da referans snapshot ile eşleşmeli", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("orta noktada referans snapshot ile eşleşmeli", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

CI’da Görsel Regresyon Test

Render değişikliklerini üretime ulaşmadan önce yakalamak için görsel regresyon testlerini CI/CD hattınıza entegre edin:

# .github/workflows/visual-regression.yml
name: Görsel Regresyon Testleri
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

Performans Optimizasyonu

Mümkün olan en hızlı render sürelerini elde etmek, zamanın nerede harcandığını ve hangi kolları çekebileceğinizi anlamayı gerektirir. İşte en etkili optimizasyon stratejileri.

1. Doğru Dağıtım Hedefini Seçin

2. Şablon Karmaşıklığını Optimize Edin

• Katman sayısını azaltın. Her katman bağımsız olarak render edilir. Daha az katman, kare başına daha az çizim işlemi anlamına gelir.
• Geliştirme ve test sırasında draft kalitesini kullanın. Yalnızca nihai dışa aktarmalar için high veya lossless‘e geçin.
• Önizleme sırasında animasyonları basitleştirin. Birçok yumuşatma fonksiyonuna sahip karmaşık keyframe dizileri, kare başına hesaplama ekler.

3. renderWaitTime‘ı Akıllıca Kullanın

renderWaitTime seçeneği, harici medyanın (görseller, videolar, fontlar) yüklenmesine izin vermek için render işlemini duraklatır. Bunu, tüm varlıkların yüklendiğinden emin olan minimum değere ayarlayın. 500-2000ms değeri tipiktir. Çok yüksek ayarlamak her karede zaman kaybeder.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 saniye genellikle yeterlidir
});

4. Paralel Render’dan Yararlanın

10 saniyeden uzun herhangi bir video için paralel render (Docker veya bulut), sıralı render’dan daha hızlı olacaktır. Başa baş noktası donanımınıza ve bulut yapılandırmanıza bağlıdır, ancak genel bir kural olarak:

• < 10 saniye: Tek Node.js renderer iyidir
• 10-60 saniye: 4-8 worker ile Docker
• 1-10 dakika: 8-16 worker ile Docker veya bulut
• > 10 dakika: 50+ worker ile bulut render

5. GIF Çıktısını Optimize Edin

GIF’ler doğası gereği büyüktür. Dosya boyutlarını yönetilebilir tutmak için:

• FPS’i 10-15’e düşürün. Çoğu GIF azaltılmış kare hızlarında iyi görünür.
• Ön ayarları (social, web, email) kullanarak çözünürlüğü azaltın.
• Basit animasyonlar için renkleri 128 veya daha aza sınırlayın.
• Rendervid’in parametreleri otomatik optimize etmesine izin vermek için targetSizeKB kullanın.
• Dosya boyutu geçiş kalitesinden daha önemliyse dithering’den kaçının (none).

6. GPU Hızlandırmayı Etkinleştirin

Uyumlu GPU’lara sahip makinelerde, donanım hızlandırmalı kodlama, kodlama adımı için render sürelerini 2-5 kat azaltabilir. Bu, yüksek çözünürlüklü (4K+) ve yüksek bitrate çıktılar için en etkilidir.

7. Varlıkları Önceden Yükleyin

Şablonunuz harici görsellere veya videolara referans veriyorsa, render etmeden önce bunları yerel depolamaya önceden indirin. Render sırasındaki ağ gecikmesi, yavaş veya başarısız render’ların en yaygın nedenidir.

Sonraki Adımlar

• Rendervid’e başlayın: Kurulum ve ilk render için Rendervid genel bakış sayfasını ziyaret edin
• Şablon sistemini öğrenin: JSON şablon yapısı, değişkenler, sahneler, katmanlar ve animasyonlar için Şablon Sistemi dokümantasyonunu okuyun
• Bileşenleri keşfedin: AnimatedLineChart ve AuroraBackground gibi önceden oluşturulmuş React bileşenleri için Bileşen Kütüphanesine göz atın
• AI entegrasyonunu kurun: MCP aracılığıyla Claude Code, Cursor veya Windsurf’ü Rendervid’e bağlamak için AI Entegrasyon kılavuzuna bakın
• Kaynak kodunu görüntüleyin: Tam kaynak kodu ve 100+ örnek şablon için Rendervid GitHub deposunu ziyaret edin