@revideo/create 0.3.5-yellow.968 → 0.3.6-alpha.971

package/examples/avatar-with-background/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "avatar-with-background",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@deepgram/sdk": "^3.3.0",
+    "@revideo/2d": "0.3.0",
+    "@revideo/core": "0.3.0",
+    "@revideo/ffmpeg": "0.3.0",
+    "@revideo/renderer": "0.3.0",
+    "@revideo/vite-plugin": "0.3.0",
+    "dotenv": "^16.4.5",
+    "openai": "^4.39.0"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.3.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5"
+  }
+}

package/examples/avatar-with-background/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1080,
+      "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/avatar-with-background/src/project.ts

@@ -0,0 +1,6 @@
+import {makeProject} from '@revideo/core';
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example]
+});

package/examples/avatar-with-background/src/render.ts

@@ -0,0 +1,36 @@
+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 += `Worker ${key}: ${(value * 100).toFixed(0)}% `;
+  }
+
+  if (line === '') {
+    return;
+  }
+
+  console.log(line);
+}
+
+async function render() {
+  console.log('Rendering video...');
+
+  const interval = setInterval(() => {
+    printProgress();
+  }, 1000);
+
+  const file = await renderVideo('./vite.config.ts', {}, trackProgress);
+
+  clearInterval(interval);
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/avatar-with-background/src/revideo.d.ts

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

package/examples/avatar-with-background/src/scenes/example.tsx

@@ -0,0 +1,28 @@
+import { Img, Video, makeScene2D } from '@revideo/2d';
+import { waitFor, createRef, useScene } from '@revideo/core'
+
+export default makeScene2D(function* (view) {
+  const avatarRef = createRef<Video>();
+  const backgroundRef = createRef<Img>();
+
+  yield view.add(
+    <>
+      <Img
+        src={'https://revideo-example-assets.s3.amazonaws.com/mountains.jpg'}
+        height={'100%'}
+        ref={backgroundRef}
+      />
+      <Video
+        src={'https://revideo-example-assets.s3.amazonaws.com/avatar.webm'}
+        play={true}
+        width={'100%'}
+        ref={avatarRef}
+        transparency={true}
+      />
+    </>,
+  );
+
+  avatarRef().position.y(useScene().getSize().y / 2 - avatarRef().height() / 2);
+
+  yield* waitFor(avatarRef().getDuration());
+});

package/examples/avatar-with-background/tsconfig.json

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

package/examples/avatar-with-background/vite.config.ts

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

package/examples/default/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "revideo-app",
+  "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.5",
+    "@revideo/2d": "^0.3.5",
+    "@revideo/renderer": "^0.3.5",
+    "@revideo/vite-plugin": "^0.3.5",
+    "@revideo/ffmpeg": "^0.3.5"
+  },
+  "devDependencies": {
+    "@revideo/ui": "^0.3.5",
+    "@revideo/cli": "^0.3.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.5"
+  }
+}

package/examples/default/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "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/ffmpeg",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/examples/default/src/project.ts

@@ -0,0 +1,7 @@
+import {makeProject} from '@revideo/core';
+
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+});

package/examples/default/src/render.ts

@@ -0,0 +1,17 @@
+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(
+    './vite.config.ts',
+    {fill: 'orange'},
+    () => {},
+    {logProgress: true},
+  );
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/default/src/revideo.d.ts

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

package/examples/default/src/scenes/example.tsx

@@ -0,0 +1,38 @@
+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'}
+        size={['100%', '100%']}
+        play={true}
+      />
+      <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),
+  );
+});

package/examples/default/tsconfig.json

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

package/examples/google-cloud-run/Dockerfile

@@ -0,0 +1,56 @@
+FROM node:18-bullseye
+
+RUN apt-get update && apt-get install -y \
+    nscd \
+    libnss3 \
+    libdbus-1-3 \
+    libatk1.0-0 \
+    libatk-bridge2.0-0 \
+    libcups2 \
+    libxkbcommon0 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxrandr2 \
+    libgbm1 \
+    libpango-1.0-0 \
+    libcairo2 \
+    libasound2 \
+    libatspi2.0-0 
+
+RUN apt-get install -y libxfixes3
+
+WORKDIR /usr/src/app
+
+RUN wget https://github.com/eugeneware/ffmpeg-static/releases/download/b6.0/ffmpeg-linux-x64
+
+RUN chmod +x ffmpeg-linux-x64
+
+RUN mv ffmpeg-linux-x64 ffmpeg
+
+RUN mv ffmpeg /usr/local/bin/
+
+ENV FFMPEG_PATH=ffmpeg
+
+RUN wget https://github.com/eugeneware/ffmpeg-static/releases/download/b6.0/ffprobe-linux-x64
+
+RUN chmod +x ffprobe-linux-x64
+
+RUN mv ffprobe-linux-x64 ffprobe
+
+RUN mv ffprobe /usr/local/bin/
+
+ENV FFPROBE_PATH=ffprobe
+
+COPY package*.json ./
+
+COPY . ./
+
+RUN npm install
+
+RUN npx puppeteer browsers install chrome
+
+RUN apt-get update && apt-get install -y nscd libnss3
+
+RUN ffmpeg -version
+
+CMD service nscd start && npm run serve

package/examples/google-cloud-run/README.md

@@ -0,0 +1,35 @@
+# Revideo on Google Cloud Run
+
+This is an example project demonstrating how you can deploy Revideo projects on Google Cloud Run for rendering.
+
+The project is structured like a normal Revideo project, but it also contains a minimal Express server in `src/index.ts` that exposes a `/render` endpoint calling `renderVideo()` ([function docs](https://docs.re.video/renderer/renderVideo)). It also contains a Dockerfile that sets up an environment to run Revideo out of the box on Cloud Run. 
+
+
+### Getting Started
+
+To deploy the example proejct to Cloud Run, you should have a Google Cloud account and have enabled the [Cloud Run API](https://console.cloud.google.com/run). You should also install the gcloud CLI ([guide](https://cloud.google.com/sdk/docs/install)).
+
+After cloning the `revideo-examples` project, navigate to `/google-cloud-run`. Now, you can run the following command to deploy the example project.
+
+```
+gcloud run deploy revideo-cloudrun-example --source . --region us-east1 --memory 8Gi --cpu 4 --allow-unauthenticated --concurrency=1
+```
+
+Once the function is deployed, you will receive a service URL in your terminal. You can run the following command to trigger a video render:
+
+```
+curl -X POST https://<your-service-url>/render \
+-H "Content-Type: application/json" \
+-d '{
+    "variables": {"username": "Sarah"}
+}' --output output.mp4
+```
+
+This will save the file which is sent back as a response to `output.mp4`. In production, it would be better to upload the file to a bucket instead of sending it back as a response - here, we merely use this approach for simplicity - if you want to upload the result file to a bucket instead of sending it back, you can do so by modifying `src/index.ts`.
+
+Note that `--concurrency=1` makes sure that every request will spin up a new container instance to render a video. This is intentional, as rendering is a computationally expensive process. If you want to, you can also try decreasing the requested cpu and memory - 8Gi and 4 cpu is more than sufficient. When deploying in production, you might also want to require authentication.
+
+
+### Deploying your own Video Template
+
+If you want to deploy your own video template, you can simply change the code in `src/scenes/example.tsx` and redeploy the service by running the `gcloud run deploy` command from above.