From 7f7cdf5b2b7599a338b95b19bd266cc1496b09e4 Mon Sep 17 00:00:00 2001 From: Jonny Burger Date: Mon, 23 Dec 2024 15:48:00 +0100 Subject: [PATCH 1/2] Improve Lambda functionality in templates Use better defaults overall --- .../template-next-app-tailwind/deploy.mjs | 1 + packages/template-next-app/deploy.mjs | 1 + packages/template-next-pages/deploy.mjs | 1 + packages/template-remix/app/deploy.ts | 4 ++- .../app/lib/get-function-name.ts | 9 ------- .../app/lib/render-video.server.ts | 25 +++++++++++++++---- .../template-remix/app/remotion/constants.ts | 2 +- .../template-remix/app/routes/progress.tsx | 13 +++++++--- 8 files changed, 37 insertions(+), 19 deletions(-) delete mode 100644 packages/template-remix/app/lib/get-function-name.ts diff --git a/packages/template-next-app-tailwind/deploy.mjs b/packages/template-next-app-tailwind/deploy.mjs index 6c4358522f4..c8d0825190f 100644 --- a/packages/template-next-app-tailwind/deploy.mjs +++ b/packages/template-next-app-tailwind/deploy.mjs @@ -44,6 +44,7 @@ const { functionName, alreadyExisted: functionAlreadyExisted } = region: REGION, timeoutInSeconds: TIMEOUT, diskSizeInMb: DISK, + enableV5Runtime: true, }); console.log( functionName, diff --git a/packages/template-next-app/deploy.mjs b/packages/template-next-app/deploy.mjs index a8cbca25ba5..2eefb40d936 100644 --- a/packages/template-next-app/deploy.mjs +++ b/packages/template-next-app/deploy.mjs @@ -43,6 +43,7 @@ const { functionName, alreadyExisted: functionAlreadyExisted } = region: REGION, timeoutInSeconds: TIMEOUT, diskSizeInMb: DISK, + enableV5Runtime: true, }); console.log( functionName, diff --git a/packages/template-next-pages/deploy.mjs b/packages/template-next-pages/deploy.mjs index a8cbca25ba5..2eefb40d936 100644 --- a/packages/template-next-pages/deploy.mjs +++ b/packages/template-next-pages/deploy.mjs @@ -43,6 +43,7 @@ const { functionName, alreadyExisted: functionAlreadyExisted } = region: REGION, timeoutInSeconds: TIMEOUT, diskSizeInMb: DISK, + enableV5Runtime: true, }); console.log( functionName, diff --git a/packages/template-remix/app/deploy.ts b/packages/template-remix/app/deploy.ts index 49cd5edea77..f34f05050cc 100644 --- a/packages/template-remix/app/deploy.ts +++ b/packages/template-remix/app/deploy.ts @@ -6,7 +6,7 @@ import { } from "@remotion/lambda"; import dotenv from "dotenv"; import path from "path"; -import { RAM, TIMEOUT, SITE_NAME } from "./remotion/constants"; +import { RAM, TIMEOUT, SITE_NAME, DISK } from "./remotion/constants"; dotenv.config(); @@ -19,7 +19,9 @@ const run = async () => { createCloudWatchLogGroup: true, memorySizeInMb: RAM, region, + diskSizeInMb: DISK, timeoutInSeconds: TIMEOUT, + enableV5Runtime: true, }); console.log( `${alreadyExisted ? "Ensured" : "Deployed"} function "${functionName}"`, diff --git a/packages/template-remix/app/lib/get-function-name.ts b/packages/template-remix/app/lib/get-function-name.ts deleted file mode 100644 index 59c7543bbf3..00000000000 --- a/packages/template-remix/app/lib/get-function-name.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { RAM, DISK, TIMEOUT } from "app/remotion/constants"; -import { VERSION } from "remotion"; - -export const speculateFunctionName = () => { - return `remotion-render-${VERSION.replace( - /\./g, - "-", - )}-mem${RAM}mb-disk${DISK}mb-${TIMEOUT}sec`; -}; diff --git a/packages/template-remix/app/lib/render-video.server.ts b/packages/template-remix/app/lib/render-video.server.ts index 15456a80364..37d9beaf2ca 100644 --- a/packages/template-remix/app/lib/render-video.server.ts +++ b/packages/template-remix/app/lib/render-video.server.ts @@ -1,8 +1,15 @@ import type { AwsRegion } from "@remotion/lambda"; -import { renderMediaOnLambda } from "@remotion/lambda/client"; -import { speculateFunctionName } from "./get-function-name"; +import { + renderMediaOnLambda, + speculateFunctionName, +} from "@remotion/lambda/client"; import type { RenderResponse } from "./types"; -import type { LogoAnimationProps } from "app/remotion/constants"; +import { + DISK, + RAM, + TIMEOUT, + type LogoAnimationProps, +} from "app/remotion/constants"; export const renderVideo = async ({ serveUrl, @@ -24,7 +31,11 @@ export const renderVideo = async ({ const { renderId, bucketName } = await renderMediaOnLambda({ region, - functionName: speculateFunctionName(), + functionName: speculateFunctionName({ + diskSizeInMb: DISK, + memorySizeInMb: RAM, + timeoutInSeconds: TIMEOUT, + }), serveUrl, composition, inputProps, @@ -39,7 +50,11 @@ export const renderVideo = async ({ return { renderId, bucketName, - functionName: speculateFunctionName(), + functionName: speculateFunctionName({ + diskSizeInMb: DISK, + memorySizeInMb: RAM, + timeoutInSeconds: TIMEOUT, + }), region, }; }; diff --git a/packages/template-remix/app/remotion/constants.ts b/packages/template-remix/app/remotion/constants.ts index 8eb3e367e5e..a66f0221b89 100644 --- a/packages/template-remix/app/remotion/constants.ts +++ b/packages/template-remix/app/remotion/constants.ts @@ -6,7 +6,7 @@ export const COMPOSITION_WIDTH = 1920; export const COMPOSITION_HEIGHT = 1080; export const COMPOSITION_ID = "LogoAnimation"; export const RAM = 2048; -export const DISK = 2048; +export const DISK = 10240; export const TIMEOUT = 240; export const SITE_NAME = "remotion-remix-example-" + VERSION; diff --git a/packages/template-remix/app/routes/progress.tsx b/packages/template-remix/app/routes/progress.tsx index d0252cca4bf..22b007965e3 100644 --- a/packages/template-remix/app/routes/progress.tsx +++ b/packages/template-remix/app/routes/progress.tsx @@ -1,9 +1,12 @@ import type { ActionFunction } from "@remix-run/node"; import { json } from "@remix-run/node"; import type { AwsRegion } from "@remotion/lambda"; -import { getRenderProgress } from "@remotion/lambda/client"; -import { speculateFunctionName } from "app/lib/get-function-name"; +import { + getRenderProgress, + speculateFunctionName, +} from "@remotion/lambda/client"; import type { StatusResponse } from "../lib/types"; +import { DISK, RAM, TIMEOUT } from "~/remotion/constants"; export const action: ActionFunction = async ({ request }) => { const body = await request.formData(); @@ -29,7 +32,11 @@ export const action: ActionFunction = async ({ request }) => { { renderId, bucketName, - functionName: speculateFunctionName(), + functionName: speculateFunctionName({ + diskSizeInMb: DISK, + memorySizeInMb: RAM, + timeoutInSeconds: TIMEOUT, + }), region, }, ); From a17988daa2e4e3ab8c6a10a5bf806a25878140c1 Mon Sep 17 00:00:00 2001 From: Jonny Burger Date: Mon, 23 Dec 2024 16:25:18 +0100 Subject: [PATCH 2/2] Update README.md --- packages/template-tiktok/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/template-tiktok/README.md b/packages/template-tiktok/README.md index 6d8a2de3fe4..b35237a10e1 100644 --- a/packages/template-tiktok/README.md +++ b/packages/template-tiktok/README.md @@ -66,6 +66,11 @@ Captioning will download Whisper.cpp and the 1.5GB big `medium.en` model. To con To support non-English languages, you need to change the `WHISPER_MODEL` variable in `whisper-config.mjs` to a model that does not have a `.en` sufix. +## Rendering on Lambda + +If you plan on deploying this template to Lambda, make sure to enable the [`--enable-v5-runtime`](https://www.remotion.dev/docs/lambda/cli/functions#--enable-v5-runtime) flag. +This will enable a Chrome version which supports the `paint-order` CSS property that is required for this template to render properly. + ## Docs Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).