Quickstart
Let's install revideo with a sample project. To use revideo, make sure that you have Node.js version 16 or greater.
If you're on Linux, also make sure that you have nscd installed:
sudo apt-get install nscd. You need this package for ffmpeg.
Creating a new project
Run the following command to create a new revideo project (If this fails, check out the troubleshooting section):
npm init @revideo@latestNow, select the default project, navigate to its folder and install all dependencies:
cd <project-path>
npm installTo preview your video in the editor, run:
npm startThe editor can now be accessed by visiting http://localhost:9000/.
import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';
export default makeScene2D(function* (view) {
const logoRef = createRef<Img>();
yield view.add(
<>
<Video
src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
play={true}
size={['100%', '100%']}
/>
<Audio
src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
play={true}
time={17.0}
/>
</>,
);
yield* waitFor(1);
view.add(
<Img
width={'1%'}
ref={logoRef}
src={
'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
}
/>,
);
yield* chain(
all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
logoRef().scale(60, 1),
);
});Rendering the Video
You can render your video by running:
npm run renderThis will call the ./src/render.ts script in your code:
import {renderVideo} from '@revideo/renderer';
async function render() {
console.log('Rendering video...');
// This is the main function that renders the video
const file = await renderVideo({
projectFile: './src/project.ts',
settings: {logProgress: true},
});
console.log(`Rendered video to ${file}`);
}
render();For more information, check out the renderVideo() API reference.
Alternatively, you can also render your video using the button in the editor that starts when you run npm run start.
Rendering from the browser
To render videos from the editor, simply click the "Render" Button:
Understanding the Video Code
For now, we can ignore all files in our revideo project except for src/scenes/example.tsx, as this is where the visuals and audio of our video are defined. Let's walk through all the parts of the code that might confuse you, and provide explanations and references.
Defining a generator function
Our animation is defined within a generator function that is passed to makeScene2D - this function describes the sequence of events happening in our video:
import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';
export default makeScene2D(function* (view) {
// your animation flow here
}Generator functions can return multiple values - when they are called, they will execute until they first encounter a yield statement, and return the yielded value. Revideo renders animations by continually calling the generator function, which will yield frames that we can export. It is not neccessary to understand how this works exactly, but if you are interested, you can read about the animation flow in revideo here.
Adding Video and Audio elements
At the start of our generator function, we add Video and Audio tags to our view, which will display them on the canvas. Other components you could add include Txt or Img tags, or basic shapes like Rect or Circle. You can find the API for all components here.
yield view.add(
<>
<Video
src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
play={true}
size={['100%', '100%']}
/>
<Audio
src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
play={true}
time={17.0}
/>
</>,
);A few points about input arguments:
In both cases,
srcrefers to the file, which points to a remote url on the bucket. Alternatively, you can use local files by passing their path.Passing
size={["100%", "100%"]}makes the video stretch to the full width and height of its canvas.Adding
play={true}makes both media elements play immediately, instead of being in a paused state.
Play media for one second
After adding our background video and audio, we execute
yield * waitFor(1);The function waitFor does - as the name suggests - nothing. It is particularly useful when waiting for media (like videos and audio) to play or when we want to have a still-standing image.
Animating the revideo logo
Lastly, we let the revideo logo spin into our video:
view.add(
<Img
width={'1%'}
ref={logoRef}
src={
'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
}
/>,
);
yield *
chain(
all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
logoRef().scale(60, 1),
);A few things happen here: First, we add the revideo logo as an Img to our canvas. We set its initial width to only 1% of the screen, as we want it to grow as the video plays. We also pass a reference through ref={logoRef}, which we had initialized before. Like React refs, references allow us to access and modify the behavior of elements after they've been initialized.
In our code, we use a reference to the revideo logo to later animate it. Particularly, we run the following commands:
scale(x, s): scales the size of the logo toxtimes its original size, withinnseconds.rotation(d, s): rotates the image byddegrees withinsseconds
The flow of these animations is determined by the keywords chain and all. The former instructs revideo to play its input animations after one another, while the latter instructs revideo to play them simultaneously. As a result, we first see the revideo logo rotating around 360 degrees while growing to 40x its original size. After this is done, the logo still grows to 60x its original size.
Troubleshooting
Last updated