Creating Videos... With React!

Rate this content
Bookmark

I bet you've always used React to build websites and applications, right? What if I told you that we can also edit a movie with it! Learn how a simple render engine built in React and Node.js works to make videos using React components.

Also, you will learn how to create a scalable render-farm using AWS. The main library to build the render engine is Remotion and allows to render videos programmatically.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

FAQ

A video is composed of a sequence of images over time, called frames, and one or more audio tracks.

You can start a ReMotion project by running the command 'npx create video' and following the simple wizard to select options like TypeScript, JavaScript, React, or Next.

A composition in ReMotion is an entity that can be rendered. It has an ID, a React component, duration, frames per second (FPS), width, height, and default props.

Advantages include the ability to create reusable components, version control for videos, and automation of the video creation and uploading process through API calls.

Use cases include creating parameterized videos, automated video workflows, and cloud-based video SaaS products.

You can render videos at scale using ReMotion Lambda for high parallelization or Docker for handling larger volumes and longer videos.

The ReMotion player allows developers to load a ReMotion project inside a simple React application for live preview of the video.

ReMotion offers built-in components for video, images, GIFs, audio, and sequences, among others.

Using React to create videos allows developers to build declarative and reusable components, version their videos, and automate the entire video creation process.

ReMotion is a React library that allows developers to create videos programmatically using React components.

Alfonso Graziano
Alfonso Graziano
20 min
18 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today's Talk covers creating videos with React, including using Puppeteer and FFmpeg to build videos frame by frame. The ReMotion library offers advantages such as declarative and reusable components, versioning, and automation. The Talk also demonstrates building a video with ReMotion, embedding previews in React, and customization options. It explores rendering at scale with ReMotion's Lambda or Docker options and the rendering process using Lambdas.
Available in Español: ¡Creando Videos... Con React!

1. Introduction to Creating Videos with React

Short description:

Today we will talk about how to create videos with React. Learn how to create videos programmatically using just React. Also, we will see how to build a JSON-based render engine.

Welcome, everyone. Thanks for being here. I'm super excited to give this talk and today we will talk a little bit about how to create videos with React.

But the first time I heard that you can create actual videos with React, my reaction has been more or less like that. I wasn't sure why this was a thing. In fact, you can use tools like DaVinci Resolve, Adobe Premiere Pro, there are a lot of tools to actually create videos. So why should you use a front-end framework or front-end library to create a video? Well, it makes a lot of sense for a lot of reasons and bear with me because today we will learn how to create videos programmatically using just React. And as a bonus, in case you are interested in that, we will see real fast how to build a JSON-based render engine based on the library.

So just a couple of words about me. I'm Alfonso. I'm from Italy. I'm a senior engineer at NearForm and if you're interested in the slides of this talk, you can just scan the QR code. Before we move on to the content, just a few words on NearForm, we are an independent team of engineers, designers and strategists. And we actually build digital solutions and products. We have more than 10 years of experience. We are more than 400 people in 28, 30 countries. So in case you need anything related to Node.js, the React ecosystem, just send us a message.

2. Building Videos with React

Short description:

A video is a sequence of images over time, with frames per second and audio tracks. React can be used to build the single frame and mount components inside the viewport. Puppeteer is used to take a screenshot of the viewport for each frame and FFmpeg is used to stitch the frames together and add audio. ReMotion is a React library for creating videos programmatically.

Let's get started from the ground. So what is a video? We can see a video as a sequence of images over time and the number of the images in a second is called frames per second. So we can have videos with 30 frames per second, 60 frames per second. It usually depends on the use case, right? So for example, films has usually 24, 25 frames per second. And then of course we have audios. So we can have a single audio track, a stereo audio track and we can have also multiple audio tracks as well. But this is the real basics.

So images over time with one or more audio tracks. Now the intuition here is really interesting because we can use React, our front-end framework, our front-end library to build the single frame. So we mount all the components inside the viewport. Of course, we bundle everything with Webpack. In this way, we can actually put images, text, videos, whatever we can think of on the screen. Then we use Puppeteer to take a screenshot of the viewport for each frame, of course, to make it performant, we have this parallelized. And then once we have all the frames, we use FFmpeg to stitch all the frames together, add the audio and build the final video in a container like the mp4 container. All this stuff is done by a beautiful library which is called ReMotion. ReMotion is a React library to create videos programmatically. And once we download ReMotion, we have a lot of things inside.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Building Serverless Applications on AWS with TypeScript
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
Workshop
Slobodan Stojanović
Slobodan Stojanović
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:        - How to set up a serverless project with TypeScript and CDK        - How to write a testable Lambda function with hexagonal architecture        - How to connect a function to a DynamoDB table        - How to create a serverless API        - How to debug and test a serverless function        - How to organize and grow a serverless application


Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop