window.CCapture 不是 Node.js 中的构造函数

Question

我正在尝试在 Node.js 中加载 CCapture，而不必运行无头浏览器来记录 canvas 流。我不断收到 window.CCapture is not a constructor error.

CCapture 库 Link - https://github.com/spite/ccapture.js

这是我的代码

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const { window } = new JSDOM(`<!DOCTYPE html><body>
<script src='./node_modules/ccapture.js/build/CCapture.all.min.js'></script>
<canvas id="canvas" width="200" height="100"></canvas>
</body>`,
// We need these options to allow JSDOM to require CCapture from node_modules
{ runScripts: "dangerously", resources: "usable" });
  
const document = window.document;

window.onload = () => {
        console.log("Onload >>>>>>");
        const canvas = document.getElementById("canvas");
        //const canvas = createCanvas(200, 200)

        const ctx = canvas.getContext("2d");
        var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];

        function draw (){

            ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
        draw();

        
        var capturer = new window.CCapture( {
            format: 'ffmpegserver',
            framerate: 60,
            verbose: true,
            name: "foobar",     // videos will be named foobar-#.mp4, untitled if not set.
            extension: ".mp4",  // extension for file. default = ".mp4"
            codec: "mpeg4",     // this is an valid ffmpeg codec "mpeg4", "libx264", "flv1", etc...
                                // if not set ffmpeg guesses based on extension.
        } );

        console.log("Capture>>>>>", capturer);
   
  };

Answer 1

window.CCapture returns 未定义，表示脚本未成功加载。

那是因为在JSDOM中不能通过这种方式导入本地脚本。解决它的一种方法是通过 JSDOM 构造函数参数内的 CDN 加载脚本，而不是链接到本地文件。

Answer 2

jsdom 无法解析本地路径..使用 cdn 或通过读取文件内容内联加载脚本，然后通过 document.createElement[将其添加到 dom

样本：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const fs = require("fs");
const script = fs.readFileSync("./node_modules/ccapture.js/build/CCapture.all.min.js", {
  encoding: "utf8",
  flag: "r",
});
const { window } = new JSDOM(
  `<!DOCTYPE html>
  <body>
  </body>`,
  {
    runScripts: "dangerously",
    resources: "usable",
  }
);
var document = window.document;
var scriptEl = document.createElement("script");
scriptEl.textContent = script;
document.head.appendChild(scriptEl);
window.onload = () => {
  console.log(window.CCapture);
};

window.CCapture 不是 Node.js 中的构造函数

window.CCapture is not a constructor in Node.js

javascript

node.js

jsdom