DigitalOcean Droplet Deployment

[itsrishabh]

Hey @Vinlic great repo, I'm using this for a video-generation app I'm working that takes in automated news data and spits out generated videos using a headless chrome instance along with some data cleanup. Initially I built my own solution using puppeteer and puppeteer-video-recorder, though it was hacky at best.

I spent the last 2-3 days figuring out how to get this working on a DigitalOcean droplet using Ubuntu and an AMD architecture, figured it'd be helpful for others who might want to do the same.

Patch the current codebase

Hear me out, the current codebase is great, but I did have to patch a few things in order to get both the build and development server working on DO (and eventually Docker):

I created a few patches but this is all I've patched:

1. No need for FontFaceObserver for me – I think this is valuable but there were a lot of errors trying to get this to build
2. Drop common.css - My Nuxt app would drop all unused CSS and I just patched this out since my app takes care of this anyways via Tailwindcss
3. Remove Lottie library
4. Use relative paths instead of FS - This one gave me the most headache

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..efd77936a0a0cbc1dc3f0755a1b484ab8a1b430d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "nuxt.isNuxtApp": false
+}
diff --git a/api/ChunkVideo.js b/api/ChunkVideo.js
index 20eecccc110ec98414c87a9029f8abad51c635ba..50e187116ee5e9614185a9116b969b953b4ce7a9 100644
--- a/api/ChunkVideo.js
+++ b/api/ChunkVideo.js
@@ -210,7 +210,7 @@ export default class ChunkVideo extends VideoChunk {
             if (this.fonts.length > 0)
                 page.registerFonts(this.fonts);
             // 等待字体加载完成
-            await page.waitForFontsLoaded();
+            // await page.waitForFontsLoaded();
             // 注册事件序列
             if (this.timeActions && Object.keys(this.timeActions).length > 0)
                 page.registerTimeActions(this.timeActions);
diff --git a/api/SingleVideo.js b/api/SingleVideo.js
index da7c010b053a75ea65c6232d92417a174e3b35cf..23a47376a64fe826a47ab8a31bdc10c0689b9992 100644
--- a/api/SingleVideo.js
+++ b/api/SingleVideo.js
@@ -201,7 +201,7 @@ export default class SingleVideo extends Synthesizer {
             if (this.fonts.length > 0)
                 page.registerFonts(this.fonts);
             // 等待字体加载完成
-            await page.waitForFontsLoaded();
+            // await page.waitForFontsLoaded();
             // 注册事件序列
             if (this.timeActions && Object.keys(this.timeActions).length > 0)
                 page.registerTimeActions(this.timeActions);
diff --git a/core/Browser.js b/core/Browser.js
index f0cd41578258c90f096db0fc60af9fc673c034df..74c2d1802fc464249996e007eba8abf0f2f35a92 100644
--- a/core/Browser.js
+++ b/core/Browser.js
@@ -140,7 +140,7 @@ export default class Browser {
                 // 协议超时时间（毫秒）
                 protocolTimeout: _.defaultTo(globalConfig.browserProtocolTimeout, 180000),
                 // 用户目录路径
-                userDataDir: "tmp/browser",
+                userDataDir: "/tmp/browser",
                 // 浏览器启动参数
                 args: this.#generateArgs()
             });
diff --git a/core/Page.js b/core/Page.js
index 0ab9eea959fd71329936d62fabd96787d173e972..0ba77a0e39e5d1d01f14860c897a50365f5cbc08 100644
--- a/core/Page.js
+++ b/core/Page.js
@@ -11,7 +11,7 @@ import CaptureContext from "./CaptureContext.js";
 import SvgAnimation from "../media/SvgAnimation.js";
 import VideoCanvas from "../media/VideoCanvas.js";
 import DynamicImage from "../media/DynamicImage.js";
-import LottieCanvas from "../media/LottieCanvas.js";
+// import LottieCanvas from "../media/LottieCanvas.js";
 import MP4Demuxer from "../media/MP4Demuxer.js";
 import VideoConfig from "../preprocessor/video/VideoConfig.js";
 import Audio from "../entity/Audio.js";
@@ -28,14 +28,12 @@ import util from "../lib/util.js";
 
 // 默认用户UA
 const DEFAULT_USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0";
-// 公共样式内容
-const COMMON_STYLE_CONTENT = fs.readFileSync(util.rootPathJoin("lib/common.css"), "utf-8");
 // MP4Box库脚本内容
-const MP4BOX_LIBRARY_SCRIPT_CONTENT = fs.readFileSync(util.rootPathJoin("lib/mp4box.js"), "utf-8");
+const MP4BOX_LIBRARY_SCRIPT_CONTENT = "./../lib/mp4box.js";
 // Webfont库脚本内容
-const FONTFACE_OBSERVER_SCRIPT_CONTENT = fs.readFileSync(util.rootPathJoin("lib/fontfaceobserver.js"), "utf-8");
+// const FONTFACE_OBSERVER_SCRIPT_CONTENT = "./../lib/fontfaceobserver.js";
 // Lottie动画库脚本内容
-const LOTTIE_LIBRARY_SCRIPT_CONTENT = fs.readFileSync(util.rootPathJoin("lib/lottie.js"), "utf-8");
+// const LOTTIE_LIBRARY_SCRIPT_CONTENT = "./../lib/lottie.js";
 // 页面计数
 let pageIndex = 1;
 
@@ -192,12 +190,10 @@ export default class Page extends EventEmitter {
         // 页面导航到URL
         await this.target.goto(url, waitForOptions);
         await Promise.all([
-            // 注入公共样式
-            this.#injectStyle(COMMON_STYLE_CONTENT),
             // 注入MP4Box库
             this.#injectLibrary(MP4BOX_LIBRARY_SCRIPT_CONTENT + ";window.____MP4Box = window.MP4Box;window.MP4Box = undefined"),
             // 注入Lottie动画库
-            this.#injectLibrary(LOTTIE_LIBRARY_SCRIPT_CONTENT + ";window.____lottie = window.lottie;window.lottie = undefined")
+            // this.#injectLibrary(LOTTIE_LIBRARY_SCRIPT_CONTENT + ";window.____lottie = window.lottie;window.lottie = undefined")
         ]);
         // 初始化捕获上下文
         await this.target.evaluate(() => captureCtx.init());
@@ -221,12 +217,10 @@ export default class Page extends EventEmitter {
         await this.#listenCSSAnimations();
         await this.target.setContent(content, waitForOptions);
         await Promise.all([
-            // 注入公共样式
-            this.#injectStyle(COMMON_STYLE_CONTENT),
             // 注入MP4Box库
             this.#injectLibrary(MP4BOX_LIBRARY_SCRIPT_CONTENT + ";window.____MP4Box = window.MP4Box;window.MP4Box = undefined"),
             // 注入Lottie动画库
-            this.#injectLibrary(LOTTIE_LIBRARY_SCRIPT_CONTENT + ";window.____lottie = window.lottie;window.lottie = undefined")
+            // this.#injectLibrary(LOTTIE_LIBRARY_SCRIPT_CONTENT + ";window.____lottie = window.lottie;window.lottie = undefined")
         ]);
         // 初始化捕获上下文
         await this.target.evaluate(() => captureCtx.init());
@@ -278,29 +272,29 @@ export default class Page extends EventEmitter {
      * 
      * @param {number} [timeout=30000] - 等待超时时间（毫秒）
      */
-    async waitForFontsLoaded(timeout = 30000) {
-        // 注入Webfont库
-        await this.#injectLibrary(FONTFACE_OBSERVER_SCRIPT_CONTENT + ";window.____FontFaceObserver = FontFaceObserver");
-        // 等待字体加载完成
-        await Promise.all(this.fonts.map(font => font.load()));
-        // 将所有字体声明拼接为样式
-        const styles = this.fonts.reduce((style, font) => style + font.toFontFace(), "");
-        // 添加样式标签到页面
-        styles && await this.#injectStyle(styles);
-        await this.target.evaluate(async _timeout => {
-            const fonts = [...document.fonts];
-            // 无字体则跳过加载
-            if (fonts.length == 0)
-                return;
-            // 等待字体加载完成
-            let timer;
-            await Promise.race([
-                Promise.all(fonts.map(font => new ____FontFaceObserver(font.family).load())),
-                new Promise((_, reject) => timer = (window.____setTimeout || window.setTimeout)(reject, _timeout))
-            ]);
-            (window.____clearTimeout || window.clearTimeout)(timer);
-        }, timeout);
-    }
+    // async waitForFontsLoaded(timeout = 30000) {
+    //     // 注入Webfont库
+    //     // await this.#injectLibrary(FONTFACE_OBSERVER_SCRIPT_CONTENT + ";window.____FontFaceObserver = FontFaceObserver");
+    //     // 等待字体加载完成
+    //     await Promise.all(this.fonts.map(font => font.load()));
+    //     // 将所有字体声明拼接为样式
+    //     const styles = this.fonts.reduce((style, font) => style + font.toFontFace(), "");
+    //     // 添加样式标签到页面
+    //     styles && await this.#injectStyle(styles);
+    //     await this.target.evaluate(async _timeout => {
+    //         const fonts = [...document.fonts];
+    //         // 无字体则跳过加载
+    //         if (fonts.length == 0)
+    //             return;
+    //         // 等待字体加载完成
+    //         let timer;
+    //         await Promise.race([
+    //             Promise.all(fonts.map(font => new ____FontFaceObserver(font.family).load())),
+    //             new Promise((_, reject) => timer = (window.____setTimeout || window.setTimeout)(reject, _timeout))
+    //         ]);
+    //         (window.____clearTimeout || window.clearTimeout)(timer);
+    //     }, timeout);
+    // }
 
     /**
      * 注入样式
@@ -516,7 +510,6 @@ export default class Page extends EventEmitter {
             window.____SvgAnimation=${SvgAnimation};
             window.____VideoCanvas=${VideoCanvas};
             window.____DynamicImage=${DynamicImage};
-            window.____LottieCanvas=${LottieCanvas};
             window.____CaptureContext=${CaptureContext};
             window.captureCtx=new ____CaptureContext();
         `);
@@ -764,7 +757,7 @@ export default class Page extends EventEmitter {
             }
             // 从本地拉取字体
             else if (method == "GET" && /^\/local_font\//.test(pathname)) {
-                const filePath = path.join("tmp/local_font/", pathname.substring(12));
+                const filePath = path.join("/tmp/local_font/", pathname.substring(12));
                 if (!await fs.pathExists(filePath)) {
                     return await request.respond({
                         status: 404,
diff --git a/core/Synthesizer.js b/core/Synthesizer.js
index 2ce622d7f5187cb8307278af1c4a380ffcbd9d4f..0e08d7b63963080e13e48950bef2a5d766f000da 100644
--- a/core/Synthesizer.js
+++ b/core/Synthesizer.js
@@ -90,7 +90,7 @@ export default class Synthesizer extends EventEmitter {
     /** @type {Audio[]} - 音频列表 */
     audios = [];
     /** @type {string} - 临时路径 */
-    tmpDirPath = path.resolve("tmp/synthesizer/");
+    tmpDirPath = path.resolve("/tmp/synthesizer/");
     /** @type {number} - 启动时间点 */
     _startupTime = null;
     /** @protected @type {string} - 交换文件路径 */
diff --git a/entity/Audio.js b/entity/Audio.js
index 0d6509d960685adb8e21ff9f2c5ab12cf5d5d9ad..4886fefb99cc49e3a41ccc76c116e6f918e17e95 100644
--- a/entity/Audio.js
+++ b/entity/Audio.js
@@ -42,7 +42,7 @@ export default class Audio {
     /** @type {boolean} - 是否忽略本地缓存 */
     ignoreCache;
     /** @type {string} - 临时路径 */
-    tmpDirPath = path.resolve("tmp/preprocessor/");
+    tmpDirPath = path.resolve("/tmp/preprocessor/");
     /** @type {Promise} - 加载承诺 */
     #loadPromise;
 
diff --git a/entity/Font.js b/entity/Font.js
index 300090f8e697baeb169752a8659ea8e4977c302a..28374fb252d7c5aca4dc9222e80a910520fd2480 100644
--- a/entity/Font.js
+++ b/entity/Font.js
@@ -27,7 +27,7 @@ export default class Font {
     /** @type {boolean} - 是否忽略本地缓存 */
     ignoreCache;
     /** @type {string} - 临时路径 */
-    tmpDirPath = path.resolve("tmp/local_font/");
+    tmpDirPath = path.resolve("/tmp/local_font/");
     /** @type {string} - 内部字体URL */
     #innerURL;
     /** @type {Promise} - 加载承诺 */
diff --git a/lib/cleaner.js b/lib/cleaner.js
index ea27b7215d19e5c0d105e0a34a408fd5276025a1..fc92fda25b17932f20761b9f5ceacc2f7223f747 100644
--- a/lib/cleaner.js
+++ b/lib/cleaner.js
@@ -6,28 +6,28 @@ export default {
      * 清理浏览器缓存
      */
     async cleanBrowserCache() {
-        await fs.emptyDir("tmp/browser");
+        await fs.emptyDir("/tmp/browser");
     },
 
     /**
      * 清理预处理器缓存
      */
     async cleanPreprocessCache() {
-        await fs.emptyDir("tmp/preprocessor");
+        await fs.emptyDir("/tmp/preprocessor");
     },
 
     /**
      * 清理合成器缓存
      */
     async cleanSynthesizeCache() {
-        await fs.emptyDir("tmp/synthesizer");
+        await fs.emptyDir("/tmp/synthesizer");
     },
     
     /**
      * 清理本地字体缓存
      */
     async cleanLocalFontCache() {
-        await fs.emptyDir("tmp/local_font");
+        await fs.emptyDir("/tmp/local_font");
     }
 
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index 201c8d10742bc9008ded145daa8c7993eb1c4c31..408e16c56a4fd7c571fead2f1c4c1ba4d4bed7ff 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "ffmpeg-static": "^5.2.0",
     "ffprobe-static": "^3.1.0",
     "fluent-ffmpeg": "^2.1.2",
+    "fontfaceobserver": "^2.3.0",
     "fs-extra": "^11.1.1",
     "generic-pool": "^3.9.0",
     "got": "^13.0.0",
diff --git a/preprocessor/base/Task.js b/preprocessor/base/Task.js
index e13a64d60cba07731429489abc611293b8796757..7c42485053d99b4db7eb267be5c9e2c3396ff57d 100644
--- a/preprocessor/base/Task.js
+++ b/preprocessor/base/Task.js
@@ -48,7 +48,7 @@ export default class Task extends EventEmitter {
     /** @type {boolean} - 是否忽略本地缓存 */
     ignoreCache;
     /** @type {string} @protected 临时路径 */
-    tmpDirPath = path.resolve("tmp/preprocessor/");
+    tmpDirPath = path.resolve("/tmp/preprocessor/");
 
     /**
      * 构造函数

Install FFMPEG/FFPROBE/CHROME on DigitalOcean separately and source appropriately in your app

Sample .env file for my Mac

BROWSER_EXECUTABLE_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
FFMPEG_EXECUTABLE_PATH="/opt/homebrew/bin/ffmpeg"
FFPROBE_EXECUTABLE_PATH="/opt/homebrew/bin/ffprobe"

Sample .env file for DigitalOcean

SERVER_PRESET="digital-ocean"
BROWSER_EXECUTABLE_PATH="/usr/bin/google-chrome"
FFMPEG_EXECUTABLE_PATH="/usr/bin/ffmpeg"
FFPROBE_EXECUTABLE_PATH="/usr/bin/ffprobe"

This lets me call these executable paths for my needs ie:

  // Configure WVC
  wvc.config({
    // Choose an appropriate encoder based on your hardware. Here, we are using the h264_nvenc encoder for Nvidia graphics cards.
    // Encoder selection can refer to docs/video-encoder.md - You must use  { VIDEO_ENCODER } from "web-view-creator" ie: import WebVideoCreator, { VIDEO_ENCODER, logger } from "web-video-creator";
    // mp4Encoder: VIDEO_ENCODER.AMD.H265 || VIDEO_ENCODER.NVIDIA.H264 || VIDEO_ENCODER.CPU.H264,
    compatibleRenderingMode: process.env.SERVER_PRESET === 'digital-ocean' ? false : true,
    // Browser configuration
    browserExecutablePath: browserPath,
    browserDebug: true,
    browserHeadless: true,
    browserUseGPU: false,
    browserFrameRateLimit: false,
    ffmpegDebug: true,
    ffmpegExecutablePath: ffmpegPath,
    ffprobeExecutablePath: ffprobePath,
    debug: true,
    numBrowserMin: 1,
    numBrowserMax: 10,
  });

I turned off browserUseGPU since the virtual GPU is not great from DO.

Add a Chrome kill process function

/server/record.post.js

import { exec } from "child_process";

  // Function to kill chrome
  function killChromeProcesses() {
    return new Promise((resolve, reject) => {
      exec("pkill -9 chrome", (error, stdout, stderr) => {
        if (error) {
          console.error(`Error killing Chrome processes: ${error.message}`);
          return reject(error);
        }
        if (stderr) {
          console.error(`stderr: ${stderr}`);
          return reject(new Error(stderr));
        }
        console.log(`stdout: ${stdout}`);
        resolve(stdout);
      });
    });
  }
  
  // Start rendering
  video.start();

  // Wait for the video to complete to return the response
  return new Promise(async (resolve) => {
    video.once("completed", async (result: any) => {
      console.info({ result })

      logger.success(`Render Completed!!!\nvideo duration: ${Math.floor(result.duration / 1000)}s\ntakes: ${Math.floor(result.takes / 1000)}s\nRTF: ${result.rtf}`)
      // Get the file path of the rendered video and then remove the file
      const { outputPath } = result;
      console.info({ outputPath })

      const dateString = new Date().toISOString().replace(/:/g, '-').replace(/\./g, '-');
      const resolution = await Promise.resolve(handleUpload(`${cleanTitle}-${dateString}.mp4`, outputPath));
      console.info({ resolution })

      // Remove the video
      try {
        await fs.unlinkSync(outputPath);
      } catch (error) {
        console.error("Failed to remove video:", error);
      }

      // Kill Chrome processes
      try {
        await killChromeProcesses();
        console.log("Chrome processes killed successfully.");
      } catch (error) {
        console.error("Failed to kill Chrome processes:", error);
      }

      resolve(resolution)
    });
  });

Anyways, then I just ran pnpm build && pnpm start and it worked perfectly.

[Vinlic]

@itsrishabh
The work you’ve done is excellent! I’m currently refactoring this repository using TypeScript, and I’ll be referencing some of your code changes.

[itsrishabh]

Awesome, good to hear!