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

package/examples/minimal-drag-drop/revideo/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "revideo",
+  "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/minimal-drag-drop/revideo/src/global.css

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

package/examples/minimal-drag-drop/revideo/src/project.meta

@@ -0,0 +1,28 @@
+{
+  "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/core/wasm",
+      "options": {}
+    }
+  }
+}

package/examples/minimal-drag-drop/revideo/src/project.ts

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

package/examples/minimal-drag-drop/revideo/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/minimal-drag-drop/revideo/src/revideo.d.ts

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

package/examples/minimal-drag-drop/revideo/src/scenes/example.meta

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

package/examples/minimal-drag-drop/revideo/src/scenes/example.tsx

@@ -0,0 +1,44 @@
+import {Video, Txt, makeScene2D} from '@revideo/2d';
+import {
+    createRef,
+    Reference,
+    useScene, chain,
+  waitFor,
+} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+    const nodesObj = useScene().variables.get("nodes", {})() as Record<string, any>;
+    const nodes = new Map(Object.entries(nodesObj));
+  
+    yield view.add(
+      <Video
+        src="https://revideo-example-assets.s3.amazonaws.com/stars.mp4"
+        size={"100%"}
+        key={'data-video'}
+		play={true}
+      />
+    );
+  
+    const refs: Array<Reference<Txt>> = [];
+    if (nodes.size > 0) {
+      for (const [key, node] of nodes) {
+        const ref = createRef<Txt>();
+        yield view.add(
+          <Txt
+            key={key}
+            text={node.text}
+            fontSize={100}
+            fontWeight={800}
+			fontFamily={"Roboto"}
+            fill={"white"}
+            x={() => node.x}
+            y={() => node.y}
+            ref={ref}
+          />
+        )
+        refs.push(ref);
+      }
+    }
+  
+    yield* waitFor(5);
+  });

package/examples/minimal-drag-drop/revideo/tsconfig.json

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

package/examples/minimal-drag-drop/revideo/vite.config.ts

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

package/examples/parallelized-aws-lambda/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+package-lock.json

package/examples/parallelized-aws-lambda/Dockerfile

@@ -0,0 +1,21 @@
+   FROM docker.io/revideo/aws-lambda-base-image:latest
+   
+   COPY ./revideo-project/ ./
+
+   RUN npm install
+
+   RUN node node_modules/puppeteer/install.mjs
+
+   RUN npx tsc && cp dist/lambda.js ./
+
+   ENV ROLLUP_CACHE=/tmp/rollup_cache
+
+   RUN npm run build
+
+   ENV FFMPEG_PATH=/var/task/node_modules/@ffmpeg-installer/linux-x64/ffmpeg
+
+   ENV HOME=/tmp
+
+   ENV DONT_WRITE_TO_META_FILES=true
+
+   CMD ["lambda.handler"]

package/examples/parallelized-aws-lambda/Dockerfile.base

@@ -0,0 +1,64 @@
+   FROM public.ecr.aws/lambda/nodejs:18
+
+   RUN yum update -y && yum 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 \
+    libxfixes3
+
+   RUN yum update -y && yum install -y \
+    alsa-lib \
+    at-spi2-atk \
+    atk \
+    cups-libs \
+    gtk3 \
+    ipa-gothic-fonts \
+    libXcomposite \
+    libXcursor \
+    libXdamage \
+    libXext \
+    libXi \
+    libXrandr \
+    libXScrnSaver \
+    libXtst \
+    pango \
+    xorg-x11-fonts-100dpi \
+    xorg-x11-fonts-75dpi \
+    xorg-x11-fonts-cyrillic \
+    xorg-x11-fonts-misc \
+    xorg-x11-fonts-Type1 \
+    xorg-x11-utils \
+    nss \
+    libX11 \
+    GConf2 \
+    dbus-glib \
+    dbus-libs \
+    libXrender \
+    libxcb \
+    libdrm \
+    libxshmfence \
+    mesa-libgbm \
+    libatk \
+    libxkbcommon 
+
+   RUN curl -L https://github.com/eugeneware/ffmpeg-static/releases/download/b6.0/ffprobe-linux-x64 -o 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

package/examples/parallelized-aws-lambda/README.md

@@ -0,0 +1,197 @@
+# Parallelized Rendering with AWS Lambda
+
+This example project demonstrates how you can perform parallelized rendering of Revideo projects using AWS Lambda and comes with docker images for Revideo (specifically for running Revideo on Lambda). 
+
+The code inside of `/revideo-project` has the same structure as any revideo project. Additionally, it contains the `src/lambda.ts` file which defines a handler for a lambda function. Within this repository, we also have two Docker images:
+
+- `Dockerfile.base` is a base image that sets up the environment required to run Revideo on Lambda. A built image can already be found at `docker.io/revideo/aws-lambda-base-image:latest`, the Dockerfile is only included for reference.
+- `Dockerfile` uses `Dockerfile.base` as a base image and builds the Revideo project inside of `revideo-project`. You should build this image yourself to use it with AWS Lambda.
+
+
+## How it works
+
+The handler that gets executed when the lambda function is invoked can be found in `./src/lambda.ts`. This handler does the following:
+
+- when the handler receives a request with a `"jobType": "fullRender"` argument, it invokes itself `numWorkers` of times with `"jobType": "partialRender"`.
+- each lambda function called with `"jobType": "partialRender"` will call `renderPartialVideo` to render a part of the video. The result will be uploaded to an AWS bucket.
+- the main lambda function will await all partial render jobs and then merge their results. The resulting full video gets uploaded to the same AWS bucket.
+
+## Getting Started
+
+To deploy the example project to AWS Lambda, clone this repository and make sure that you have the AWS CLI and Docker installed. Then, follow these steps: 
+
+### Create a public AWS bucket
+
+First, create a bucket:
+
+```
+aws s3api create-bucket --bucket your-bucket-name --region your-region
+```
+
+Now apply a bucket policy that makes the bucket public and lets your user write to it:
+
+```
+aws s3api put-bucket-policy --bucket your-bucket-name --policy file://policy.json
+```
+
+Here, `policy.json` refers to a file that contains the configuration below - note that `<your-user-arn>` should be replaced with the ARN of your user:
+
+```json
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "AddPerm",
+            "Effect": "Allow",
+            "Principal": "*",
+            "Action": "s3:GetObject",
+            "Resource": "arn:aws:s3:::your-bucket-name/*"
+        },
+                {
+            "Sid": "AllowUserToWriteObjects",
+            "Effect": "Allow",
+            "Principal": {
+                "AWS": "<your-user-arn>"
+            },
+            "Action": "s3:PutObject",
+            "Resource": "arn:aws:s3:::your-bucket-name/*"
+        }
+
+    ]
+}
+```
+
+### Configure an IAM role for your user
+
+You want to give the user the permission to write to buckets, invoke lambda functions and create logs in CloudWatch (in order to monitor the logs of your lambda function).
+
+To do so, create a role with the following policy attached:
+
+```json
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "0",
+            "Effect": "Allow",
+            "Action": [
+                "s3:ListAllMyBuckets"
+            ],
+            "Resource": [
+                "*"
+            ]
+        },
+        {
+            "Sid": "1",
+            "Effect": "Allow",
+            "Action": [
+                "s3:CreateBucket",
+                "s3:ListBucket",
+                "s3:PutBucketAcl",
+                "s3:GetObject",
+                "s3:DeleteObject",
+                "s3:PutObjectAcl",
+                "s3:PutObject",
+                "s3:GetBucketLocation"
+            ],
+            "Resource": [
+                "arn:aws:s3:::*"
+            ]
+        },
+        {
+            "Sid": "2",
+            "Effect": "Allow",
+            "Action": [
+                "lambda:InvokeFunction"
+            ],
+            "Resource": [
+                "arn:aws:lambda:*:*:function:*"
+            ]
+        },
+        {
+            "Sid": "3",
+            "Effect": "Allow",
+            "Action": [
+                "logs:CreateLogGroup"
+            ],
+            "Resource": [
+                "*"
+            ]
+        },
+        {
+            "Sid": "4",
+            "Effect": "Allow",
+            "Action": [
+                "logs:CreateLogStream",
+                "logs:PutLogEvents"
+            ],
+            "Resource": [
+                "*"
+            ]
+        }
+    ]
+}
+```
+
+Attach this role to the user that you have previously given the permission to write to your bucket.
+
+### Build the docker image and push it to ECR
+
+We want to upload our docker image to Amazon's container registry so that it is close to our lambda function. To create an ECR repository, run the following command:
+
+```
+aws ecr create-repository --repository-name my-revideo-project --region us-east-1
+```
+
+This will give you the URI of your ECR repository `<your-ecr-uri>`, which looks something like `0123456789.dkr.ecr.us-east-1.amazonaws.com/your-repo-name`.
+
+Now you can build the docker image. To do so, head to the folder in which our `Dockerfile` is present and run:
+
+```
+docker buildx build --progress=plain --platform linux/amd64 -t my-revideo-project:latest .
+```
+
+Now tag the image to upload it to ECR:
+
+```
+docker tag my-revideo-project:latest <your-ecr-uri>:latest
+```
+
+Finally, push the image to your repository:
+```
+docker push <your-ecr-uri>:latest
+```
+
+### Create a Lambda function from your docker image
+
+Finally, create a lambda function from your docker image:
+
+```
+aws lambda create-function \
+    --function-name my-revideo-render-function \
+    --package-type Image \
+    --code ImageUri=<your-ecr-uri>:latest \
+    --role <your-lambda-role-arn> \
+    --timeout 600 \
+    --memory-size 4096 \
+    --environment Variables={REVIDEO_BUCKET_NAME=your-bucket-name}
+```
+
+You should get a response in your terminal indicating that your function is being created.
+
+### Test your function
+
+To test your function, head to the Lambda tab in the AWS console. Now create a test event with the following arguments and use it to invoke your function:
+
+```
+{
+  "jobId": "12345",
+  "numWorkers": 25,
+  "jobType": "fullRender",
+  "variables": {"message": "Hello from Revideo!"}
+}
+```
+
+The function should run and return a url to the rendered video inside your bucket.
+
+**Note: The first time after an image is uploaded to ECR, the function may take longer to execute, but after the first time, executions are faster, even when you have long breaks between executions. You can read more about why this happens [here](https://brooker.co.za/blog/2023/05/23/snapshot-loading.html).**

package/examples/parallelized-aws-lambda/revideo-project/.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]