Revideo: Create Videos with Code
Two weeks ago, rendering speeds were one of our biggest issues with Revideo. Without parallelizing your rendering jobs across serverless functions, the time it took to render a video was often too long to put into production. Luckily, a comment on our Show HN encouraged us to look closer into the Web Codecs API. Doing so, we were able to achieve up to 70x faster rendering speeds!
Revideo is based on Motion Canvas , which lets people define animations using generator functions and the HTML Canvas API. Each yield in the generator function corresponds to a frame in a video - if your generator function contains 300 yields, the resulting video will be 10 seconds long (if you specify it to use 30 fps). To export a video to mp4, we loop through all yield statements in your generator function, draw the corresponding frame to an HTML Canvas and then pass it to an encoder. Previously, two parts of this pipeline took up the majority of time:
Decoding videos used in <Video/> tags: In most cases, our users use <Video/> elements inside their videos. To render these videos, we have to extract frames from the source video files to draw them to the canvas. During rendering, Motion Canvas loads videos as HTMLVideoElements, sets the .currentTime attribute to the required time and waits for the browser to seek to the correct position. This approach is quite slow, which is why in v0.4.2 of Revideo, we had already replaced this approach with our Ffmpeg Extractor. The Ffmpeg extractor used a seperate NodeJS process to extract video frames with Ffmpeg and sent them to the browser through a websocket. Despite getting a big speedup compared to the naive seeking approach, we still encountered cases where it took 100s of milliseconds to extract individual frames. Especially when the source videos were big (4K), the extractor often timed out.
