@twick/cloud-export-video 0.14.8

package/README.md

@@ -0,0 +1,56 @@
+## @twick/cloud-export-video
+
+Reusable cloud-function package for exporting Twick videos. Includes a core renderer and platform templates for AWS Lambda container images.
+
+### Install
+
+```bash
+npm install -D @twick/cloud-export-video
+```
+
+### CLI
+
+```bash
+npx twick-export-video help
+```
+
+Commands:
+
+- `init [dir]`: Scaffold AWS container template (Dockerfile + handler) into `[dir]` (default `./twick-export-video-aws`). Also writes a minimal `package.json` that depends on this package.
+- `build <image> [dir]`: Build a Docker image from `[dir]` (default `./twick-export-video-aws`).
+- `ecr-login <region> <accountId>`: Log in Docker to your AWS ECR registry.
+- `push <image> <region> <accountId>`: Tag and push the image to ECR. The repository must already exist.
+
+### Typical flow
+
+```bash
+# 1) Scaffold
+npx twick-export-video init
+
+# 2) Build an image
+npx twick-export-video build twick-export-video:latest
+
+# 3) Login to ECR
+npx twick-export-video ecr-login us-east-1 123456789012
+
+# 4) Push (assumes an ECR repo named `twick-export-video` exists)
+npx twick-export-video push twick-export-video:latest us-east-1 123456789012
+```
+
+### AWS Lambda (container) notes
+
+- The Dockerfile is based on `revideo/aws-lambda-base-image` and prepares Chromium and ffmpeg for headless rendering.
+- The handler expects an `event.arguments.input` payload with `{ project, mediaFiles? }`.
+- The response is a `video/mp4` base64 body, or a text file on error.
+
+### Programmatic usage
+
+The core renderer is exported at `core/renderer.js`:
+
+```js
+import renderTwickVideo from '@twick/cloud-export-video/core/renderer.js';
+
+const resultPath = await renderTwickVideo(project, { outFile: 'my.mp4' });
+```
+
+

package/bin/twick-export-video.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import fs from 'fs';
+import { spawn } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const pkgRoot = join(__dirname, '..');
+
+function copyTemplate(destDir) {
+  const templateDir = join(pkgRoot, 'platform', 'aws');
+  if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
+
+  for (const name of ['Dockerfile', 'handler.js']) {
+    const src = join(templateDir, name);
+    const dest = join(destDir, name);
+    fs.copyFileSync(src, dest);
+  }
+
+  // Minimal package.json to enable docker layer caching (npm ci)
+  const pkgJsonPath = join(destDir, 'package.json');
+  if (!fs.existsSync(pkgJsonPath)) {
+    const pkg = {
+      name: 'twick-export-video-runtime',
+      private: true,
+      type: 'module',
+      dependencies: {
+        '@twick/cloud-export-video': 'latest',
+        puppeteer: '^22.8.0',
+        '@ffmpeg-installer/ffmpeg': '^1.1.0'
+      }
+    };
+    fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, 2));
+  }
+}
+
+function run(cmd, args, opts = {}) {
+  return new Promise((resolve, reject) => {
+    const ps = typeof cmd === 'string' && Array.isArray(args) && args.length === 0
+      ? spawn(cmd, { stdio: 'inherit', shell: true, ...opts })
+      : spawn(cmd, args, { stdio: 'inherit', shell: true, ...opts });
+    ps.on('close', (code) => (code === 0 ? resolve() : reject(new Error(`${cmd} exited ${code}`))));
+  });
+}
+
+async function main() {
+  const [command, ...rest] = process.argv.slice(2);
+
+  if (!command || ['-h', '--help', 'help'].includes(command)) {
+    console.log(`
+Usage: twick-export-video <command> [options]
+
+Commands:
+  init [dir]             Scaffold AWS container template into [dir] (default: ./twick-export-video-aws)
+  build <image> [dir]    Docker build image from [dir] (default: ./twick-export-video-aws)
+  ecr-login <region> <accountId>  Login docker to ECR
+  push <image> <region> <accountId>  Push image to ECR (repo must exist)
+
+Examples:
+  twick-export-video init
+  twick-export-video build my-repo:latest
+  twick-export-video ecr-login us-east-1 123456789012
+  twick-export-video push my-repo:latest us-east-1 123456789012
+`);
+    return;
+  }
+
+  if (command === 'init') {
+    const dir = rest[0] || 'twick-export-video-aws';
+    copyTemplate(dir);
+    console.log(`✔ Scaffolded AWS runtime into ./${dir}`);
+    return;
+  }
+
+  if (command === 'build') {
+    const image = rest[0];
+    const dir = rest[1] || 'twick-export-video-aws';
+    if (!image) throw new Error('Image name required. e.g., my-repo:latest');
+    await run('docker', ['build', '-t', image, dir]);
+    return;
+  }
+
+  if (command === 'ecr-login') {
+    const region = rest[0];
+    const accountId = rest[1];
+    if (!region || !accountId) throw new Error('Usage: ecr-login <region> <accountId>');
+    const registry = `${accountId}.dkr.ecr.${region}.amazonaws.com`;
+    await run(`aws ecr get-login-password --region ${region} | docker login --username AWS --password-stdin ${registry}`, []);
+    return;
+  }
+
+  if (command === 'push') {
+    const image = rest[0];
+    const region = rest[1];
+    const accountId = rest[2];
+    if (!image || !region || !accountId) throw new Error('Usage: push <image> <region> <accountId>');
+    const [repo, tag = 'latest'] = image.split(':');
+    const registry = `${accountId}.dkr.ecr.${region}.amazonaws.com`;
+    const remote = `${registry}/${repo}:${tag}`;
+    await run('docker', ['tag', `${repo}:${tag}`, remote]);
+    await run('docker', ['push', remote]);
+    console.log(`✔ Pushed ${remote}`);
+    return;
+  }
+
+  throw new Error(`Unknown command: ${command}`);
+}
+
+main().catch((err) => {
+  console.error(err.message || err);
+  process.exit(1);
+});
+
+

package/core/renderer.js

@@ -0,0 +1,74 @@
+import { renderVideo } from "@twick/renderer";
+import chromium from "@sparticuz/chromium";
+import ffmpegPath from "ffmpeg-static";
+import ffmpeg from "fluent-ffmpeg";
+
+chromium.setHeadlessMode = true;
+ffmpeg.setFfmpegPath(ffmpegPath);
+
+/**
+ * Renders a Twick video with the provided variables and settings.
+ * Processes project variables, merges settings with defaults, and
+ * generates a video file using the Twick renderer.
+ *
+ * @param {Object} variables - Project variables containing input configuration
+ * @param {Object} settings - Optional render settings to override defaults
+ * @returns {Promise<string>} Promise resolving to the path of the rendered video file
+ *
+ * @example
+ * ```js
+ * const videoPath = await renderTwickVideo(
+ *   { input: { properties: { width: 1920, height: 1080 } } },
+ *   { outFile: "my-video.mp4" }
+ * );
+ * // videoPath = "./output/my-video.mp4"
+ * ```
+ */
+const renderTwickVideo = async (variables, settings) => {
+  try {
+    // Merge user settings with defaults
+    const mergedSettings = {
+      logProgress: true,
+      viteBasePort: 5173,
+      outDir: "/tmp/output",
+      viteConfig: { cacheDir: "/tmp/.vite" },
+      projectSettings: {
+        exporter: {
+          name: "@twick/core/wasm",
+        },
+        size: {
+          x: variables.properties.width,
+          y: variables.properties.height,
+        },
+      },
+      puppeteer: {
+        headless: chromium.headless,
+        executablePath: await chromium.executablePath(),
+        args: chromium.args.filter(
+          (arg) =>
+            !arg.startsWith("--single-process") &&
+            !arg.startsWith("--use-gl=angle") &&
+            !arg.startsWith("--use-angle=swiftshader") &&
+            !arg.startsWith("--disable-features=")
+        ),
+      },
+      ...settings, // Allow user settings to override defaults
+    };
+
+    const result = await renderVideo({
+      projectFile: "@twick/visualizer/dist/project.js",
+      variables: variables,
+      settings: mergedSettings,
+    });
+
+    console.log("renderVideo Executed:");
+    console.log("Render result:", result);
+
+    return result;
+  } catch (error) {
+    console.error("Render error:", error);
+    throw error;
+  }
+};
+
+export default renderTwickVideo;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@twick/cloud-export-video",
+  "version": "0.14.8",
+  "description": "Twick cloud function for exporting video with platform-specific templates (AWS Lambda container)",
+  "type": "module",
+  "main": "core/renderer.js",
+  "exports": {
+    ".": "./core/renderer.js",
+    "./aws": "./platform/aws/handler.js",
+    "./platform/aws/*": "./platform/aws/*"
+  },
+  "bin": {
+    "twick-export-video": "bin/twick-export-video.js"
+  },
+  "files": [
+    "core",
+    "platform",
+    "bin",
+    "README.md"
+  ],
+  "scripts": {
+    "verify:aws": "node -e \"require('fs').accessSync('platform/aws/Dockerfile'); require('fs').accessSync('platform/aws/handler.js'); console.log('AWS platform assets present')\"",
+    "pack:aws": "npm run verify:aws && npm pack",
+    "release:aws": "npm run verify:aws && npm publish --access public --tag aws",
+    "prepublishOnly": "npm run verify:aws"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "aws"
+  },
+  "keywords": [
+    "twick",
+    "video",
+    "export",
+    "lambda",
+    "aws",
+    "docker"
+  ],
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@sparticuz/chromium": "^129.0.0",
+    "@twick/2d": "0.14.8",
+    "@twick/core": "0.14.8",
+    "@twick/ffmpeg": "0.14.8",
+    "@twick/renderer": "0.14.8",
+    "@twick/ui": "0.14.8",
+    "@twick/vite-plugin": "0.14.8",
+    "@twick/visualizer": "0.14.8",
+    "ffmpeg-static": "^5.2.0",
+    "fluent-ffmpeg": "^2.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.4.5"
+  },
+  "peerDependencies": {
+    "puppeteer": ">=22"
+  }
+}

package/platform/aws/Dockerfile

@@ -0,0 +1,25 @@
+FROM docker.io/revideo/aws-lambda-base-image:latest
+
+# Copy package files for better caching
+COPY package.json package-lock.json* ./
+
+RUN npm install
+
+RUN npx puppeteer browsers install chrome
+
+# Copy source code
+COPY . ./
+
+
+# Install Puppeteer (if needed)
+RUN node node_modules/puppeteer/install.mjs
+
+ENV ROLLUP_CACHE=/tmp/rollup_cache
+
+ENV FFMPEG_PATH=/var/task/node_modules/@ffmpeg-installer/linux-x64/ffmpeg
+
+ENV HOME=/tmp
+
+ENV DONT_WRITE_TO_META_FILES=true
+
+CMD ["platform/aws/handler.handler"]

package/platform/aws/handler.js

@@ -0,0 +1,141 @@
+import renderTwickVideo from '../../core/renderer.js';
+
+/**
+ * Handler for processing video project data with files
+ * 
+ * Expected JSON payload:
+ * {
+ *   "project": { ... }, // Video project JSON object
+ *   "mediaFiles": [     // Optional array of base64-encoded files
+ *     {
+ *       "filename": "video.mp4",
+ *       "contentType": "video/mp4", 
+ *       "data": "base64-encoded-content"
+ *     }
+ *   ]
+ * }
+ * 
+ * Returns: Processing result with video file
+ */
+
+export const handler = async (event) => {
+  console.log('Video processor function invoked');
+  console.log('Event:', JSON.stringify(event));
+  const projectData = event.arguments?.input || {};
+  
+  try {
+    // Validate required fields
+    if (!projectData) {
+      return {
+        statusCode: 400,
+        headers: {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+        },
+        body: JSON.stringify({
+          error: 'Missing required field: project',
+          expectedFormat: {
+            project: 'Video project JSON object',
+            mediaFiles: 'Optional array of base64-encoded files'
+          }
+        }),
+      };
+    }
+
+    const mediaFiles = projectData.mediaFiles || [];
+    
+    // Log each media file
+    mediaFiles.forEach((file, index) => {
+      console.log(`Media file ${index + 1}:`, {
+        filename: file.filename,
+        contentType: file.contentType,
+        size: file.data ? Buffer.from(file.data, 'base64').length : 0
+      });
+    });
+
+    // Render the video using Twick renderer
+    console.log('Starting video rendering...' );
+    
+    let renderedVideoPath;
+    let videoBuffer;
+    
+    try {
+      // Render the video
+      renderedVideoPath = await renderTwickVideo(projectData, {
+        outFile: `video-${projectData.properties?.id || Date.now()}.mp4`,
+      });
+
+      // Read the rendered video file
+      const fs = await import('fs');
+      videoBuffer = fs.readFileSync(renderedVideoPath);
+
+      console.log('Video rendered successfully:', renderedVideoPath);
+      console.log('Video size:', videoBuffer.length, 'bytes');
+
+      // Clean up the temporary file
+      try {
+        fs.unlinkSync(renderedVideoPath);
+        console.log('Temporary video file cleaned up');
+      } catch (cleanupError) {
+        console.warn('Failed to clean up temporary file:', cleanupError);
+      }
+
+    } catch (renderError) {
+      console.error('Video rendering failed:', renderError);
+      
+      // Fallback to text file if rendering fails
+      const errorText = `Video Processing Error
+======================
+Request ID: ${projectData.properties?.id || 'N/A'}
+Timestamp: ${new Date().toISOString()}
+Status: Rendering Failed
+
+Error: ${renderError instanceof Error ? renderError.message : 'Unknown error'}
+
+Media Files Received: ${mediaFiles.length}
+${mediaFiles.map((file, index) => `  ${index + 1}. ${file.filename} (${file.data ? Buffer.from(file.data, 'base64').length : 0} bytes)`).join('\n')}
+`;
+
+      return {
+        statusCode: 500,
+        headers: {
+          'Content-Type': 'text/plain',
+          'Content-Disposition': 'attachment; filename="error.txt"',
+          'Access-Control-Allow-Origin': '*',
+        },
+        body: errorText,
+      };
+    }
+
+    // Return the video file
+    return {
+      statusCode: 200,
+      headers: {
+        'Content-Type': 'video/mp4',
+        'Content-Disposition': `attachment; filename="processed-video.mp4"`,
+        'Content-Length': videoBuffer.length,
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Content-Type',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      },
+      body: videoBuffer.toString('base64'),
+      isBase64Encoded: true,
+    };
+  } catch (error) {
+    console.error('Error processing video project:', error);
+    
+    return {
+      statusCode: 500,
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Content-Type',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      },
+      body: JSON.stringify({
+        error: 'Internal server error',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }),
+    };
+  }
+};