@shun-js/remotion-server 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shun-js/remotion-server",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "remotion.cool server",
   "license": "MIT",
   "author": "uikoo9 <uikoo9@qq.com>",
@@ -17,6 +17,9 @@
     "app.js"
   ],
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.978.0",
+    "@remotion/bundler": "^4.0.414",
+    "@remotion/renderer": "^4.0.414",
     "@shun-js/shun-config": "^0.3.1",
     "@shun-js/shun-service": "^0.3.1",
     "@supabase/supabase-js": "^2.93.3",
@@ -29,5 +32,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "57002ceae251dc249f02b53238df64377194928d"
+  "gitHead": "260326ec9d0cb743db2fb84bb240828ee4caab84"
 }

package/server/model/RemotionModel.js

@@ -1,5 +1,6 @@
 // supabase
 const { createClient } = require('@supabase/supabase-js');
+const supabase = createClient(global.QZ_CONFIG.SUPABASE_URL, global.QZ_CONFIG.SUPABASE_SERVICE_KEY);
 
 // logger
 const Logger = require('qiao-log');
@@ -12,10 +13,8 @@ const logger = Logger(logOptions);
  */
 exports.fetchPendingWorks = async () => {
   const methodName = 'fetchPendingWorks';
-  try {
-    // supabase
-    const supabase = createClient(global.QZ_CONFIG.SUPABASE_URL, global.QZ_CONFIG.SUPABASE_SERVICE_KEY);
 
+  try {
     // query
     const { data, error } = await supabase.rpc('get_pending_works_locked', {
       max_count: 1,
@@ -34,3 +33,26 @@ exports.fetchPendingWorks = async () => {
     return [];
   }
 };
+
+/**
+ * 更新作品渲染状态
+ */
+exports.updateRenderStatus = async (workId, renderStatus, updates = {}) => {
+  const methodName = 'updateRenderStatus';
+  try {
+    const { error } = await supabase
+      .from('works')
+      .update({
+        render_status: renderStatus,
+        updated_at: new Date().toISOString(),
+        ...updates,
+      })
+      .eq('id', workId);
+
+    if (error) {
+      logger.error(methodName, `Error updating work ${workId} to ${renderStatus}:`, error);
+    }
+  } catch (error) {
+    logger.error(methodName, 'Unexpected error updating render status:', error);
+  }
+};

package/server/service/RemotionService.js

@@ -0,0 +1,32 @@
+// model
+const { fetchPendingWorks } = require('../model/RemotionModel.js');
+
+// go
+const { processWork } = require('../util/work.js');
+
+// logger
+const Logger = require('qiao-log');
+const logOptions = require('../log-options.js')();
+const logger = Logger(logOptions);
+
+/**
+ * genVideo
+ */
+exports.genVideo = async () => {
+  const methodName = 'genVideo';
+
+  // go
+  logger.info(methodName, 'start');
+
+  // rows
+  const rows = await fetchPendingWorks();
+  logger.info(methodName, 'rows', rows);
+  if (!rows || !rows.length) return;
+
+  // work
+  const work = rows[0];
+  await processWork(work);
+
+  // end
+  logger.info(methodName, 'end');
+};

package/server/task/RemotionTask.js

@@ -1,5 +1,5 @@
-// model
-const { fetchPendingWorks } = require('../model/RemotionModel.js');
+// service
+const { genVideo } = require('../service/RemotionService.js');
 
 // logger
 const Logger = require('qiao-log');
@@ -9,20 +9,18 @@ const logger = Logger(logOptions);
 // RemotionTask.js
 exports.runAndInit = true;
 exports.time = '* 1 * * *';
-exports.tick = async () => {
-  await genRemotionVideo();
-};
 
-// gen remotion video
-async function genRemotionVideo() {
-  const methodName = 'genRemotionVideo';
+// tick
+let start = false;
+exports.tick = async () => {
+  logger.info('start', start);
+  if (start) return;
 
-  // go
-  logger.info(methodName, 'start');
+  start = true;
+  logger.info('start', start);
 
-  const rows = await fetchPendingWorks();
-  console.log(rows);
+  await genVideo();
 
-  // end
-  logger.info(methodName, 'end');
-}
+  start = false;
+  logger.info('start', start);
+};

package/server/util/renderer.js

@@ -0,0 +1,122 @@
+// fs
+const fs = require('fs');
+const path = require('path');
+
+// remotion
+const { bundle } = require('@remotion/bundler');
+const { renderMedia, selectComposition } = require('@remotion/renderer');
+
+// logger
+const Logger = require('qiao-log');
+const logOptions = require('../log-options.js')();
+const logger = Logger(logOptions);
+
+/**
+ * 渲染 Remotion 视频
+ * @param {Object} options
+ * @param {string} options.sourceCode - 用户的 React 代码
+ * @param {string} options.outputPath - 输出视频路径
+ * @param {number} options.width - 视频宽度
+ * @param {number} options.height - 视频高度
+ * @param {number} options.fps - 帧率
+ */
+exports.renderVideo = async ({ sourceCode, outputPath, width, height, fps }) => {
+  const methodName = 'renderVideo';
+
+  // const
+  const tempDir = path.join(__dirname, 'temp', Date.now().toString());
+  const entryPoint = path.join(tempDir, 'src', 'Root.jsx');
+
+  try {
+    // 1. 创建临时项目结构
+    fs.mkdirSync(path.join(tempDir, 'src'), { recursive: true });
+
+    // 2. 写入用户代码
+    const wrappedCode = wrapUserCode(sourceCode);
+    fs.writeFileSync(entryPoint, wrappedCode);
+
+    // 3. 创建 package.json
+    const packageJson = {
+      name: 'temp-remotion-project',
+      version: '1.0.0',
+      dependencies: {
+        react: '^18.2.0',
+        remotion: '^4.0.0',
+      },
+    };
+    fs.writeFileSync(path.join(tempDir, 'package.json'), JSON.stringify(packageJson, null, 2));
+
+    // 4. Bundle 代码
+    logger.info(methodName, 'Bundling code...');
+    const bundleLocation = await bundle({
+      entryPoint,
+      webpackOverride: (config) => config,
+    });
+
+    // 5. 获取 composition
+    logger.info(methodName, 'Getting composition...');
+    const composition = await selectComposition({
+      serveUrl: bundleLocation,
+      id: 'MyComposition', // 默认 composition ID
+      inputProps: {},
+    });
+
+    // 6. 渲染视频
+    logger.info(methodName, 'Rendering frames...');
+    await renderMedia({
+      composition: {
+        ...composition,
+        width: width,
+        height: height,
+        fps: fps,
+        durationInFrames: composition.durationInFrames || 150, // 默认5秒
+      },
+      serveUrl: bundleLocation,
+      codec: 'h264',
+      outputLocation: outputPath,
+      inputProps: {},
+      onProgress: ({ progress }) => {
+        if (progress % 0.1 < 0.01) {
+          // 每10%打印一次
+          logger.info(`Render progress: ${(progress * 100).toFixed(1)}%`);
+        }
+      },
+    });
+
+    logger.info(methodName, 'Render completed');
+  } finally {
+    // 清理临时目录
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  }
+};
+
+/**
+ * 包装用户代码为 Remotion 项目
+ */
+function wrapUserCode(sourceCode) {
+  return `
+import React from 'react';
+import { Composition, AbsoluteFill, useCurrentFrame, interpolate, useVideoConfig } from 'remotion';
+
+// 用户代码
+${sourceCode}
+
+// Root 组件 - Remotion 入口
+export const RemotionRoot = () => {
+  return (
+    <>
+      <Composition
+        id="MyComposition"
+        component={MyComposition}
+        durationInFrames={150}
+        fps={30}
+        width={1920}
+        height={1080}
+      />
+    </>
+  );
+};
+`;
+}

package/server/util/uploader.js

@@ -0,0 +1,51 @@
+// fs
+const fs = require('fs');
+
+// s3
+const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');
+const s3Client = new S3Client({
+  region: 'auto',
+  endpoint: global.QZ_CONFIG.R2_ENDPOINT,
+  credentials: {
+    accessKeyId: global.QZ_CONFIG.R2_ACCESS_KEY_ID,
+    secretAccessKey: global.QZ_CONFIG.R2_SECRET_ACCESS_KEY,
+  },
+});
+
+// logger
+const Logger = require('qiao-log');
+const logOptions = require('../log-options.js')();
+const logger = Logger(logOptions);
+
+/**
+ * 上传文件到 Cloudflare R2
+ * @param {Object} options
+ * @param {string} options.filePath - 本地文件路径
+ * @param {string} options.workId - 作品 ID
+ * @returns {Promise<string>} 文件的��开 URL
+ */
+exports.uploadToR2 = async ({ filePath, workId }) => {
+  const methodName = 'uploadToR2';
+
+  // const
+  const fileName = `${workId}.mp4`;
+  const fileContent = fs.readFileSync(filePath);
+
+  // command
+  const command = new PutObjectCommand({
+    Bucket: global.QZ_CONFIG.R2_BUCKET_NAME,
+    Key: fileName,
+    Body: fileContent,
+    ContentType: 'video/mp4',
+  });
+
+  // go
+  try {
+    await s3Client.send(command);
+
+    // 返回公开 URL
+    return `${global.QZ_CONFIG.NEXT_PUBLIC_R2_PUBLIC_URL}/${fileName}`;
+  } catch (error) {
+    logger.error(methodName, 'Error uploading to R2:', error);
+  }
+};

package/server/util/work.js

@@ -0,0 +1,86 @@
+// fs
+const fs = require('fs');
+const path = require('path');
+
+// renderer
+const { renderVideo } = require('./renderer.js');
+
+// upload
+const { uploadToR2 } = require('./uploader.js');
+
+// model
+const { updateRenderStatus } = require('../model/RemotionModel.js');
+
+// logger
+const Logger = require('qiao-log');
+const logOptions = require('../log-options.js')();
+const logger = Logger(logOptions);
+
+/**
+ * processWork
+ * @param {*} work
+ */
+exports.processWork = async (work) => {
+  const methodName = 'processWork';
+
+  // const
+  const workId = work.id;
+  const outputPath = path.join(global.QZ_CONFIG.OUTPUT_DIR, `${workId}.mp4`);
+  logger.info(methodName, `\n[${new Date().toISOString()}] Processing work: ${workId}`);
+  logger.info(methodName, `Title: ${work.title}`);
+  logger.info(methodName, `Status: ${work.status}, Render Status: ${work.render_status}`);
+
+  try {
+    // 1. 渲染视频
+    logger.info(methodName, 'Rendering video...');
+    await renderVideo({
+      sourceCode: work.source_code,
+      outputPath,
+      width: work.width || 1920,
+      height: work.height || 1080,
+      fps: work.fps || 30,
+    });
+
+    logger.info(methodName, 'Video rendered successfully');
+
+    // 2. 上传到 R2
+    logger.info(methodName, 'Uploading to R2...');
+    const videoUrl = await uploadToR2({
+      filePath: outputPath,
+      workId: workId,
+    });
+
+    logger.info(methodName, 'Video uploaded:', videoUrl);
+
+    // 3. 获取视频信息
+    fs.statSync(outputPath);
+    const durationInFrames = Math.round(5 * (work.fps || 30)); // 暂时硬编码为5秒
+
+    // 4. 更新数据库为渲染完成
+    await updateRenderStatus(workId, 'completed', {
+      video_url: videoUrl,
+      render_completed_at: new Date().toISOString(),
+      duration_in_frames: durationInFrames,
+      duration_seconds: durationInFrames / (work.fps || 30),
+    });
+
+    logger.info(methodName, `✅ Work ${workId} completed successfully`);
+    logger.info(methodName, `   Status: ${work.status}, Render Status: completed`);
+
+    // 5. 清理本地文件
+    fs.unlinkSync(outputPath);
+  } catch (error) {
+    logger.error(methodName, `❌ Error processing work ${workId}:`, error);
+
+    // 更新为渲染失败状态
+    await updateRenderStatus(workId, 'failed', {
+      render_error: error.message,
+      render_completed_at: new Date().toISOString(),
+    });
+
+    // 清理可能存在的文件
+    if (fs.existsSync(outputPath)) {
+      fs.unlinkSync(outputPath);
+    }
+  }
+};

package/server/1

@@ -1,177 +0,0 @@
-require('dotenv').config();
-const { renderVideo } = require('./renderer');
-const { uploadToR2 } = require('./uploader');
-const fs = require('fs');
-const path = require('path');
-
-// 配置
-const CONFIG = {
-  POLL_INTERVAL: 60 * 1000, // 60秒检查一次
-  MAX_CONCURRENT: 1, // 同时只渲染1个视频
-  OUTPUT_DIR: path.join(__dirname, 'output'),
-};
-
-// 确保输出目录存在
-if (!fs.existsSync(CONFIG.OUTPUT_DIR)) {
-  fs.mkdirSync(CONFIG.OUTPUT_DIR, { recursive: true });
-}
-
-let isProcessing = false;
-
-/**
- * 更新作品状态
- */
-async function updateWorkStatus(workId, status, updates = {}) {
-  try {
-    const { error } = await supabase
-      .from('works')
-      .update({
-        status,
-        updated_at: new Date().toISOString(),
-        ...updates,
-      })
-      .eq('id', workId);
-
-    if (error) {
-      console.error(`Error updating work ${workId} to ${status}:`, error);
-    }
-  } catch (error) {
-    console.error('Unexpected error updating work status:', error);
-  }
-}
-
-/**
- * 处理单个作品的渲染
- */
-async function processWork(work) {
-  const workId = work.id;
-  const outputPath = path.join(CONFIG.OUTPUT_DIR, `${workId}.mp4`);
-
-  console.log(`\n[${new Date().toISOString()}] Processing work: ${workId}`);
-  console.log(`Title: ${work.title}`);
-
-  try {
-    // 1. 更新状态为 rendering
-    await updateWorkStatus(workId, 'rendering', {
-      render_started_at: new Date().toISOString(),
-    });
-
-    // 2. 渲染视频
-    console.log('Rendering video...');
-    await renderVideo({
-      sourceCode: work.source_code,
-      outputPath,
-      width: work.width || 1920,
-      height: work.height || 1080,
-      fps: work.fps || 30,
-    });
-
-    console.log('Video rendered successfully');
-
-    // 3. 上传到 R2
-    console.log('Uploading to R2...');
-    const videoUrl = await uploadToR2({
-      filePath: outputPath,
-      workId: workId,
-    });
-
-    console.log('Video uploaded:', videoUrl);
-
-    // 4. 获取视频信息
-    const stats = fs.statSync(outputPath);
-    const durationInFrames = Math.round(5 * (work.fps || 30)); // 暂时硬编码为5秒
-
-    // 5. 更新数据库
-    await updateWorkStatus(workId, 'published', {
-      video_url: videoUrl,
-      render_completed_at: new Date().toISOString(),
-      published_at: new Date().toISOString(),
-      duration_in_frames: durationInFrames,
-      duration_seconds: durationInFrames / (work.fps || 30),
-    });
-
-    console.log(`✅ Work ${workId} completed successfully`);
-
-    // 6. 清理本地文件
-    fs.unlinkSync(outputPath);
-  } catch (error) {
-    console.error(`❌ Error processing work ${workId}:`, error);
-
-    // 更新为失败状态
-    await updateWorkStatus(workId, 'render_failed', {
-      render_error: error.message,
-      render_completed_at: new Date().toISOString(),
-    });
-
-    // 清理可能存在的文件
-    if (fs.existsSync(outputPath)) {
-      fs.unlinkSync(outputPath);
-    }
-  }
-}
-
-/**
- * 主处理循环
- */
-async function processQueue() {
-  if (isProcessing) {
-    console.log('Already processing, skipping...');
-    return;
-  }
-
-  isProcessing = true;
-
-  try {
-    const works = await fetchPendingWorks();
-
-    if (works.length === 0) {
-      console.log(`[${new Date().toISOString()}] No pending works`);
-    } else {
-      console.log(`[${new Date().toISOString()}] Found ${works.length} pending work(s)`);
-
-      for (const work of works) {
-        await processWork(work);
-      }
-    }
-  } catch (error) {
-    console.error('Error in process queue:', error);
-  } finally {
-    isProcessing = false;
-  }
-}
-
-/**
- * 启动 Worker
- */
-async function start() {
-  console.log('='.repeat(60));
-  console.log('Remotion Render Worker Started');
-  console.log('='.repeat(60));
-  console.log(`Poll Interval: ${CONFIG.POLL_INTERVAL / 1000}s`);
-  console.log(`Max Concurrent: ${CONFIG.MAX_CONCURRENT}`);
-  console.log(`Output Directory: ${CONFIG.OUTPUT_DIR}`);
-  console.log('='.repeat(60));
-
-  // 立即执行一次
-  await processQueue();
-
-  // 定期执行
-  setInterval(processQueue, CONFIG.POLL_INTERVAL);
-}
-
-// 优雅退出
-process.on('SIGINT', () => {
-  console.log('\nReceived SIGINT, shutting down gracefully...');
-  process.exit(0);
-});
-
-process.on('SIGTERM', () => {
-  console.log('\nReceived SIGTERM, shutting down gracefully...');
-  process.exit(0);
-});
-
-// 启动
-start().catch((error) => {
-  console.error('Failed to start worker:', error);
-  process.exit(1);
-});