@revideo/create 0.4.1-cat.995 → 0.4.1

package/examples/stitching-videos/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "stitching-videos",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@revideo/core": "0.3.1",
+    "@revideo/2d": "0.3.1",
+    "@revideo/renderer": "0.3.1",
+    "@revideo/vite-plugin": "0.3.1",
+    "@revideo/ffmpeg": "0.3.1"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.3.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.5"
+  }
+}

package/examples/stitching-videos/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(0,0,0)",
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/ffmpeg",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/examples/stitching-videos/src/project.ts

@@ -0,0 +1,26 @@
+import {makeProject} from '@revideo/core';
+
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+  variables: {
+    videos: [
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4",
+        start: 1,
+        duration: 6
+      },
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-2.mp4",
+        start: 2,
+        duration: 10
+      },
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-1.mp4",
+        start: 1,
+        duration: 7
+      }
+    ]
+  }
+});

package/examples/stitching-videos/src/render.ts

@@ -0,0 +1,58 @@
+import {renderVideo} from '@revideo/renderer';
+
+const progressTracker = new Map<number, number>();
+
+function trackProgress(id: number, progress: number) {
+  progressTracker.set(id, progress);
+}
+
+function printProgress() {
+  let line = '';
+  for (const [key, value] of progressTracker.entries()) {
+    line += `${key}: ${(value * 100).toFixed(0)}% `;
+  }
+
+  if (line === '') {
+    return;
+  }
+
+  console.log(line);
+}
+
+async function render() {
+  console.log('Rendering video...');
+
+  const interval = setInterval(() => {
+    printProgress();
+  }, 1000);
+
+  // This is the main function that renders the video
+  const file = await renderVideo(
+    './vite.config.ts',
+    {
+      videos: [
+        {
+          src: "https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4",
+          start: 2,
+          duration: 5
+        },
+        {
+          src: "https://revideo-example-assets.s3.amazonaws.com/beach-2.mp4",
+          start: 1,
+          duration: 4
+        },
+        {
+          src: "https://revideo-example-assets.s3.amazonaws.com/beach-1.mp4",
+          start: 3,
+          duration: 3
+        }
+      ]},
+    trackProgress,
+  );
+
+  clearInterval(interval);
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/stitching-videos/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

package/examples/stitching-videos/src/scenes/example.tsx

@@ -0,0 +1,30 @@
+import { makeScene2D, Video } from '@revideo/2d';
+import {createRef, waitFor, useScene} from '@revideo/core';
+
+interface VideoObject {
+  src: string;
+  start: number;
+  duration: number;
+}
+
+export default makeScene2D(function* (view) {
+  const videos: VideoObject[] = useScene().variables.get('videos', [])();
+
+  for(const vid of videos){
+    const videoRef = createRef<Video>();
+    yield view.add(<Video src={vid.src} time={vid.start} play={true} opacity={0} ref={videoRef} />)
+    
+    if(view.width() / view.height() > videoRef().width() / videoRef().height()){
+      videoRef().width("100%");
+    } else {
+      videoRef().height("100%");
+    }
+
+    // this is a fade-out / fade-in transition - the fade-out and in take 0.3 seconds each; just set the opacity of the video tag to 1 and only use yield* waitFor(vid.duration);
+    yield* videoRef().opacity(1,0.3);
+    yield* waitFor(vid.duration-0.6);
+    yield* videoRef().opacity(0,0.3);
+    videoRef().pause();
+    videoRef().remove();
+  }
+});

package/examples/stitching-videos/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/stitching-videos/vite.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+  ],
+});

package/examples/youtube-shorts/README.md

@@ -0,0 +1,65 @@
+# Youtube Shorts with Subtitles
+
+This example project lets you generate Youtube Shorts with AI.
+
+https://github.com/redotvideo/revideo-examples/assets/122226645/98bc202d-6b7d-4b8a-9a7f-c41533d8c760
+
+
+## Project Structure
+
+There are two main files you should look at in this project:
+
+- `src/scenes/example.tsx`: This file defines the flow of the video and its animations. It accepts variables such as a list of background images, a voiceover audio file, as well as a list of words along with their timestamps to display the video captions.
+- `src/render.ts`: This is a node.js process which generates assets (script, voiceover, etc.) using AI services and consequently calls `renderVideo()` to export a video that uses the assets it generated as an input.
+
+
+## Getting Started
+
+After cloning the repo, go inside the project folder and install all dependencies using `npm install`. Now you can preview an example video.
+
+### Preview Video
+
+You can start the editor using the following command:
+
+```
+npm start
+```
+
+The editor preview uses example assets (images and voiceovers) specified in `src/metadata.json` which are located in an AWS bucket we own. This way, you can test the template without having to generate your own assets.
+
+When previewing the video in the editor, your browser will first have to load the assets, which can cause a bit of a lag - you might have to wait a few seconds. This will not be a problem when exporting the video though - when building a web app, this can also easily be avoided by preloading the assets (see our [docs](https://docs.re.video/preview-with-player/#preloading-assets) for info on this).
+
+
+## Rendering your own Videos
+If you want to render your own videos using ChatGPT, Dall-E and Elevenlabs voiceovers, you need to create a `.env` file in the project root directory and add the following environment variables:
+
+```
+OPENAI_API_KEY=<your-openai-key>
+ELEVEN_API_KEY=<your-elevenlabs-key>
+DEEPGRAM_API_KEY=<your-deepgram-key>
+```
+
+Now you can run `npm run render`, which will execute `src/render.ts`.
+
+
+## Animating Subtitles
+
+This project has a heavy emphasis on animating subtitles. It provides the option to stream subtitles word-by-word, to highlight the currently spoken word, or to let words fade into the image as they appear. To play around with the different caption animation options, you can modify the `textSettings` object in `src/scenes/example.tsx`:
+
+```ts
+const textSettings: captionSettings = {
+  fontSize: 80,
+  numSimultaneousWords: 4, // how many words are shown at most simultaneously
+  textColor: "white",
+  fontWeight: 800,
+  fontFamily: "Mulish",
+  stream: false, // if true, words appear one by one
+  textAlign: "center",
+  textBoxWidthInPercent: 70,
+  fadeInAnimation: true,
+  currentWordColor: "cyan",
+  currentWordBackgroundColor: "red", // adds a colored box to the word currently spoken
+  shadowColor: "black",
+  shadowBlur: 30
+}
+```