Creating Videos from JSON with Firebase and Browser APIs

Back in 2018, we had an idea. We had just wrapped up a project where I spent some time in After Effects creating social media ads for an app we were developing. I’m no motion designer, but occasionally, I had to jump into video production. Each time, I found myself pulling my hair out over creating multiple versions of the same video with different content. If you’re not an expert, working with video can be tricky, and most of all, time-consuming.

So, back to the idea: what if you could create video templates directly in your browser, connect them to an API (or someone else’s API), and automatically generate videos from there? That was the starting point for Framebyte—a technical experiment where we explored video formats, canvas performance, and at the time cutting-edge browser APIs.

An Experiment Grounded in Reality

Videos have undeniably become the go-to medium for capturing attention online. However, producing videos often comes at a higher cost than traditional text-and-image content. To make our experiment meaningful, we grounded it in real-world use cases. Here are a few scenarios that inspired us:

• Real Estate Agencies: Realtors struggle to promote their listings online. A single agency can have hundreds of listings at a time, making personalized content creation a nightmare.
• E-commerce Businesses: Inventory and offers often change daily, requiring constant updates to promotional materials.
• Publications: News outlets frequently update their stories, sometimes hourly, necessitating rapid turnaround for fresh content.

The Approach

We zeroed in on the core parts of the idea: working with video templates directly in the browser and integrating them with JSON to render videos on a server.

For templates, we chose the Canvas API. While we hardcoded the templates for the experiment, we recognized the potential to build a UI that would let anyone create and edit them later. To simulate an API connection, we built a simple interface for storing JSON data, which allowed us to test the templates in action.

Our testing interface for storing data and previewing videos.

Since the templates were designed and animated using Canvas, we explored rendering the videos server-side using a chromeless browser and the Screen Capture API. The results exceeded our expectations, producing surprisingly smooth, high-quality videos.

The Results

Watching videos come to life in the browser with little-to-no effort was incredibly satisfying. We learned a lot abut Canvas performance, frame rates, and the underlying mechanics of video rendering. Projects like these are why I love side experiments; there’s no better way to learn than by applying ideas in the real world.