How to Build a Video-as-a-Service (VaaS) API with VideoFlow

Building a video generation pipeline usually starts with a simple requirement: "We need to generate a video for every user." But as soon as you look at the implementation details—shelling out to FFmpeg, managing frame-rate math, and handling complex overlays—the project quickly balloons in complexity.

If you are building a SaaS platform, a personalized marketing tool, or an AI content automation engine, you don't want to be a video engineer. You want a Video-as-a-Service (VaaS) API that takes data and returns an MP4.

In this guide, we’ll show you how to build exactly that using VideoFlow. We’ll move beyond fragile shell scripts and proprietary APIs to a portable, open-source architecture that treats video like just another data format.

Why Video-as-a-Service?

The traditional approach to programmatic video often involves string-concatenating FFmpeg commands. This is brittle, hard to test, and nearly impossible to scale without a dedicated team. By building a VaaS wrapper around VideoFlow, you gain several key advantages:

1. JSON Portability: Your API accepts a VideoJSON document—a documented, versionable schema that describes the video's timeline, layers, and effects.
2. No FFmpeg Dependency: By default, @videoflow/renderer-server uses headless Chromium and WebCodecs to render videos. This means no complex system-level dependencies in your Docker containers or serverless functions.
3. Identical Output: The same JSON that powers your live preview in the Playground will produce the exact same byte-for-byte MP4 on your server.

Step 1: The Core Logic

The heart of your VaaS API is the @videoflow/renderer-server package. Unlike client-side rendering, this runs in a Node.js environment and exports the final video as a Buffer or a file.

First, install the necessary packages:

npm install @videoflow/core @videoflow/renderer-server
npx playwright install chromium

Now, let's create a simple function that takes a title and an image URL and returns a rendered MP4 buffer.

import VideoFlow from '@videoflow/core';
import ServerRenderer from '@videoflow/renderer-server';

async function generateVideo(titleText, imageUrl) {
  const $ = new VideoFlow({ width: 1280, height: 720, fps: 30 });

  // Add a background image
  const bg = $.addImage(
    { fit: 'cover', opacity: 0.8 },
    { source: imageUrl }
  );

  // Add a title with a fade-in
  const title = $.addText({
    text: titleText,
    fontSize: 8,
    color: '#FF5A1F', // VideoFlow orange
    position: [0.5, 0.4],
  });
  
  title.fadeIn('500ms');

  $.wait('3s');
  
  title.fadeOut('500ms');

  // Compile to VideoJSON
  const json = await $.compile();

  // Render to a Buffer
  const buffer = await ServerRenderer.render(json, {
    outputType: 'buffer',
    verbose: true,
  });

  return buffer;
}

Step 2: Building the API Endpoint

With the rendering logic in place, you can wrap it in a standard web framework like Express or Hono. Because VideoFlow can render directly to a buffer, you can stream the result back to the client or upload it to S3 immediately.

import express from 'express';

const app = express();
app.use(express.json());

app.post('/api/render', async (req, res) => {
  const { title, image } = req.body;

  try {
    const videoBuffer = await generateVideo(title, image);

    res.set('Content-Type', 'video/mp4');
    res.send(videoBuffer);
  } catch (error) {
    console.error('Render failed:', error);
    res.status(500).send('Video generation failed');
  }
});

app.listen(3000, () => console.log('VaaS API running on port 3000'));

Step 3: Scaling with Serverless

One of the biggest challenges with video rendering is the CPU cost. Rendering a single 1080p video can spike CPU usage, which is why serverless environments like AWS Lambda or Google Cloud Functions are ideal for VaaS.

Since @videoflow/renderer-server is designed for headless environments, you can deploy your API as a set of auto-scaling functions. Each function handles one render request, ensuring that a surge in demand doesn't take down your main application server.

How VideoFlow Handles the Heavy Lifting

While you focus on your API logic, VideoFlow manages the cinematic complexity. Our official renderers handle:

• GLSL Effects: Stack up to 42 effects like bloom and chromaticAberration without writing a single shader.
• Frame-Perfect Timing: Primitives like $.wait() and $.parallel() ensure your layers are perfectly synchronized.
• Resolution Agnostic: Author in em units so your API can support 720p, 1080p, and 4K exports from the same JSON.

Closing the Loop

Building a Video-as-a-Service API doesn't have to be a months-long engineering effort. With VideoFlow, you can turn a JSON object into a professional video in just a few lines of TypeScript.

Whether you're building the next generation of AI-driven content automation or simply personalizing onboarding for your SaaS, VideoFlow gives you the tools to treat video as a first-class citizen in your stack.

Ready to start building?

• Try out the VideoFlow Playground to design your first scene.
• Check out the Server Renderer guide for deployment tips.
• Star us on GitHub to follow our open-source journey.