@revideo/create 0.5.11-alpha.1102 → 0.5.11-alpha.1104

package/examples/github-stars-celebration/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "github-stars-celebration",
+  "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.5.10",
+    "@revideo/2d": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

package/examples/github-stars-celebration/src/global.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

package/examples/github-stars-celebration/src/project.meta

@@ -0,0 +1,28 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(20,20,20)",
+    "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/wasm",
+      "options": {}
+    }
+  }
+}

package/examples/github-stars-celebration/src/project.ts

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

package/examples/github-stars-celebration/src/render.ts

@@ -0,0 +1,15 @@
+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();

package/examples/github-stars-celebration/src/revideo.d.ts

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

package/examples/github-stars-celebration/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 2126556333
+}

package/examples/github-stars-celebration/src/scenes/example.tsx

@@ -0,0 +1,51 @@
+import {Audio, Img, Txt, makeScene2D} from '@revideo/2d';
+import {all, useScene, createRef, waitFor, easeInExpo, easeInCubic} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+  const rocketRef = createRef<Img>();
+  const earthRef = createRef<Img>();
+  const txtRef = createRef<Txt>();
+  const logoRef = createRef<Img>();
+
+
+  yield view.add(
+    <>
+    <Img
+      width={'20%'}
+      ref={earthRef}
+      src={'earth.png'}
+      position={[-useScene().getSize().width/2+50, useScene().getSize().height/2-50]}
+    />,
+    <Img
+      width={'5%'}
+      ref={rocketRef}
+      src={
+        '/rocket.png'
+      }
+      position={[earthRef().position().x+150, earthRef().position().y-150]}
+    />,
+    </>
+  );
+
+  yield* rocketRef().position([1000, -600], 2, easeInCubic);
+
+  yield view.add(
+    <Txt fontFamily={"Lexend"} fill="white" ref={txtRef} textAlign={"center"} fontSize={60}></Txt>
+  )
+
+  yield* txtRef().text("Thank you for 1,000 Github stars!", 2);
+
+  yield view.add(
+    <Img
+      width={'1%'}
+      ref={logoRef}
+      y={-50}
+      src={
+        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
+      }
+    />,
+  );
+
+
+  yield* all(txtRef().position.y(150, 2), logoRef().width("30%", 2));
+});

package/examples/github-stars-celebration/tsconfig.json

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

package/examples/github-stars-celebration/vite.config.ts

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

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

@@ -0,0 +1,127 @@
+# Parallel Rendering with Cloud Functions
+
+This project shows you how you can parallelize rendering across multiple Google Cloud functions to get much faster rendering speeds. Instead of rendering, say, 60 seconds of video in one process, we can also use 30 cloud functions to render 2s of video each, and afterwards stitch together the resulting partial videos.
+
+In this example, we are going to deploy two services to Google Cloud:
+
+- `/render-worker`: This is a Google Cloud Function that is responsible for rendering a partial video. It has access to your video template (`/render-worker/src/scenes`) and receives the number of total workers as well as its worker ID as an input. It accordingly exports the audio and visuals of the partial video.
+  
+- `/render-orchestrator`: This is a minimal Google Cloud Run service that manages the render workers and is your entrypoint to start rendering jobs. It receives rendering requests along with the number of desired workers, accordingly sends partial render requests to the render workers and merges their results together to obtain the final video
+  
+## Getting Started
+
+To get started, clone the `revideo-examples` repository and navigate to the `google-cloud-run-parallelized` directory.
+
+### Enable gcloud services
+
+To set up your Google Cloud services, ensure that you have the gcloud CLI installed ([guide](https://cloud.google.com/sdk/docs/install)). Then, enable the required services to deploy Cloud Functions:
+
+```
+gcloud services enable run.googleapis.com
+gcloud services enable cloudfunctions.googleapis.com
+gcloud services enable storage.googleapis.com
+gcloud services enable cloudbuild.googleapis.com
+```
+
+### Create Storage Bucket
+
+You'll need a storage bucket to save your videos as well as partial videos to. To create one, run the following command and replace `<your-region>` with your desired region (e.g. `us-east1`):
+
+```
+gsutil mb -l <your-region> gs://<your-bucket-name>/
+```
+
+Now enable public read access by running the following command:
+
+```
+gsutil iam ch allUsers:objectViewer gs://<your-bucket-name>/
+```
+
+Finally, you need to modify the CORS settings of your bucket. To do so, create the following file `cors_config.json`:
+
+```
+[
+  {
+    "origin": ["*"],
+    "responseHeader": ["Content-Type"],
+    "method": ["GET", "HEAD", "DELETE"],
+    "maxAgeSeconds": 3600
+  }
+]
+```
+
+Now run:
+
+```
+gsutil cors set cors_config.json gs://<your-bucket-name>/
+```
+
+Now you can deploy your render worker cloud function.
+
+
+### Deploy Render Worker Cloud Function
+
+To deploy the render worker cloud function, navigate to `/render-worker` and run `npm install`. Now run the following command:
+
+🚨 **Note:** In the commands below, make sure to select the same region (<your-region>) as the bucket you just created. Otherwise, your render jobs will run much slower.
+
+```
+gcloud functions deploy render-worker \
+--runtime nodejs18 \
+--trigger-http \
+--allow-unauthenticated \
+--gen2 \
+--memory 4Gi \
+--cpu 2 \
+--concurrency=1 \
+--timeout=3600s \
+--region=<your-region> \
+--set-env-vars=FFMPEG_PATH=ffmpeg,FFPROBE_PATH=ffprobe,GCP_BUCKET_NAME=<your-bucket-name>
+```
+
+You'll now have to wait some time for the deployment. Once your cloud function is deployed, its URL will be logged to the terminal (we will reference it as `<your-render-function-url>`). You will need this URL to configure your cloud run service that calls the cloud function you just deployed.
+
+
+### Deploy Render Orchestrator Cloud Run Service
+
+To deploy the service that orchestrates the cloud functions, navigate to `/render-orchestrator`, then run `npm install` and the following command:
+
+```
+gcloud run deploy render-orchestrator \
+--source . \
+--memory 8Gi \
+--cpu 4 \
+--allow-unauthenticated \
+--concurrency=1 \
+--timeout=3600s \
+--region <your-region> \
+--set-env-vars=FFMPEG_PATH=ffmpeg,FFPROBE_PATH=ffprobe,GCP_BUCKET_NAME=<your-bucket-name>,RENDER_WORKER_URL=<your-render-function-url>
+```
+
+Again, you'll have to wait a bit for the service to be deployed. Once that is done, you can send a request to its url `<your-render-orchestrator-url>`.
+
+### Sending a Request
+
+Once the render worker and orchestrator are running, you can send a render request as follows:
+
+```
+curl -X POST <your-render-orchestrator-url>/render \
+-H "Content-Type: application/json" \
+-d '{"variables": {"username": "John"}, "numWorkers": 5}'
+```
+
+This will distribute the rendering work across five cloud functions. You can check out the logs and rendering progress in the Google Cloud Function logs.
+
+
+## Usage Notes
+
+Some useful information, as well as considerations on what parameters to use:
+
+**Cold Start times:**
+Depending on your previous usage, your Google Cloud account & project might not be prioritized for cold start times, and thus the bottleneck of your render speeds might be cold start tiems. You can check the logs of your render worker function to see how fast the render workers spin up after sending the request. For example, we have noticed that after creating a new Google Cloud project, we sometimes had to wait for 30s+ for a render worker to spin up, whereas cold start times were very fast on a project that we had been using for a lot of time already.
+
+**Video Duration:**
+Parallel rendering is especially effective for longer videos (>1 min). For short videos, the overhead of waiting for a bunch of cloud functions to cold boot may not be worth it
+
+**Choosing the number of workers:**
+Depending on the length of the video you're going to render, you might want to adjust the `numWorkers` parameter. A single worker should not render less than a second of video

package/examples/google-cloud-run-parallelized/render-orchestrator/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 start

package/examples/google-cloud-run-parallelized/render-orchestrator/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "google-cloud-run",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "tsc && node dist/index.js"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^7.11.0",
+    "@revideo/2d": "0.5.10",
+    "@revideo/core": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10",
+    "express": "^4.19.2",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/uuid": "^9.0.8",
+    "typescript": "^5.4.5",
+    "vite": "^4.5"
+  }
+}

package/examples/google-cloud-run-parallelized/render-orchestrator/src/index.ts

@@ -0,0 +1,72 @@
+import { mergeAudioWithVideo, concatenateMedia } from '@revideo/ffmpeg';
+import { Storage } from '@google-cloud/storage';
+import * as express from 'express';
+import * as fs from 'fs';
+import axios from 'axios';
+import { v4 as uuidv4 } from 'uuid';
+
+const storage = new Storage();
+
+const app = express();
+app.use(express.json());
+
+app.get('/', (req, res) => {
+  res.status(200).send(`Hello World!`);
+});
+
+app.post('/render', async (req, res) => {
+  try {
+    const { variables, numWorkers } = req.body;
+    const jobId = uuidv4();
+
+    const renderPromises = [];
+    for (let i = 0; i < numWorkers; i++) {
+      renderPromises.push(makeRenderRequest(variables, i, numWorkers));
+    }
+
+    const results = await Promise.all(renderPromises);
+    const audios = results.map(result => result.audioUrl);
+    const videos = results.map(result => result.videoUrl);
+
+    await Promise.all([
+      concatenateMedia(audios, `${jobId}-audio.wav`),
+      concatenateMedia(videos, `${jobId}-visuals.mp4`)
+    ]);
+  
+    await mergeAudioWithVideo(`${jobId}-audio.wav`, `${jobId}-visuals.mp4`, `${jobId}.mp4`);
+
+    const resultFileBuffer = fs.readFileSync(`${jobId}.mp4`);
+    await storage.bucket(process.env.GCP_BUCKET_NAME).file(`${jobId}.mp4`).save(resultFileBuffer);
+
+    res.status(200).json({
+      file: `https://storage.googleapis.com/${process.env.GCP_BUCKET_NAME}/${`${jobId}.mp4`}`
+    });
+  } catch (err) {
+    console.error('Error rendering video:', err);
+    res.status(500).send(`Error rendering video: ${err}`);
+  }
+});
+
+const port = parseInt(process.env.PORT) || 8080;
+app.listen(port, () => {
+  console.log(`listening on port ${port}`);
+});
+
+async function makeRenderRequest(variables: any, workerId: number, numWorkers: number) {
+    try {
+      const response = await axios.post(`${process.env.RENDER_WORKER_URL}`, {
+        variables,
+        workerId,
+        numWorkers
+      }, {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+  
+      return response.data;
+    } catch (error) {
+      console.error('Error making render request:', error);
+    }
+  }
+  

package/examples/google-cloud-run-parallelized/render-orchestrator/src/revideo.d.ts

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

package/examples/google-cloud-run-parallelized/render-orchestrator/tsconfig.json

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

package/examples/google-cloud-run-parallelized/render-worker/.gcloudignore

@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+node_modules
+#!include:.gitignore

package/examples/google-cloud-run-parallelized/render-worker/.puppeteerrc.cjs

@@ -0,0 +1,9 @@
+const { join } = require('path');
+
+/**
+ * @type {import("puppeteer").Configuration}
+ */
+module.exports = {
+  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
+};
+// [END monitoring_synthetic_monitoring_custom_puppeteer_cjs]

package/examples/google-cloud-run-parallelized/render-worker/package.json

@@ -0,0 +1,30 @@
+{
+  "main": "dist/index.js",
+  "scripts": {
+    "editor": "vite",
+    "build": "tsc",
+    "start": "functions-framework --target=render-worker",
+    "prestart": "npm run build",
+    "gcp-build": "node node_modules/puppeteer/install.mjs && npm run build"
+  },
+  "dependencies": {
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@ffprobe-installer/ffprobe": "^2.1.2",
+    "@google-cloud/functions-framework": "^3.4.0",
+    "@google-cloud/storage": "^7.11.0",
+    "@revideo/2d": "0.5.10",
+    "@revideo/cli": "0.5.10",
+    "@revideo/core": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/ui": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
+    "@types/express": "^4.17.21",
+    "@types/uuid": "^9.0.8",
+    "express": "^4.19.2",
+    "puppeteer": "^22.9.0",
+    "typescript": "5.5.4",
+    "uuid": "^9.0.1",
+    "vite": "^4.5"
+  }
+}

package/examples/google-cloud-run-parallelized/render-worker/src/index.ts

@@ -0,0 +1,45 @@
+import * as ff from '@google-cloud/functions-framework';
+import { renderPartialVideo } from '@revideo/renderer';
+import { Storage } from '@google-cloud/storage';
+import { v4 as uuidv4 } from 'uuid';
+import * as fs from 'fs';
+
+const storage = new Storage();  
+
+ff.http('render-worker', async (req: ff.Request, res: ff.Response) => {
+    try {
+        const { workerId, numWorkers, variables } = req.body;
+        const jobId = uuidv4();
+            
+        console.log("Rendering video...")
+        const {audioFile, videoFile} = await renderPartialVideo({
+          projectFile: "./src/project.ts", 
+          workerId, 
+          numWorkers, 
+          variables, 
+          settings: { outFile: `${jobId}.mp4`, logProgress: true, puppeteer: { args: ['--no-sandbox', '--disable-setuid-sandbox'] }}
+        });
+        
+        const audioFileName = `${jobId}-audio.mp3`;
+        const audioFileBuffer = fs.readFileSync(audioFile);
+        const audioFileUploadPromise = storage.bucket(process.env.GCP_BUCKET_NAME || "").file(audioFileName).save(audioFileBuffer);
+        
+        const videoFileName = `${jobId}-video.mp4`;
+        const videoFileBuffer = fs.readFileSync(videoFile);
+        const videoFileUploadPromise = storage.bucket(process.env.GCP_BUCKET_NAME || "").file(videoFileName).save(videoFileBuffer);
+
+        await Promise.all([audioFileUploadPromise, videoFileUploadPromise]);
+        const audioFileUrl = `https://storage.googleapis.com/${process.env.GCP_BUCKET_NAME || ""}/${audioFileName}`;
+        const videoFileUrl = `https://storage.googleapis.com/${process.env.GCP_BUCKET_NAME || ""}/${videoFileName}`;    
+        
+        console.log("done");
+        res.status(200).json({
+          audioUrl: audioFileUrl,
+          videoUrl: videoFileUrl
+        });
+    
+      } catch (err) {
+        console.error('Error rendering video:', err);
+        res.status(500).send(`Error rendering video: ${err}`);
+      }
+});

package/examples/google-cloud-run-parallelized/render-worker/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/wasm",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/examples/google-cloud-run-parallelized/render-worker/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/google-cloud-run-parallelized/render-worker/src/render.ts

@@ -0,0 +1,14 @@
+import {renderVideo} from '@revideo/renderer';
+
+async function render() {
+  console.log('Rendering video...');
+
+  const file = await renderVideo({
+    projectFile: './src/project.ts',
+    settings: {logProgress: true}
+    });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/google-cloud-run-parallelized/render-worker/src/revideo.d.ts

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

package/examples/google-cloud-run-parallelized/render-worker/src/scenes/example.tsx

@@ -0,0 +1,30 @@
+import {Audio, Txt, Video, makeScene2D} from '@revideo/2d';
+import {all, chain, createRef, waitFor, useScene} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+  const textRef = createRef<Txt>();
+
+  yield view.add(
+    <>
+      <Video
+        src={'https://revideo-example-assets.s3.amazonaws.com/beach-3.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(
+    <Txt fontFamily={"Sans-Serif"} fill={"white"} fontSize={10} ref={textRef}>Hello {useScene().variables.get("username", "user")()}</Txt>
+  );
+
+  yield* textRef().scale(10, 1);
+  yield* waitFor(30);
+});

package/examples/google-cloud-run-parallelized/render-worker/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+    "compilerOptions": {
+      "target": "es2016",
+      "module": "commonjs",
+      "esModuleInterop": true,
+      "strict": true,
+      "outDir": "dist",
+      "noEmit": false
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules"]
+  }