Add proxy render

package.ci.json

@@ -9,7 +9,7 @@
 	"scripts": {
 		"submodule": "git submodule init && git submodule update",
 		"ci": "echo Runnin on CI",
-		"start": "remotion studio --log=verbose --disable-git-source --port=3000 & PORT=8080 node server.js",
+		"start": "node server.js",
 		"bundle": "echo -n | remotion bundle",
 		"skip-font-warn": "sed -E -i \"s/\\bfontsLoaded[[:space:]]*>[[:space:]]*20\\b/fontsLoaded > 20000/g\" build/bundle.js",
 		"extract32": "set MODIFY_FILES=1 && node app.js",

proxy-renderer.js

@@ -2,69 +2,90 @@ import { renderFrames, renderStill, stitchFramesToVideo } from '@remotion/render
 import { bundle } from '@remotion/bundler';
 import path from 'path';
 import fs from 'fs';
-
+import axios from 'axios';
+import os from 'os'
+import { exec } from 'child_process';
 const { RenderUtils } = await import('./src/RenderUtils.cjs');
 const { GenerateScript } = await import('./src/GenerateScript.cjs');
 
 const originalManuScriptPath = path.join(process.cwd(), 'public/original_manuscript.json');
-
-export const renderProxy = async (outFile, frameRange) => {
+let cmd = `npm run preview`;
+const childProcess = exec(cmd);
+export const renderProxy = async (outFile, options) => {
   const ScriptStr = fs.readFileSync(originalManuScriptPath);
   const ScriptInput = JSON.parse(ScriptStr);
   let {
     duration,
     Script,
-    contents,
-    intro,
-    outro,
-    playListsIDs
   } = GenerateScript(ScriptInput)
-  let renderConfig = {
-    composition: {
-      id: compositionId,
-      fps: Script.meta.fps,
-      height: Script.meta?.resolution?.height,
-      width: Script.meta?.resolution?.width,
-      durationInFrames: duration,
-      defaultProps: Object.assign(Script, {
-        bgMusic: RenderUtils.getFileName(Script.bgMusic),
-        contents: contents,
-        intro: intro,
-        outro: outro
-      }),
-      props: Object.assign(Script, {
-        bgMusic: RenderUtils.getFileName(Script.bgMusic),
-        contents: contents,
-        intro: intro,
-        outro: outro
-      }),
-    },
-    serveUrl: bundleLocation,
-    output: path.join(frameOutputDir, 'output.jpg'),
-    // additional renderer options
-    audioCodec: 'mp3',
-    imageFormat: 'jpeg',
-    enableMultiProcessOnLinux: true,
-    jpegQuality: 70,
-    timeoutInMilliseconds: 60000,
-    concurrency: 1,
-    gl: 'angle'
-  }
-
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
+  const composition = ScriptInput?.meta?.renderComposition;
+  return new Promise((resolve, reject) => {
+    const renderOptions = {
+      compositionId: composition,
+      startFrame: options?.startFrame ?? 0,
+      endFrame: options?.endFrame ?? duration - 1,
+      logLevel: options?.logLevel ?? "verbose",
+      type: options?.type ?? "video",
+      outName: outFile ?? "out/output.mp4",
+      imageFormat: options?.imageFormat ?? "jpeg",
+      jpegQuality: options?.jpegQuality ?? 70,
 
-  const resultVideo = await stitchFramesToVideo({
-    assetsInfo: result.assetsInfo,
-    ...renderConfig,
-    ...renderConfig.composition,
-    audioCodec: 'mp3',
-    outputLocation: outFile,
-    verbose: true
-  })
-
-  console.log('resultVideo', resultVideo)
 
+      scale: options?.scale ?? 1,
+      codec: options?.codec ?? "h264",
+      concurrency: options?.concurrency ?? os.cpus().length,
+      crf: options?.crf ?? 18,
+      muted: options?.muted ?? false,
+      enforceAudioTrack: options?.enforceAudioTrack ?? false,
+      proResProfile: options?.proResProfile ?? null,
+      x264Preset: options?.x264Preset ?? "medium",
+      pixelFormat: options?.pixelFormat ?? "yuv420p",
+      audioBitrate: options?.audioBitrate ?? null,
+      videoBitrate: options?.videoBitrate ?? null,
+      everyNthFrame: options?.everyNthFrame ?? 1,
+      numberOfGifLoops: options?.numberOfGifLoops ?? null,
+      delayRenderTimeout: options?.delayRenderTimeout ?? 300000,
+      audioCodec: options?.audioCodec ?? "aac",
+      disallowParallelEncoding: options?.disallowParallelEncoding ?? false,
+      chromiumOptions: {
+        headless: options?.chromiumOptions?.headless ?? true,
+        disableWebSecurity: options?.chromiumOptions?.disableWebSecurity ?? false,
+        ignoreCertificateErrors: options?.chromiumOptions?.ignoreCertificateErrors ?? false,
+        gl: options?.chromiumOptions?.gl ?? null,
+        userAgent: options?.chromiumOptions?.userAgent ?? null,
+        enableMultiProcessOnLinux: options?.chromiumOptions?.enableMultiProcessOnLinux ?? true
+      },
+      envVariables: options?.envVariables ?? {},
+      serializedInputPropsWithCustomSchema: options?.serializedInputPropsWithCustomSchema ?? JSON.stringify(Script),
+      offthreadVideoCacheSizeInBytes: options?.offthreadVideoCacheSizeInBytes ?? null,
+      offthreadVideoThreads: options?.offthreadVideoThreads ?? null,
+      colorSpace: options?.colorSpace ?? "default",
+      multiProcessOnLinux: options?.multiProcessOnLinux ?? true,
+      encodingBufferSize: options?.encodingBufferSize ?? null,
+      encodingMaxRate: options?.encodingMaxRate ?? null,
+      beepOnFinish: options?.beepOnFinish ?? false,
+      repro: options?.repro ?? false,
+      forSeamlessAacConcatenation: options?.forSeamlessAacConcatenation ?? false,
+      separateAudioTo: options?.separateAudioTo ?? null,
+      hardwareAcceleration: options?.hardwareAcceleration ?? "disable",
+      chromeMode: options?.chromeMode ?? "headless-shell"
+    };
+    console.log('Invoking studio with', renderOptions)
+    axios.post('http://localhost:3000/api/render', renderOptions).then(resp => {
+      console.log('Studio started render', resp.data)
 
+      childProcess.stdout.on('data', (data) => {
+        console.log(data)
+        if (data.includes('Cleanup: Closing browser instance')) {
+          resolve(outFile)
+        }
+      });
+      childProcess.stderr.on('data', (data) => {
+        console.error(data)
+        if (data.includes('Failed to render')) {
+          reject(data)
+        }
+      });
+    }).catch(reject)
+  })
 } 

renderer.js

@@ -51,12 +51,12 @@ export function getNpmScript(mediaType) {
 export async function doRender(jobId, composition, sendToObserver, target = 'render', ssrOptions, proxyOptions) {
 	let outFile = path.join(process.cwd(), `out`, `${jobId}-video.mp4`);
 	if (ssrOptions) {
-		await renderSSR(outFile, ssrOptions.frameRange)
+		await renderSSR(outFile, ssrOptions.startFrame, ssrOptions.endFrame)
 		sendToObserver(jobId, 'completed');
 		return outFile
 	}
 	else if (proxyOptions) {
-		await renderProxy(outFile, proxyOptions.frameRange)
+		await renderProxy(outFile, proxyOptions)
 		sendToObserver(jobId, 'completed');
 		return outFile
 	}

routes.js

@@ -58,7 +58,7 @@ RenderRouter.post('/api/render-sync', async (req, res) => {
 			let pref = new PerformanceRecorder();
 			const dir = path.join(__dirname, 'public')
 			const zipFile = path.join(dir, `exported-${jobId}.zip`)
-			if (!existsSync(zipFile)) {
+			if (!existsSync(zipFile) || req.body.force || req.query.force) {
 				if (!skipClear) {
 					clear();
 				}
@@ -78,7 +78,8 @@ RenderRouter.post('/api/render-sync', async (req, res) => {
 						logs.push(log);
 					},
 					getNpmScript(req.query.media_type),
-					req.body.ssrOptions
+					req.body.ssr,
+					req.body.proxy
 				);
 			}
 			const uploader = new FileUploader('oracle', {

ssr.js

@@ -28,7 +28,7 @@ function updateAssetInfo(assetInfoNew) {
   fs.writeFileSync(assetsInfoFile, JSON.stringify(assetInfoNew))
 }
 
-export const renderSSR = async (outFile, frameRange) => {
+export const renderSSR = async (outFile, startFrame, endFrame) => {
   const ScriptStr = fs.readFileSync(originalManuScriptPath);
   const ScriptInput = JSON.parse(ScriptStr);
   let {
@@ -103,7 +103,7 @@ export const renderSSR = async (outFile, frameRange) => {
     },
     imageSequencePattern: frameNamePattern,
     outputDir: frameOutputDir,
-    frameRange: frameRange ?? [0, duration - 1],
+    frameRange: [startFrame ?? 0, endFrame ?? duration - 1],
     onFrameUpdate: (rendered, frameIndex, timeTakenPerFrameMs) => {
       if (rendered % 10 !== 0 && frameIndex !== duration - 1) return;
       const remainingFrames = Math.max(0, duration - frameIndex);

start.sh

@@ -1,45 +1,13 @@
 #!/usr/bin/env bash
 set -e
 
-# Optional: redirect logs to file /var/log/app.log if you like
-# Start your app in background. Assumes `npm start` binds to 0.0.0.0:3000 (and 8083 for renderer).
-# If your app needs env vars set, ensure they are available to the container at runtime.
-
 echo "Starting app (npm start) in background..."
 npm start &
 
 APP_PID=$!
 echo "App PID: $APP_PID"
 
-# Give the app a short moment to start and bind sockets (adjust if needed)
 sleep 1
 
-# Start nginx in foreground to keep the container alive
 echo "Starting nginx (foreground)..."
 nginx -g 'daemon off;'
-
-# when nginx exits, container exits (and child app will be killed)
-# export DISPLAY=:10.0 && is_pm2=1 node server.js
-
-
-# sudo nano /etc/systemd/system/media-render-farm.service
-# sudo systemctl status media-render-farm.service
-# sudo systemctl restart media-render-farm.service
-# sudo systemctl daemon-reload
-# sudo systemctl restart media-render-farm.service
-# journalctl -u media-render-farm.service -f
-
-# [Unit]
-# Description=Semibit Media Render Farm
-# After=network.target
-
-# [Service]
-# ExecStart=/home/ubuntu/apps/node/semibit-media-render-farm/sstart.sh
-# WorkingDirectory=/home/ubuntu/apps/node/semibit-media-render-farm
-# Restart=always
-# User=ubuntu
-# Group=ubuntu
-# Environment="NODE_ENV=production"
-
-# [Install]
-# WantedBy=multi-user.target