Skip to main content

Installation and Setup

Let's install revideo with a sample project. To use revideo, make sure that you have Node.js version 16 or greater.

info

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@latest

After agreeing to install the @revideo/create package and choosing a project path (<project-path>), navigate to your project and install all dependencies:

cd <project-path>
npm install

To preview your video in the editor, run:

 npm start

The editor can now be accessed by visiting http://localhost:9000/. Here you should see the video shown below. On the next page, we're going to take a look at the code of this example.

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),
);
});

Troubleshooting

npm init @revideo@latest fails to execute.

There was a bug in npm causing the above command to fail. It got fixed in version 8.15.1. You can follow this guide to update your npm. Alternatively, you can use the following command instead:

npm exec @revideo/create@latest
npm install fails with code ENOENT

If npm install fails with the following error:

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path [path]\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open '[path]\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Make sure that you're executing the command in the correct directory. When you finish bootstrapping the project with npm init, it will display three commands:

cd [path]
npm install
npm start

Did you run the cd command to switch to the directory containing your project?

I moved the camera too far away and can't find the preview (The preview is is black)

You can press 0 to refocus the camera on the preview.

The animation ends abruptly or does not start at the beginning.

Make sure the playback range selector in the timeline starts and ends where you expect it to, e.g., at the beginning and end of your animation. The range selector is a gray bar in the time axis of your timeline. When you move your mouse over it, six dots will appear allowing you to manipulate it.

File watching does not work on Windows Subsystem for Linux (WSL) 2

When running Vite on WSL2, file system watching does not work if a file is edited by Windows applications.

To fix this, move the project folder into the WSL2 file system and use WSL2 applications to edit files. Accessing the Windows file system from WSL2 is slow, so this will improve performance.

For more information view the Vite Docs.