Triển khai Rendervid - Render trên Trình duyệt, Node.js, Cloud & Docker

Giới thiệu

Rendervid được thiết kế để render ở bất kỳ đâu mà quy trình làm việc của bạn yêu cầu. Cho dù bạn cần xem trước ngay lập tức trên trình duyệt, mã hóa video chất lượng sản xuất trên máy chủ, hoặc render song song quy mô lớn trên hạ tầng cloud, Rendervid cung cấp một package chuyên dụng cho từng môi trường. Mọi mục tiêu triển khai đều chia sẻ cùng hệ thống template và thư viện component , do đó một template hoạt động trên trình duyệt sẽ hoạt động tương tự trên AWS Lambda hoặc trong Docker container.

Hướng dẫn này bao gồm tất cả bốn môi trường triển khai, các tùy chọn render có sẵn trong mỗi môi trường, và các tính năng nâng cao như motion blur, xuất GIF, và tối ưu hóa hiệu suất. Khi kết thúc, bạn sẽ biết chính xác đường triển khai nào phù hợp với dự án của bạn và cách cấu hình nó.

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

Render trên Trình duyệt

Package @rendervid/renderer-browser xử lý render phía client hoàn toàn trong trình duyệt của người dùng. Không cần hạ tầng máy chủ. Điều này làm cho nó trở thành con đường nhanh nhất từ template đến xem trước.

Khi nào sử dụng Render trên Trình duyệt

• Xem trước thời gian thực trong quá trình chỉnh sửa template trong trình chỉnh sửa trực quan
• Ứng dụng web cần tạo tài sản video hoặc hình ảnh một cách nhanh chóng
• Tạo nguyên mẫu template mới trước khi cam kết render phía máy chủ
• Xuất nhẹ khi đầu ra MP4, WebM, PNG, JPEG, hoặc WebP là đủ

Cài đặt

npm install @rendervid/renderer-browser

Cách hoạt động

Render trên trình duyệt sử dụng HTML Canvas API để vẽ từng khung hình của template. Renderer duyệt qua mọi scene và layer, áp dụng animation và easing function, tổng hợp kết quả lên canvas element, và chụp từng khung hình. Đối với đầu ra video, các khung hình được mã hóa bằng MediaRecorder API tích hợp sẵn của trình duyệt (WebM) hoặc bộ mã hóa MP4 dựa trên WebAssembly.

Các định dạng đầu ra được hỗ trợ

Ví dụ 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: "Hello from the Browser",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Render lên canvas element để xem trước
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

// Xuất dưới dạng MP4
const mp4Blob = await renderer.render(template, {
  format: "mp4",
  quality: "standard",
});

// Xuất một khung hình đơn dưới dạng PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Giới hạn của Render trên Trình duyệt

• Không có quyền truy cập FFmpeg, do đó H.265/HEVC và MOV không khả dụng
• Xuất GIF yêu cầu renderer Node.js để tối ưu hóa bảng màu
• Độ phân giải tối đa phụ thuộc vào giới hạn kích thước Canvas của trình duyệt (thường là 4096x4096 hoặc 8192x8192)
• Tốc độ render phụ thuộc vào CPU và GPU của thiết bị client

Render trên Node.js

Package @rendervid/renderer-node cung cấp render phía máy chủ với tích hợp FFmpeg đầy đủ. Nó sử dụng Playwright hoặc Puppeteer để render từng khung hình trong trình duyệt headless, sau đó chuyển các khung hình đến FFmpeg để mã hóa video chất lượng chuyên nghiệp.

Khi nào sử dụng Render trên Node.js

• Mã hóa video sản xuất với hỗ trợ codec đầy đủ (H.264, H.265, VP9)
• Xử lý hàng loạt hàng trăm hoặc hàng nghìn template trong các quy trình tự động
• REST API chấp nhận template JSON và trả về video đã render
• Quy trình CI/CD cho tạo nội dung tự động
• Xuất GIF với tối ưu hóa bảng màu và kiểm soát dithering

Cài đặt

# Cài đặt renderer
npm install @rendervid/renderer-node

# Cài đặt Playwright (bao gồm các binary trình duyệt)
npx playwright install chromium

# Cài đặt FFmpeg (bắt buộc cho mã hóa video)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (qua Chocolatey)
choco install ffmpeg

Các định dạng đầu ra được hỗ trợ

Preset chất lượng Render

Rendervid cung cấp bốn preset chất lượng kiểm soát các tham số mã hóa:

Tăng tốc GPU

Renderer Node.js hỗ trợ tăng tốc phần cứng để giảm tải mã hóa cho GPU. Điều này giảm đáng kể thời gian render cho các template phức tạp với nhiều lớp, độ phân giải cao và hiệu ứng.

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

Tăng tốc GPU có sẵn trên các hệ thống với phần cứng NVIDIA (NVENC), AMD (AMF), hoặc Intel (Quick Sync) tương thích. FFmpeg phải được biên dịch với hỗ trợ bộ mã hóa tương ứng.

Ví dụ 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: "Headline",
      default: "Your Product, Elevated",
    },
  },
};

// Render với input tùy chỉnh
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Đợi 2s để media tải
  inputs: {
    headline: "Summer Sale — 50% Off Everything",
  },
});

console.log(`Đã render: ${result.outputPath}`);
console.log(`Thời lượng: ${result.duration}s`);
console.log(`Kích thước file: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Xử lý hàng loạt

Để xử lý nhiều template theo trình tự, sử dụng batch API:

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

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alice" }, output: "alice.mp4" },
  { template: socialTemplate, inputs: { name: "Bob" }, output: "bob.mp4" },
  { template: socialTemplate, inputs: { name: "Carol" }, output: "carol.mp4" },
];

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

Để render song song thực sự trên một máy đơn, xem phần Render cục bộ Docker bên dưới.

Render trên Cloud

Package @rendervid/cloud-rendering cho phép render phân tán, song song trên hạ tầng cloud. Thay vì render các khung hình tuần tự trên một máy, render trên cloud chia công việc cho nhiều worker function render các khung hình đồng thời, sau đó hợp nhất chúng thành đầu ra cuối cùng.

Khi nào sử dụng Render trên Cloud

• Quy trình thông lượng cao xử lý hàng trăm video mỗi giờ
• Nội dung dài khi render tuần tự quá chậm
• Khối lượng công việc nhạy cảm về thời gian khi tăng tốc 10-50 lần quan trọng
• Tự động mở rộng để xử lý các đợt tăng đột ngột nhu cầu không thể đoán trước

Kiến trúc

+------------------+
|   Your App       |
|  (Coordinator)   |
+--------+---------+
         |
         | 1. Chia video thành các khối khung hình
         v
+--------+---------+
|   Chunk Splitter |
+--------+---------+
         |
         |  2. Phân phối các khối cho worker
         v
+--------+---+---+---+---+--------+
|  Worker 1  | Worker 2  | Worker N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Mỗi worker render các khung hình của nó
      v            v           v
+-----+------+----+------+----+----+
|  Frames    |  Frames   |  Frames |
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |     Merger      |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Kết hợp thành video cuối cùng
             v
     +-------+---------+
     |  Object Storage  |
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Tải xuống hoặc phục vụ
             v
     +-------+---------+
     |   Final Output   |
     |   video.mp4      |
     +------------------+

Cách hoạt động từng bước:

1. Coordinator phân tích template và xác định có bao nhiêu khung hình cần được render dựa trên tổng thời lượng và FPS.
2. Chunk splitter chia tổng số khung hình thành các khối (ví dụ: 30 khung hình mỗi khối cho video 30fps = 1 giây mỗi khối).
3. Mỗi worker function nhận một nhiệm vụ khối (khung hình bắt đầu, khung hình kết thúc), render các khung hình đó bằng renderer Node.js, và tải đoạn đã render lên object storage.
4. Merger tải xuống tất cả các đoạn và nối chúng thành video cuối cùng bằng FFmpeg.
5. Đầu ra cuối cùng được lưu trữ trong object storage của nhà cung cấp cloud (S3, Azure Blob, hoặc GCS) và tùy chọn tải xuống hệ thống file cục bộ.

Cấu hình 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",
});

Interface cấu hình đầy đủ:

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

Thiết lập AWS Lambda

AWS Lambda là mục tiêu triển khai cloud phổ biến nhất. Mỗi worker function chạy trong một Lambda invocation riêng biệt, cho phép song song hóa quy mô lớn.

Yêu cầu trước:

• Tài khoản AWS với quyền truy cập Lambda và S3
• AWS CLI đã cấu hình
• Node.js 18+ Lambda runtime

Cấu hình:

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 trong ${result.renderTime}ms`);
console.log(`Worker đã sử dụng: ${result.workersUsed}`);
console.log(`Đầu ra: ${result.outputUrl}`);

Cấu hình AWS Lambda điển hình:

• Bộ nhớ: 1024-3008 MB (bộ nhớ nhiều hơn = CPU nhiều hơn = render nhanh hơn)
• Timeout: 300 giây (5 phút)
• Ephemeral storage: 512 MB - 10 GB
• Concurrency: 100-1000 (điều chỉnh dựa trên khối lượng công việc)

Thiết lập 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);

Thiết lập 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);

So sánh Chi phí

Tất cả các nhà cung cấp cloud đều cung cấp các gói miễn phí bao gồm khối lượng công việc render đáng kể trong quá trình phát triển và sản xuất khối lượng thấp.

Benchmark Hiệu suất

Render trên cloud đạt được tăng tốc 10-50 lần so với render tuần tự trên một máy đơn. Mức tăng tốc chính xác phụ thuộc vào số lượng worker, độ phức tạp của template và thời lượng video.

Video dài hơn hưởng lợi nhiều hơn từ song song hóa vì chi phí khởi động worker và hợp nhất khung hình được phân bổ trên nhiều khung hình hơn.

Render cục bộ Docker

Render dựa trên Docker cung cấp cho bạn cùng kiến trúc render song song như render trên cloud, nhưng chạy hoàn toàn trên máy cục bộ của bạn. Nó hoàn toàn miễn phí, không sử dụng tài khoản cloud, và lý tưởng cho các thiết lập tự lưu trữ, phát triển, và các nhóm muốn render song song mà không có chi phí cloud.

Khi nào sử dụng Render Docker

• Render song song miễn phí mà không cần tài khoản nhà cung cấp cloud
• Hạ tầng tự lưu trữ đằng sau tường lửa
• Phát triển và kiểm tra quy trình render trên cloud cục bộ
• Khối lượng công việc nhỏ đến trung bình hưởng lợi từ song song hóa nhưng không cần tự động mở rộng

Cài đặt

# Đảm bảo Docker đã cài đặt và đang chạy
docker --version

# Cài đặt package cloud rendering
npm install @rendervid/cloud-rendering

Cấu hình

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, // Số lượng Docker container chạy song song
  },
});

const result = await renderer.render(template);
console.log(`Đã render trong ${result.renderTime}ms sử dụng ${result.workersUsed} worker`);

Chọn workersCount: Đặt giá trị này bằng số lượng lõi CPU có sẵn trên máy của bạn. Ví dụ, một máy 8 lõi hoạt động tốt với 8 worker. Vượt quá số lượng lõi của bạn sẽ thêm chi phí từ chuyển đổi ngữ cảnh mà không cải thiện thông lượng.

Kiến trúc Docker

+------------------+
|   Coordinator    |
|  (your process)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Docker containers
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Shared Volume          |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |     Merger      |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Mỗi Docker container là một worker độc lập với Node.js, Playwright, và FFmpeg được cài đặt sẵn. Worker đọc các nhiệm vụ khung hình của họ từ volume dùng chung, render các khung hình, và ghi kết quả trở lại. Coordinator sau đó hợp nhất tất cả các đoạn thành đầu ra cuối cùng.

Motion Blur

Rendervid hỗ trợ motion blur thông qua temporal supersampling. Thay vì render một khoảnh khắc đơn cho mỗi khung hình, renderer chụp nhiều sub-frame tại các điểm thời gian hơi khác nhau và pha trộn chúng lại với nhau. Điều này tạo ra hiệu ứng mờ tự nhiên mà máy ảnh tạo ra khi các đối tượng di chuyển trong quá trình phơi sáng.

Preset Chất lượng

Cấu hình

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // 16 mẫu mỗi khung hình
  },
});

Cách Temporal Supersampling hoạt động

Khung hình N (không có motion blur):          Khung hình N (có motion blur, 5 mẫu):

  Khoảnh khắc đơn:                    5 sub-frame được pha trộn:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Kết quả đã pha trộn
                                     +--------+

Mỗi sub-frame tiến timeline animation một khoảng nhỏ (1/fps chia cho số lượng mẫu). Các sub-frame sau đó được alpha-blend để tạo ra khung hình cuối cùng. Các đối tượng di chuyển giữa các sub-frame xuất hiện mờ dọc theo đường đi chuyển động của chúng, trong khi các phần tử tĩnh vẫn sắc nét.

Cân nhắc Hiệu suất

Motion blur nhân thời gian render tỷ lệ thuận với số lượng mẫu. Một video 10 giây ở 30fps có 300 khung hình. Với chất lượng high (16 mẫu), renderer phải tạo 4,800 sub-frame thay vì 300. Sử dụng chất lượng draft trong quá trình phát triển và chuyển sang high hoặc ultra chỉ cho xuất cuối cùng.

Render trên cloud và render song song Docker hoạt động tốt với motion blur vì chi phí mỗi khung hình được phân phối trên các worker. Tăng 16 lần mỗi khung hình chia cho 16 worker dẫn đến tổng thời gian render xấp xỉ như render không có blur trên một máy.

Xuất GIF

Xuất GIF của Rendervid vượt xa việc chuyển đổi khung hình thành GIF đơn giản. Nó sử dụng quy trình tạo bảng màu của FFmpeg để tạo ra GIF hoạt hình được tối ưu hóa, chất lượng cao với dithering, số lượng màu và ràng buộc kích thước file có thể cấu hình.

Cách Tối ưu hóa GIF hoạt động

Mã hóa GIF tiêu chuẩn sử dụng một bảng màu toàn cục đơn của 256 màu, thường dẫn đến banding và tái tạo màu kém. Rendervid sử dụng phương pháp hai lượt:

1. Lượt 1 (palettegen): Phân tích tất cả các khung hình để tạo bảng màu 256 màu tối ưu đại diện tốt nhất cho phạm vi màu đầy đủ của video.
2. Lượt 2 (paletteuse): Mã hóa lại mỗi khung hình bằng bảng màu được tối ưu hóa với dithering tùy chọn cho gradient mượt mà.

Preset Tối ưu hóa

Tùy chọn Dithering

Cấu hình

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // Độ phân giải 480x480
    colors: 256,            // Bảng màu 2-256
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Tự động tối ưu hóa để giữ dưới 5MB
    fps: 15,                // FPS thấp hơn = file nhỏ hơn
  },
});

console.log(`Kích thước GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Kích thước ước tính là: ${result.estimatedSizeKB} KB`);

Ước tính Kích thước File và Tự động Tối ưu hóa

Khi bạn đặt targetSizeKB, Rendervid ước tính kích thước file đầu ra trước khi render và tự động điều chỉnh các tham số (số lượng màu, độ phân giải, FPS) để đáp ứng mục tiêu. Điều này đặc biệt hữu ích cho các nền tảng có giới hạn kích thước file (ví dụ: giới hạn 50 MB của Slack, ràng buộc 10 MB điển hình của email).

// Tự động tối ưu hóa để phù hợp với ràng buộc email 2MB
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Kiến trúc Package

Rendervid được tổ chức như một monorepo với 13 package. Mỗi package có một trách nhiệm tập trung, và chúng kết hợp với nhau để hỗ trợ mọi kịch bản triển khai.

@rendervid/
├── core                    Engine, types, validation, animation system
│   ├── Template parser và validator (AJV + JSON Schema)
│   ├── Animation engine (40+ preset, 30+ easing function)
│   ├── Layer system (text, image, video, shape, audio, group, lottie, custom)
│   └── Scene management và transitions (17 loại)
│
├── renderer-browser        Render phía client
│   ├── Render khung hình dựa trên Canvas
│   ├── MediaRecorder cho xuất WebM
│   └── Bộ mã hóa MP4 WebAssembly
│
├── renderer-node           Render phía máy chủ
│   ├── Trình duyệt headless Playwright/Puppeteer
│   ├── Tích hợp FFmpeg (fluent-ffmpeg)
│   ├── Tăng tốc GPU
│   └── Quy trình tối ưu hóa GIF
│
├── cloud-rendering         Điều phối đa cloud
│   ├── AWS Lambda provider
│   ├── Azure Functions provider
│   ├── Google Cloud Functions provider
│   ├── Docker local provider
│   ├── Chunk splitter và merger
│   └── Object storage adapter (S3, Blob, GCS)
│
├── player                  Component player video/template
├── editor                  Trình chỉnh sửa template trực quan (Zustand state)
├── components              Component React được xây dựng sẵn
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Định nghĩa template và ví dụ (100+)
├── testing                 Tiện ích kiểm tra
│   ├── Vitest custom matcher
│   ├── Snapshot testing helper
│   └── Visual regression utility
│
├── editor-playground       Môi trường phát triển editor
├── player-playground       Môi trường phát triển player
├── mcp                     Model Context Protocol server
└── docs                    Trang tài liệu VitePress

Cách các Package kết nối

• @rendervid/core là nền tảng. Mọi package khác phụ thuộc vào nó cho các loại template, validation và hệ thống animation.
• @rendervid/renderer-browser và @rendervid/renderer-node đều sử dụng template core nhưng xuất ra thông qua các quy trình khác nhau (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering bao bọc renderer-node và phân phối công việc của nó trên các cloud function hoặc Docker container.
• @rendervid/player và @rendervid/editor là các package UI dựa trên React cho phát lại và chỉnh sửa trực quan. Editor sử dụng Zustand cho quản lý state.
• @rendervid/components cung cấp các component React được xây dựng sẵn (AnimatedLineChart, AuroraBackground, v.v.) có thể được sử dụng trong template.
• @rendervid/testing cung cấp Vitest matcher và snapshot testing helper để xác thực template.
• mcp là lớp tích hợp AI mở ra khả năng của Rendervid cho các AI agent thông qua Model Context Protocol.

Technology Stack

Rendervid được xây dựng trên một stack TypeScript hiện đại được chọn cho độ tin cậy, hiệu suất và trải nghiệm nhà phát triển.

Testing

Rendervid bao gồm một package testing chuyên dụng (@rendervid/testing) cung cấp Vitest matcher tùy chỉnh, snapshot testing helper, và visual regression utility để xác thực template.

Vitest Custom Matcher

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

describe("Product Showcase Template", () => {
  it("nên là một template hợp lệ", () => {
    expect(template).toBeValidTemplate();
  });

  it("nên có kích thước chính xác", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("nên chứa ít nhất một text layer", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("nên có animation trên headline", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Snapshot Testing

Snapshot testing render một template thành hình ảnh và so sánh nó với tham chiếu được lưu trữ. Bất kỳ thay đổi hình ảnh nào cũng khiến test thất bại, giúp dễ dàng phát hiện các regression không mong muốn.

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

describe("Template Visual Regression", () => {
  it("nên khớp với snapshot tham chiếu tại khung hình 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("nên khớp với snapshot tham chiếu tại điểm giữa", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Visual Regression Testing trong CI

Tích hợp visual regression test vào quy trình CI/CD của bạn để phát hiện các thay đổi render trước khi chúng đến production:

# .github/workflows/visual-regression.yml
name: Visual Regression Tests
on: [pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npx playwright install chromium
      - run: npm ci
      - run: npm run test:visual

Tối ưu hóa Hiệu suất

Để có thời gian render nhanh nhất có thể, cần hiểu thời gian được dành ở đâu và bạn có thể kéo đòn bẩy nào. Dưới đây là các chiến lược tối ưu hóa có tác động nhất.

1. Chọn Mục tiêu Triển khai phù hợp

2. Tối ưu hóa Độ phức tạp Template

• Giảm số lượng layer. Mỗi layer được render độc lập. Ít layer hơn có nghĩa là ít thao tác vẽ hơn mỗi khung hình.
• Sử dụng chất lượng draft trong quá trình phát triển và kiểm tra. Chuyển sang high hoặc lossless chỉ cho xuất cuối cùng.
• Đơn giản hóa animation trong quá trình xem trước. Chuỗi keyframe phức tạp với nhiều easing function thêm tính toán mỗi khung hình.

3. Sử dụng renderWaitTime một cách khôn ngoan

Tùy chọn renderWaitTime tạm dừng render để cho phép media bên ngoài (hình ảnh, video, font) tải. Đặt giá trị này ở mức tối thiểu đảm bảo tất cả tài sản được tải. Giá trị 500-2000ms là điển hình. Đặt quá cao sẽ lãng phí thời gian trên mỗi khung hình.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 giây thường là đủ
});

4. Tận dụng Render Song song

Đối với bất kỳ video nào dài hơn 10 giây, render song song (Docker hoặc cloud) sẽ nhanh hơn render tuần tự. Điểm hòa vốn phụ thuộc vào phần cứng và cấu hình cloud của bạn, nhưng theo nguyên tắc chung:

• < 10 giây: Renderer Node.js đơn là ổn
• 10-60 giây: Docker với 4-8 worker
• 1-10 phút: Docker với 8-16 worker hoặc cloud
• > 10 phút: Render trên cloud với 50+ worker

5. Tối ưu hóa Đầu ra GIF

GIF vốn dĩ lớn. Để giữ kích thước file có thể quản lý:

• Giảm FPS xuống 10-15. Hầu hết GIF trông ổn ở tốc độ khung hình giảm.
• Giảm độ phân giải bằng preset (social, web, email).
• Giới hạn màu xuống 128 hoặc ít hơn cho animation đơn giản.
• Sử dụng targetSizeKB để cho Rendervid tự động tối ưu hóa tham số.
• Tránh dithering (none) nếu kích thước file quan trọng hơn chất lượng gradient.

6. Bật Tăng tốc GPU

Trên các máy có GPU tương thích, mã hóa tăng tốc phần cứng có thể giảm thời gian render 2-5 lần cho bước mã hóa. Điều này có tác động nhất đối với đầu ra độ phân giải cao (4K+) và bitrate cao.

7. Tải trước Tài sản

Nếu template của bạn tham chiếu hình ảnh hoặc video bên ngoài, hãy tải trước chúng xuống bộ nhớ cục bộ trước khi render. Độ trễ mạng trong quá trình render là nguyên nhân phổ biến nhất của render chậm hoặc thất bại.

Bước tiếp theo

• Bắt đầu với Rendervid: Truy cập tổng quan Rendervid để cài đặt và render đầu tiên
• Tìm hiểu hệ thống template: Đọc tài liệu Hệ thống Template cho cấu trúc template JSON, biến, scene, layer, và animation
• Khám phá component: Duyệt Thư viện Component cho các component React được xây dựng sẵn như AnimatedLineChart và AuroraBackground
• Thiết lập tích hợp AI: Xem hướng dẫn Tích hợp AI để kết nối Claude Code, Cursor, hoặc Windsurf với Rendervid qua MCP
• Xem mã nguồn: Truy cập kho GitHub Rendervid cho mã nguồn đầy đủ và 100+ template mẫu