Building a Real-Time Video Player with React

In this supper club episode of Syntax, Wes and Scott talk with Jonny Burger about why and how he built Remotion, his app that lets you create MP4 videos using React.

Gatsby - Sponsor

Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️

Tuple - Sponsor

This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing.

Show Notes

• 00:36 Welcome
• 01:24 Who is Jonny Burger?
• Jonny.io
• Jonny on GitHub
• Jonny on Twitter
• 03:51 Why did you create Remotion?
• Remotion.dev
• 07:36 What types of videos are people making?
• 10:53 What is the tech stack?
• Puppeteer
• Lottie
• 18:31 What is Idempotence?
• 19:50 What is lottie?
• 22:56 Motion blur trail
• Motion blur trail demo
• 25:17 Sponsor: Gatsby
• 26:12 Chrome rendering
• 29:58 When would you choose JPG or PNG?
• 31:43 Are you using ffmpeg in the browser?
• ffmpeg
• 36:00 Sponsor: Tuple
• 37:43 What player do you use for playback?
• 39:54 How did you take this idea to a product?
• 44:05 Supper Club questions
• LG C9 TV
• iTerm
• 50:12 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Yoga with Adriene
• Cosmic Kids Yoga

Shameless Plugs

• Toopo.art

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets