One of the coolest things I got to work on during a mini hackathon was creating videos programmatically using React. One of the tools that makes this super easy is remotion.
According to the official homepage Remotion promises to make it easy to create videos programmatically using React that will produce an .mp4 video file.
Not only does it compiles down to mp4 files, but it provides a dev environment with a video player which can help tremendously during development.
So how do I use Remotion to create videos programmatically using React?
Lets dive right in.
There are a couple of prerequisites to get started with Remotion.
- NodeJS > 12
I will skip installation of node and ffmpeg, as these are OS dependant so feel free to find the best way to install them depending on your OS.
Create a new project
Creating a new project is dead simple. Simply run the below command in your terminal and follow the instructions.
npm init video
There are a few examples to choose from, I would highly recommended the
Running dev environment
If all went well you now have a new directory with a pre-configured project and an example of whats possible if you selected it from the list during setup.
Now simply run the following command to run the dev environment.
npm run preview
This will bring up the dev environment in your browser and will look something like the following:
This one is pretty simple.
Again, its a one-liner to get the job done.
npm run build
This will output a video in
Remotion provides all the tools necessary to seamlessly create videos programmatically using React and render them into a video file. It is quite flexible, there is active development with quarterly releases.
One thing that I would love to be improved is the rendering time of videos. A 40-second custom video I made took about 50 seconds to render with the following stats
FPS: 30 Resolution: 720x720 Duration ~40 seconds No remote files were downloaded
All in all its a great tool and could definitely see this becoming a default tool for developers.