Creating videos... with React!
summary
React components render frames which Puppeteer captures as Puppeteer screenshots at 30 or 60 FPS, then FFmpeg stitches frames and audio into final files (FFmpeg stitch). Live preview and parameter changes use the Remotion Player/Studio; video timelines are simple JavaScript objects validated by a Zod schema. Rendering scales via local pools or AWS Lambda (5 minute setup, parallel jobs, 30‑minute per‑job limit), returns a render ID and saves outputs to S3.
AI-written summary · about
chapters (15)
- 0:00intro
- 0:22preamble
- 0:40wait what?
- 1:00about alfonso
- 1:10what is a video?
- 1:58how editing tools work?
- 2:10about remotion
- 3:01how does it work?
- 3:19potential use cases?
- 4:32let's see an example + source code
- 5:17remotion is quickly evolving
- 5:29the intuition
- 5:59demo
- 12:25we have a challenge!
- 12:43about nearform
related talks
01h 14mCreate Videos… with React!
21mVideo Creation in a JavaScript World
23mCreating Videos Programmatically in React
29mBuilding a video editor with React
37mCode Your Videos: Programmatic Video Creation with Javascript
16mDemocratizing live video with React
20mThe browser as a video rendering engine: Deep dive into time management
35mBootstrapping A Live Streaming React Web App